在jQuery中，attr()函數和prop()函數都用於設置或獲取指定的屬性，它們的參數和用法也幾乎完全相同。但是，這兩個函數的用處卻並不相同。下面我們來詳細介紹這兩個函數之間的區別。

1、操作對象不同

attr是單詞attribute的縮寫，prop是property的縮寫，它們的都表示”屬性”的意思。不過，在Jquery裏面attribute和property是兩個不同的概念。attribute表示HTML文檔節點的屬性，property表示JS對象的屬性。
我們來看個例子區分一下什麽是HTML文檔節點的屬性和JS對象的屬性：

2、應用版本不同

attr()是JQuery 1.0版本就有的函數，prop()是JQuery 1.6版本新增加的函數。也就是說，在JQuery 1.6版本之前，只能使用attr()函數。在JQuery 1.6版本後，可以根據不同的需求來選擇使用的函數。

在JQuery 1.6版本之前，attr()函數不僅要對attribute進行設置和獲取，還要對property進行設置和獲取。在1.6版本之前，attr()可以設置和獲取tagName、className、nodeName、nodeType等DOM元素的property。後來1.6版本之後出現了prop函數，可以通過它來對property進行獲取和設置，attr()函數才只用來對attribute的進行設置和獲取。
但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型，如果被選中(或禁用)就返回checked、selected或disabled，否則(即元素節點沒有該屬性)返回undefined。並且，在某些版本中，這些屬性值表示文檔加載時的初始狀態值，即使之後更改了這些元素的選中(或禁用)狀態，對應的屬性值也不會發生改變。

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

因此，在jQuery 1.6及以後版本中，請使用prop()函數來設置或獲取checked、selected、disabled等屬性。對於其它能夠用prop()實現的操作，也盡量使用prop()函數。

3、設置屬性值的類型不同

由於attr()函數操作的是文檔節點的屬性，因此設置的屬性值只能是字符串類型，如果不是字符串類型，也會調用其toString()方法，將其轉為字符串類型。
prop()函數操作的是JS對象的屬性，因此設置的屬性值可以為包括數組和對象在內的任意類型。

總結：
對於HTML元素本身就帶有的固有屬性，例如：id、name等屬性，使用prop()函數。
對於HTML元素自定義的DOM屬性，使用attr()函數。
返回值是true/false的屬性，建議使用prop()
下面我們舉例子解釋一下：
"div1" class="class1">

在例子中
元素的DOM屬性有”id、class”，這些屬性就是
屬性自帶的屬性，我們可以去參考W3C標準裏包含的一些屬性，這些屬性就是固有屬性。處理這些屬性的時候我們就用prop()函數。
"div1" class="class1" data_id="1">

這裏的例子，固有屬性是”id、class”,然後又自定義了一個”data_id”的屬性，
元素本身就沒有這個屬性的，這種就是自定義的DOM屬性。處理這種屬性時，就用attr()函數。如果使用了prop()函數去獲取或設置值時，會返回undefinded。

我們再來看一個屬性值返回true和false的例子：
"chk1" type="checkbox" />
"chk2" type="checkbox" checked="checked" />

checkbox、radio和select這三個元素，選中的屬性對應的是”checked、checked和selected”，這些也是固有屬性，因此我們盡量用prop()函數去處理。在1.6版本後，attr()獲取的值返回的都是字符串，因此用attr()去獲取返回值是true/false的屬性，返回值是undefinded。

使用prop()函數返回的結果:
console.log($("#chk1").prop("checked")); // false
console.log($("#chk2").prop("checked")); // true

使用attr()函數返回的結果：

console.log($("#chk1").attr("checked")); // undefined
console.log($("#chk2").attr("checked")); // checked

上海尚學堂java原作，歡迎閱讀上海尚學堂更多java技術相關文章，轉載請說明出處。獲取更多資料或支持請加薇 java8733

Jquery中attr()與prop()的區別