jq 物件的 attr 和 data 方法

longqiUTR發表於2019-03-21
物件

有一定基礎的前端一定對 jq 中的 attr() 和 data() 方法不陌生，attr() 可以獲取 html 元素的屬性，其中包括自定義屬性（data-xxx）

    <div class="test" a="a" data-id="1"></div>
    <script>
        $('div').attr('a');    // a
        $('div').attr('data-id');    // 1
    </script>
複製程式碼

而 jq 中對獲取 data 開頭的屬性有一個專門的方法 data()

    <div class="test" a="a" data-id="1"></div>    <script>
        $('div').data('id');    // 1
    </script>複製程式碼

那麼，既然 attr() 和 data() 在對於 data 開頭的自定屬性的時候沒什麼區別，不是可以隨便用嗎，其實不是這樣的，我們用下面這個例子來證明

<button class="btn1">點我改變div自定義屬性的值</button>  <button class="btn2">點我檢視div自定義屬性的值</button>  <div class="test"></div>  <script>    var num = 0;    $('.btn1').on('click', function(){      $('div').attr('data-id', ++num);    })    $('.btn2').on('click', function () {      alert($('div').data('id'));    })  </script>複製程式碼

點選一次 btn1 再點選 btn2，發現彈出來的是 1，再點選一次 btn1 再點選 btn2，發現彈出來的還是 1，後面再怎麼點選 btn2 彈出來都是 1，快取了？強刷頁面再來一次，這次我們連續點選兩次 btn1，再點選 btn2，發現彈出的是 2，驚不驚喜，好了？再點選一次 btn1，再點選btn2，彈出的還是 2，到這裡估計一些同學還是不相信又去重新整理了一次，不管你重新整理幾次都不會成功的，為什麼點選 btn2 彈出的結果不是我們想象中的 ++num，查下文件，data() 不傳任何引數會返回當前物件中儲存的所有資料，我們來試一下

$('.btn2').on('click', function () {      // alert($('div').data('id'));      console.log($('div').data());    })複製程式碼

控制檯列印出來的結果是個物件，物件裡面存的是 id 這個鍵和對應的值，不論這個元素上的自定義屬性的值怎麼變化，列印出來的結果都不會改變，通過 attr() 設定多個 data 開頭的自定義屬性，通過 data() 方法以物件的方式列印出來

回到上一步，我們點選一次 btn1 再點選 btn2，彈出 1，點選兩次 btn1 再點選 btn2，彈出 2，這樣我們就能得出結論：通過 attr() 設定元素自定義屬性的時候，屬性和值是存在 html 中的標籤上的，而呼叫 data() 方法的時候，會找到當前元素上的 data 開頭的屬性，並以鍵值對的方式存到物件中，而我們在使用 data() 方法的時候只傳入了一個引數或者沒有傳入引數，這樣就無法改變物件中的值，因此不論我們點選多少次的 btn1，再點選 btn2 彈出的都是相同的值

因此獲取 attr() 設定的屬性值就用 attr() 去取，用 data() 設定的值就用 data() 去取，不要混著用，今天小R就被坑了一把，如有錯誤的地方，請大家指出，不勝感激


相關文章