jQuery attr() prop() 區別

參考來源：
1. http://blog.webgolds.com/view/193
2. http://wenzhixin.net.cn/2013/05/24/jquery_attr_prop

1.attribute 跟 property的區別

- property是DOM中的屬性，『是JavaScript裡的對象』
- attribute是HTML標籤上的屬性，『它的值只能夠是字符串』


一個例子：
<input name="sex" value="男">  

那可以代表著：<input>這個標籤擁有2個屬性：
name="sex"
value="男"
屬性值為『"sex"』&『"男"』
上述兩者即為html標籤上的屬性

第二個例子：
<input type="checkbox" checked=true/>

現在我們透過jquery來測試以上這行，得到以下結果：

語法	回傳結果
$('input').prop('checked');	true
$('input').attr('checked');	"checked"

看到了不同點了嗎?
『布林值(DOM屬性)』比『字串值(Html標籤屬性)』。


第三個例子：
<input type="checkbox" />

現在我們透過jquery來測試以上這行，得到以下結果：

語法	回傳結果
$('input').prop('checked');	false
$('input').attr('checked');	undefined

例子中的
1.<input> 沒有設置 checked 屬性當然也就是輸出 undefined.
2.prop() 獲取的到是對於一 DOM 對象，本身即具有原生的 checked 屬性當然就是輸出 false.


2.效能：.prop() > .attr(),
因為attr()需要訪問 DOM 屬性節點，比較耗時。

3.結論：
當需要獲得/設置checked 、selected、readonly 、disabled 這些DOM屬性時使用 .prop()。 


具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具體見下表：