jQuery 的 attr 與 prop 的區別

先提出問題：對於 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進行 讀取或設置值是有區別的。

在看 jQuery 文檔前，咱們先看看 attribute 與 property 是什麼：

先搞懂 attribute 與 property

當編寫 HTML 源碼時，你能在 HTML 元素裏定義 attributes。而後，一旦瀏覽器解析你的代碼，該 HTML 元素相應的 DOM 節點就會被建立。該節點是一個對象，所以它就擁有 properties。
所以，咱們知道：attributes 是 HTML 元素（標籤）的屬性，而 properties 是 DOM 對象的屬性。

例如，下面這個 HTML 元素：

<input type="text" value="Name:">

擁有兩個 attributes。

一旦瀏覽器解析該代碼，HTMLInputElement 對象就會被建立，而且該對象會擁有不少 peoperties，如：accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、ChildNodes、children、classList、className、clientHeight 等等。

對於某個 DOM 節點對象，properties 是該對象的全部屬性，而 attributes 是該對象對應元素(標籤)的屬性。

當一個 DOM 節點爲某個 HTML 元素所建立時，其大多數 properties 與對應 attributes 擁有相同或相近的名字，但這並非一對一的關係。例如，下面這個 HTML 元素：

<input id="the-input" type="text" value="Name:">

其對應 DOM 節點會擁有以下properties： id、type 和 value：

• id property是 id attribute 的映射：獲取該 property 即等於讀取其對應的 attribute 值，而設置該 property 即爲 attribute 賦值。id 是一個純粹的映射 property，它不會修改或限制其值。

• type property 是 type attribute 的映射：獲取該 property 即等於讀取其對應的 attribute 值，而設置該 property 即爲 attribute 賦值。但 type 並非一個純粹的映射 property，由於它的值被限制在已知值（即 input 的合法類型，如：text、password）。若是你有 <input type="foo">，而後 theInput.getAttribute("type") 會返回 "foo"，而 theInput.type 會返回 "text"。

• 相比之下，value property 並不會映射 value attribute。取而代之的是 input 的當前值。當用戶手動更改輸入框的值，value property 會反映該改變。因此，若是用戶在 input 輸入 John，而後：

  theInput.value // 返回 "John"
  然而：
  theInput.getAttribute('value') // 返回 "Name:"

value property 反映了 input 的當前文本內容，而 value attribute 則是在 HTML 源碼 value 屬性所指定的初始文本內容。

所以，若是你想知道文本框的當前值，則讀取 property。而若是你想知道文本框的初始值，則讀取 attribute。或者你也能夠利用 defaultValue property，它是 value attribute 的純粹映射。

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

有幾個 properties 是直接反映它們 attribute（rel、id），而有一些則用稍微不一樣的名字進行直接映射（htmlFor 映射 for attribute，className 映射 class attribute）。不少 property 所映射的 attribute 是帶有限制/變更的（src、href、disabled、multiple）。該 規範 涵蓋了各類各樣的映射。

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

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

自 jQuery 1.6 版本起，attr() 方法對於未設置的 attributes （即標籤中沒寫該 attributes）都會返回 undefined。對於檢索和改變 DOM 的 properties，如表單元素的 checked、selected 或 disabled 狀態，應使用 .prop() 方法。

Attributes vs. Properties

attributes 與 properties 之間的差別在特定狀況下會變得尤其重要。在 jQuery 1.6 前，.attr() 方法在檢索一些 attributes 時，有時會把 property 考慮進去，這會致使不一致的行爲。在 jQuery 1.6 版本以後，.prop() 方法提供了一種明確檢索 property 值的方式，而 .attr 只會檢索 attributes。

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected 能被 .prop() 檢索與設置。在 jQuery 1.6 以前，這些 properties 都是經過 .attr() 檢索的，但檢索這些屬性並不該屬於 attr 方法職責內 。這些屬性並無對應的 attributes，只有 properties 自己。

對於值爲布爾值的 attributes ，考慮到一個 DOM 元素是經過 HTML 標籤 <input type="checkbox" checked="checked /> 定義的，而且假定它在 JavaScript 的變量名爲 elem：

讀取屬性	返回值	描述
elem.checked	true (Boolean)	會隨着 checkbox 狀態做出相應改變
$(elem).prop("checked")	true (Boolean)	會隨着 checkbox 狀態做出相應改變
elem.getAttribute("checked")	"checked" (String)	checkbox 的初始狀態；而且不會隨着 checkbox 的狀態而改變。
$(elem).attr("checked") (1.6)	"checked" (String)	checkbox 的初始狀態；而且不會隨着 checkbox 的狀態而改變。
$(elem).attr("checked") (1.6.1+)	"checked" (String)	會隨着 checkbox 狀態而做出相應改變（與jQuery文檔描述不同，我用jQuery 1.12.1 測試，都是返回 「checked」，並不會隨着checkbox的改變而改變）。
$(elem).attr("checked") (1.6以前版本)	true (Boolean)	true (Boolean) 會隨着 checkbox 狀態做出相應改變。

根據 W3C forms（表單） 規範，checked 是一個值爲 boolean 的 attribute，這意味着當該 attribute 存在（不管值是什麼），其對應的 property 都是 true。例如，該 attribute 沒賦值或設爲空字符串，甚至設爲 "false"。這一樣適用於全部值爲 boolean 的 attributes。

然而，對於 checked attribute 最重要的概念是記住它並非對應 checked property。該 attribute 其實是對應 defaultChecked property，並僅在初次設置 checkbox 值時使用。checked attribute 的值並不會隨着 checkbox 的狀態而做出相應改變，而 checked property 會。所以，爲了兼容不一樣瀏覽器，當判斷一個 checkbox 是否被選擇時應該使用 property：

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

這一樣適用於其它動態 attributes，如 selected 和 value。

其餘說明：
在 IE9 以前的版本，若是使用 .prop() 爲 DOM 元素的 property 設置的值不是一個簡單的原始值（number、string 或 boolean），且該 property 在 DOM 元素從 document 移除前未被移除（使用 .removeProp()），則會致使內存泄漏。爲 DOM 對象設置值的安全作法（避免內存泄漏）是使用 .data()。

參考（翻譯）：
jQuery API Documentation：http://api.jquery.com/prop/
Properties and Attributrs in HTML：http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html

---

Github 地址: jQuery 的 attr 與 prop 的區別