Home > Article > Web Front-end > The difference between .attr() and .data() in jQuery

The difference between .attr() and .data() in jQuery

小云云Original: 2017-12-29 11:20:351318browse

$.attr() and $.data() essentially belong to the difference between DOM attributes and Jquery object attributes. The following is an example to introduce to you the difference between .attr() and .data() in jQuery. Let’s take a look.

$.attr() and $.data() essentially belong to DOM attributes and Jquery objects. attribute differences.

Jquery object attributes and DOM attributes

A simple example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jquery中.attr和.data的区别</title>
  </head>
  <body>
    <p id="app" data-foo="hello"></p>
  </body>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    var getAttr1 = $('#app').attr('data-foo');
    var getData1 = $('#app').data('foo');
    console.log('getAttr1: ' + getAttr1); //hello
    console.log('getData1: ' + getData1); //hello
    $('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值
    var getAttr2 = $('#app').attr('data-foo');
    var getData2 = $('#app').data('foo');
    console.log('getAttr2: ' + getAttr2); //world
    console.log('getData2: ' + getData2); //*** hello ***
    $('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值
    var getAttr3 = $('#app').attr('data-foo');
    var getData3 = $('#app').data('foo');
    console.log('getAttr3: ' + getAttr3); //world
    console.log('getData3: ' + getData3); //*** WORLD ***
  </script>
</html>

• $.attr() takes the value of the attribute from the DOM element every time, that is, and the view The attribute values in the tags remain consistent. •$.attr('data-foo') will get the data-foo attribute value from the tag;

•$.attr('data-foo', 'world') will get the string 'world' is stuffed into the 'data-foo' attribute of the tag;

•$.data() takes the value from the Jquery object. Since the object attribute value is stored in memory, it may be different from the value in the view. Inconsistent attribute values. •$.data('foo') will get the attribute value of foo from the Jquery object, not the data-foo attribute value from the tag;

•$.data('foo', ' world') will stuff the string 'world' into the 'foo' attribute of the Jquery object instead of the data-foo attribute of the view tag.

Combining the above code and explanation, everyone should be able to understand the difference between the two.

Summary

So $.attr() and $.data() should avoid mixed use, that is, the following two situations should be avoided as much as possible:

1. Use $.attr() to set the attribute, and then use $.data() to get the attribute value;

2. Use $.data() to set the attribute, and then use $.attr() get attribute value.

At the same time, from a performance perspective, it is recommended to use $.data() for set and get operations, because it only modifies the attribute value of the Jquey object and does not cause additional DOM operations.

Related recommendations:

The difference between jQuery’s attr() and prop()

CSS attribute attr()

jQuery: The difference between attr() and prop()

The above is the detailed content of The difference between .attr() and .data() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of examples of jquery+css implementing drop-down list functionNext article：Detailed explanation of examples of jquery+css implementing drop-down list function

See more

The difference between .attr() and .data() in jQuery

Related articles