What is the difference between data() and attr() in jquery-Front-end Q&A-php.cn

What is the difference between data() and attr() in jquery

青灯夜游

Release： 2021-11-15 14:38:58

Original

2011 people have browsed it

Difference: "$.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; while "$.data()" takes the value from Jquery When obtaining values from an object, since the object attribute values are stored in memory, they may not necessarily be consistent with the attribute values in the view.

What is the difference between data() and attr() in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

$.attr() and $.data() essentially belong to DOM attributes and Jquery object attributes difference.

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 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData1 = $(&#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元素属性值
        var getAttr2 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData2 = $(&#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属性值
        var getAttr3 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData3 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr3: &#39; + getAttr3); //world
        console.log(&#39;getData3: &#39; + 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 Attribute values within tags remain consistent.
- $.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( ) is to get 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 stuff the string 'world' into the 'foo' attribute of the Jquery object instead of In the data-foo attribute of the view tag.

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

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

Through $. attr() to set the attribute, and then use $.data() to get the attribute value;
Use $.data() to set the attribute, and then use $.attr() 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 , will not cause additional DOM operations.

Recommended related video tutorials: jQuery Tutorial (Video)

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