jQuery獲取attr()與prop()屬性值的方法及區別介紹

對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。

•對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。

上面的描述也許有點模糊，舉幾個例子就知道了。 

?

1	<a href= "http://www.baidu.com" target= "_self" class= "btn" >百度</a>

這個例子裏<a>元素的DOM屬性有「href、target和class"，這些屬性就是<a>元素自己就帶有的屬性，也是W3C標準裏就包含有這幾個屬性，或者說在IDE裏可以智能提示出的屬性，這些就叫作固有屬性。處理這些屬性時，建議使用prop方法。

?

1	<a href= "#" id= "link1" action= "delete" >刪除</a>

這個例子裏<a>元素的DOM屬性有「href、id和action」，很明顯，前兩個是固有屬性，然後面一個「action」屬性是咱們本身自定義上去的，<a>元素自己是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設置屬性值時，都會返回undefined值。

再舉一個例子：

?

1	<input id= "chk1" type= "checkbox" />是否可見<input id= "chk2" type= "checkbox" checked= "checked" />是否可見

像checkbox，radio和select這樣的元素，選中屬性對應「checked」和「selected」，這些也屬於固有屬性，所以須要使用prop方法去操做才能得到正確的結果。

?

1 2	$( "#chk1" ).prop( "checked" ) == false $( "#chk2" ).prop( "checked" ) == true

若是上面使用attr方法，則會出現：

?

1 2	$( "#chk1" ).attr( "checked" ) == undefined $( "#chk2" ).attr( "checked" ) == "checked"