Home >Web Front-end >JS Tutorial >The difference between .attr() and .data()

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

php中世界最好的语言Original: 2018-04-19 15:39:301698browse

This time I will bring you the difference between .attr() and .data(). What are the precautions when using .attr() and .data(). The following is a practical case. Let’s take a look. take a look.

Jquery ObjectProperties and DOM properties

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">
    vargetAttr1 = $('#app').attr('data-foo');
    vargetData1 = $('#app').data('foo');
    console.log('getAttr1: '+ getAttr1);//hello
    console.log('getData1: '+ getData1);//hello
    $('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值
    vargetAttr2 = $('#app').attr('data-foo');
    vargetData2 = $('#app').data('foo');
    console.log('getAttr2: '+ getAttr2);//world
    console.log('getData2: '+ getData2);//*** hello ***
    $('#app').data('foo','WORLD');//$.data 设置DOM node属性值
    vargetAttr3 = $('#app').attr('data-foo');
    vargetData3 = $('#app').data('foo');
    console.log('getAttr3: '+ getAttr3);//world
    console.log('getData3: '+ getData3);//*** WORLD ***
  </script>
</html>

• $.attr() takes the attribute value from the DOM element every time, that is, it is consistent with the attribute value in the tag in the view. •$.attr('data-foo') will get the data-foo attribute value from the tag;

•$.attr('data-foo', 'world') will insert the string 'world' 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 inconsistent with the attribute value in the view. •$.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 insert 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

Therefore, $.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() to get the 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 will not cause additional DOM operations.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

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

Related articles