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

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.

JqueryObjectProperties and DOM properties

A simple example

nbsp;html>

  
    <meta>
    <title>Jquery中.attr和.data的区别</title>
  
  
    <p></p>
  
  <script></script>
  <script>
    vargetAttr1 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
    vargetData1 = $(&#39;#app&#39;).data(&#39;foo&#39;);
    console.log(&#39;getAttr1: &#39;+ getAttr1);//hello
    console.log(&#39;getData1: &#39;+ getData1);//hello
    $(&#39;#app&#39;).attr(&#39;data-foo&#39;,&#39;world&#39;);//$.attr 设置DOM元素属性值
    vargetAttr2 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
    vargetData2 = $(&#39;#app&#39;).data(&#39;foo&#39;);
    console.log(&#39;getAttr2: &#39;+ getAttr2);//world
    console.log(&#39;getData2: &#39;+ getData2);//*** hello ***
    $(&#39;#app&#39;).data(&#39;foo&#39;,&#39;WORLD&#39;);//$.data 设置DOM node属性值
    vargetAttr3 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
    vargetData3 = $(&#39;#app&#39;).data(&#39;foo&#39;);
    console.log(&#39;getAttr3: &#39;+ getAttr3);//world
    console.log(&#39;getData3: &#39;+ getData3);//*** WORLD ***
  </script>

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

Recommended reading:

jQuery makes mouse wheel operation picture zoom size

jQuery implements the back to top function

jQuery determines whether to browse to the bottom of the webpage

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