首頁 > 文章 > web前端 > jquery中data()和attr()的差別是什麼

jquery中data()和attr()的差別是什麼

青灯夜游原創: 2021-11-15 14:38:581964瀏覽

區別：「$.attr()」每次都從DOM元素中取屬性的值，即和視圖中標籤內的屬性值保持一致；而「$.data()」是從Jquery物件中取值，由於物件屬性值保存在記憶體中，和視圖中的屬性值不一定一致。

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

$.attr()和$.data()本質上屬於DOM屬性和Jquery物件屬性的區別。

一個簡單的範例

<!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>

$.attr()每次都從DOM元素中取屬性的值，也就是和視圖中標籤內的屬性值保持一致。
- $.attr('data-foo')會從標籤內取得data-foo屬性值；
- $.attr(' data-foo', 'world')會將字串'world'塞到標籤的'data-foo'屬性；
$.data( )是從Jquery物件中取值，由於物件屬性值保存在記憶體中，因此可能和視圖裡的屬性值不一致的情況。
- $.data('foo')會從Jquery物件內得到foo的屬性值，不是從標籤內取得data-foo屬性值；
- $.data('foo', 'world')會將字串'world'塞到Jquery物件的'foo'屬性中，而不是塞到視圖標籤的data-foo屬性中。

結合上面程式碼和解釋，大家應該要能理解兩者的差異。

所以$.attr()和$.data()要避免混合用，也就是應該盡量避免以下兩種情況的出現：

透過$. attr()來進行set屬性，然後透過$.data()進行get屬性值；
#透過$.data()來進行set屬性，然後透過$.attr()進行get屬性值。

同時從效能的角度來說，建議使用$.data()來進行set和get操作，因為它只是修改的Jquey物件的屬性值，不會引起額外的DOM操作。

相關影片教學推薦：jQuery教學（影片）

以上是jquery中data()和attr()的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery 字符串对象 dom

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery的gt是什麼下一篇：jquery的gt是什麼

看更多