prop 和 attr 中一些羞羞的事情

引言

前幾天作一個迷你京東小項目的時候涉及到一個全選的小功能，一開始用的是 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天然也就沒法操控。