弁言

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