先提出問(wèn)題：對(duì)于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進(jìn)行 讀取或設(shè)置值是有區(qū)別的。

在看 jQuery 文檔前，我們先看看 attribute 與 property 是什么：

先搞懂 attribute 與 property

當(dāng)編寫 HTML 源碼時(shí)，你能在 HTML 元素里定義 attributes。然后，一旦瀏覽器解析你的代碼，該 HTML 元素相應(yīng)的 DOM 節(jié)點(diǎn)就會(huì)被創(chuàng)建。該節(jié)點(diǎn)是一個(gè)對(duì)象，因此它就擁有 properties。因此，我們知道：attributes 是 HTML 元素（標(biāo)簽）的屬性，而 properties 是 DOM 對(duì)象的屬性。

例如，下面這個(gè) HTML 元素：

擁有兩個(gè) attributes。

一旦瀏覽器解析該代碼，HTMLInputElement 對(duì)象就會(huì)被創(chuàng)建，并且該對(duì)象會(huì)擁有很多

peoperties，如：accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、ChildNodes、children、classList、className、clientHeight

等等。

對(duì)于某個(gè) DOM 節(jié)點(diǎn)對(duì)象，properties 是該對(duì)象的所有屬性，而 attributes 是該對(duì)象對(duì)應(yīng)元素(標(biāo)簽)的屬性。

當(dāng)一個(gè) DOM 節(jié)點(diǎn)為某個(gè) HTML 元素所創(chuàng)建時(shí)，其大多數(shù) properties 與對(duì)應(yīng) attributes 擁有相同或相近的名字，但這并不是一對(duì)一的關(guān)系。例如，下面這個(gè) HTML 元素

其對(duì)應(yīng) DM 節(jié)點(diǎn)會(huì)擁有如下properties： id、type 和 value：

idproperty是idattribute 的映射：獲取該 property 即等于讀取其對(duì)應(yīng)的 attribute 值，而設(shè)置該 property 即為 attribute 賦值。id是一個(gè)純粹的映射 property，它不會(huì)修改或限制其值。

typeproperty 是typeattribute 的映射：獲取該 property 即等于讀取其對(duì)應(yīng)的 attribute 值，而設(shè)置該 property 即為 attribute 賦值。但type并不是一個(gè)純粹的映射 property，因?yàn)樗闹当幌拗圃谝阎担?input 的合法類型，如：text、password）。如果你有，然后theInput.getAttribute("type")會(huì)返回"foo"，而theInput.type會(huì)返回"text"。

相比之下，valueproperty 并不會(huì)映射valueattribute。取而代之的是 input 的當(dāng)前值。當(dāng)用戶手動(dòng)更改輸入框的值，valueproperty 會(huì)反映該改變。所以，如果用戶在 input 輸入John，然后：

theInput.value // 返回 "John"

然而：

theInput.getAttribute('value') // 返回 "Name:"

valueproperty 反映了 input 的當(dāng)前文本內(nèi)容，而valueattribute 則是在 HTML 源碼 value 屬性所指定的初始文本內(nèi)容。

因此，如果你想知道文本框的當(dāng)前值，則讀取 property。而如果你想知道文本框的初始值，則讀取 attribute?；蛘吣阋部梢岳?defaultValue property，它是 value attribute 的純粹映射。

theInput.value// returns "John"theInput.getAttribute('value')// returns "Name:"theInput.defaultValue// returns "Name:"

有幾個(gè) properties 是直接反映它們 attribute（rel、id），而有一些則用稍微不同的名字進(jìn)行直接映射（htmlFor映射forattribute，className映射classattribute）。很多 property 所映射的 attribute 是帶有限制/變動(dòng)的（src、href、disabled、multiple）。該規(guī)范涵蓋了各種各樣的映射。

再看看 attr() 與 prop() 的區(qū)別

上述能讓我們理清了 attribute 與 property 之間的區(qū)別，下面根據(jù)jQuery 文檔對(duì) attr() 與 prop() 方法進(jìn)行比較：

自 jQuery 1.6 版本起，attr()方法對(duì)于未設(shè)置的 attributes （即標(biāo)簽中沒寫該 attributes）都會(huì)返回undefined。對(duì)于檢索和改變 DOM 的 properties，如表單元素的 checked、selected 或 disabled 狀態(tài)，應(yīng)使用.prop()方法。

Attributes vs. Properties

attributes 與 properties 之間的差異在特定情況下會(huì)變得尤為重要。在 jQuery 1.6 前，.attr()方法在檢索一些 attributes 時(shí)，有時(shí)會(huì)把 property 考慮進(jìn)去，這會(huì)導(dǎo)致不一致的行為。在 jQuery 1.6 版本之后，.prop()方法提供了一種明確檢索 property 值的方式，而.attr只會(huì)檢索 attributes。

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected 能被.prop()檢索與設(shè)置。在 jQuery 1.6 之前，這些 properties 都是通過(guò).attr()檢索的，但檢索這些屬性并不應(yīng)屬于 attr 方法職責(zé)內(nèi) 。這些屬性并沒有對(duì)應(yīng)的 attributes，只有 properties 本身。

對(duì)于值為布爾值的 attributes ，考慮到一個(gè) DOM 元素是通過(guò) HTML 標(biāo)簽

讀取屬性返回值描述

elem.checkedtrue (Boolean)會(huì)隨著 checkbox 狀態(tài)作出相應(yīng)改變

$(elem).prop("checked")true (Boolean)會(huì)隨著 checkbox 狀態(tài)作出相應(yīng)改變

elem.getAttribute("checked")"checked" (String)checkbox 的初始狀態(tài)；并且不會(huì)隨著 checkbox 的狀態(tài)而改變。

$(elem).attr("checked") (1.6)"checked" (String)checkbox 的初始狀態(tài)；并且不會(huì)隨著 checkbox 的狀態(tài)而改變。

$(elem).attr("checked") (1.6.1+)"checked" (String)會(huì)隨著 checkbox 狀態(tài)而作出相應(yīng)改變（與jQuery文檔描述不一樣，我用jQuery 1.12.1 測(cè)試，都是返回 “checked”，并不會(huì)隨著checkbox的改變而改變）。

$(elem).attr("checked") (1.6之前版本)true (Boolean)true (Boolean) 會(huì)隨著 checkbox 狀態(tài)作出相應(yīng)改變。

根據(jù) W3C forms（表單） 規(guī)范，checked是一個(gè)值為 boolean 的 attribute，這意味著當(dāng)該 attribute 存在（無(wú)論值是什么），其對(duì)應(yīng)的 property 都是 true。例如，該 attribute 沒賦值或設(shè)為空字符串，甚至設(shè)為"false"。這同樣適用于所有值為 boolean 的 attributes。

然而，對(duì)于checkedattribute 最重要的概念是記住它并不是對(duì)應(yīng)checkedproperty。該 attribute 實(shí)際上是對(duì)應(yīng)defaultCheckedproperty，并僅在初次設(shè)置 checkbox 值時(shí)使用。checkedattribute 的值并不會(huì)隨著 checkbox 的狀態(tài)而作出相應(yīng)改變，而checkedproperty 會(huì)。因此，為了兼容不同瀏覽器，當(dāng)判斷一個(gè) checkbox 是否被選擇時(shí)應(yīng)該使用property：

if(elem.checked)if($(elem).prop("checked"))if($(elem).is(":checked"))

這同樣適用于其它動(dòng)態(tài) attributes，如 selected 和 value。

其他說(shuō)明：

在 IE9 之前的版本，如果使用.prop()為 DOM 元素的 property 設(shè)置的值不是一個(gè)簡(jiǎn)單的原始值（number、string 或 boolean），且該 property 在 DOM 元素從 document 移除前未被移除（使用 .removeProp()），則會(huì)導(dǎo)致內(nèi)存泄漏。為 DOM 對(duì)象設(shè)置值的安全做法（避免內(nèi)存泄漏）是使用.data()。