The difference between .attr() and .data() in jQuery-JS Tutorial-php.cn

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

小云云

Release： 2017-12-29 11:20:35

Original

1316 people have browsed it

$.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>

Copy after login

• $.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!