在jQuery中，attr()函數和prop()函數都用於設置或獲取指定的屬性，它們的參數和用法也幾乎完全相同。但是，這兩個函數的用處卻並不相同。下麵我們來詳細介紹這兩個函數之間的區別。 1、操作對象不同 attr是單詞attribute的縮寫，prop是property的縮寫，它們的都表示”屬性” ...
在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
