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

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

php中世界最好的语言

Release： 2018-04-19 15:39:30

Original

1670 people have browsed it

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>

Copy after login

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