Jquery中.attr()和.data()的區別

wdskuki發表於2017-03-10
jQuery

Jquery中.attr()和.data()的區別

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

Jquery物件屬性和DOM屬性

一個簡單的例子

<!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 = $(`#app`).attr(`data-foo`);
        var getData1 = $(`#app`).data(`foo`);
        console.log(`getAttr1: ` + getAttr1); //hello
        console.log(`getData1: ` + getData1); //hello

        $(`#app`).attr(`data-foo`, `world`); //$.attr 設定DOM元素屬性值
        var getAttr2 = $(`#app`).attr(`data-foo`);
        var getData2 = $(`#app`).data(`foo`);
        console.log(`getAttr2: ` + getAttr2); //world
        console.log(`getData2: ` + getData2); //*** hello ***

        $(`#app`).data(`foo`, `WORLD`); //$.data 設定DOM node屬性值
        var getAttr3 = $(`#app`).attr(`data-foo`);
        var getData3 = $(`#app`).data(`foo`);
        console.log(`getAttr3: ` + getAttr3); //world
        console.log(`getData3: ` + 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()應避免混合用，也就是應該儘量避免如下兩種情況的出現：

  1. 通過$.attr()來進行set屬性，然後通過$.data()進行get屬性值；

  2. 通過$.data()來進行set屬性，然後通過$.attr()進行get屬性值。

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

相關文章