prop 和 attr 中的一些羞羞的事情

Hutchins發表於2019-02-24

引言

前幾天做一個迷你京東小專案的時候涉及到一個全選的小功能，一開始用的是 attr，但是效果完全不是自己想要的，當商品按鈕點選過一次後，attr就無法對其狀態進行更改，最後谷歌了一番發現需要用 prop 來代替。雖然效果問題解決了，但是自己還是想弄懂 prop 和 attr 的區別.

版本使用不同

遇到問題我一般先會去查相關的官方文件，可在 jq 的 api 中文文件中沒有發現有價值的東西，只是發現適用的版本和概念有所輕微的不同。

attr : 設定或返回被選元素的屬性值.版本：1.0

prop : 獲取在匹配的元素集中的第一個元素的屬性值。版本：1.6+

從概念中發現操作的物件和使用也好像基本相同，然後帶著疑惑去進行了一番實驗並去查閱了一些相關資料

示例程式碼

<table>
        <thead>
            <tr><input type="checkbox" class="checkAll">全選</tr>
        </thead>
        <tbody>
            <tr><input class="item" type="checkbox">單選</tr>
            <tr><input class="item" type="checkbox">單選</tr>
            <tr><input class="item" type="checkbox">單選</tr>
            <tr><input class="item" type="checkbox">單選</tr>
            <tr><input class="item" type="checkbox">單選</tr>
            <tr><input class="item" type="checkbox">單選</tr>
        </tbody>
    </table>
複製程式碼
$(`.checkAll`).click(function() {
  $(`.item`).attr(`checked`, this.checked);
});
複製程式碼

問題描述

當全選按鈕選中時單選按鈕全部選中，當全選按鈕不選中時單選按鈕全部不選中，只點全選按鈕時，反覆幾次都沒問題，但是要是點選了其中一個單選按鈕，那這個單選按鈕就不會在像其它單選按鈕一樣跟隨全選按鈕的狀態的改變而改變。

attr 和 prop 的本質

attr 是 attribute 的縮寫,prop 是 property 的縮寫，都有屬性的意思，只不過 attr 是操作 html 文件節點屬性，prop 是操作 js 物件屬性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=key。

attr 和 prop 的區別

attr 設定的屬性值只能是字串型別,如果不是字串型別，也會呼叫其 toString() 方法，將其轉換成字串型別。

prop 設定的屬性值可以包括陣列和物件在內的任意型別

有關布林值的屬性

1.6 之後, attr 返回的也是字串型別, 選中或禁用直接返回 checked,selected,disabled。否則返回undefined。解決我問題的關鍵就是下面一句話

jQuery 認為：attribute 的 checked、selected、disabled 就是表示該屬性初始狀態的值，property 的 checked、selected、disabled 才表示該屬性實時狀態的值(值為 true 或 false)。

當涉及到 boolean 值時，比如 checkbox 這樣的，有 true 和 false 這樣的布林值的元素屬性，attributes 在頁面載入的時候就被設定，並且一直保持初始值，而 properties 則儲存著元素屬性的當前值。

所以當我沒有點選單選按鈕的時候，它就是沒被使用者點選過的瀏覽器剛載入出來的初始狀態，此時可以通過 attr 去設定並操控，當有使用者點選的時候，當前按鈕就不是初始狀態，attr自然也就無法操控。

相關文章