jQuery中attr()與prop()區別介紹

  

.attr() : 獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性。 •.attr( attributeName ) •.attr( attributeName )

•.attr( attributeName, value ) •.attr( attributeName, value )

•.attr( attributes )

•.attr( attributeName, function(index, attr) )


.prop() : 獲取匹配的元素集中第一個元素的屬性(property)值或設置每一個匹配元素的一個或多個屬性。 •.prop( propertyName ) •.prop( propertyName )

•.prop( propertyName, value ) •.prop( propertyName, value )

•.prop( properties )

•.prop( propertyName, function(index, oldPropertyValue) )

是參數有區別,attr()傳入的是attributeName,而prop()傳入的是propertyName,

Attributes vs. Properties

在這裏,我們可以將attribute理解爲“特性”,property理解爲爲“屬性”從而來區分倆者的差異。

如果把DOM元素看成是一個普通的Object對象,這個對象在其定義時就具有一些屬性(property),比如把select的option當做一個對象:

var option = {

selected:false,

disabled:false,

attributes:[],

...

}

現在,我們一目瞭然了,attribute是一個特性節點,每個DOM元素都有一個對應的attributes屬性來存放所有的attribute節點,它是一個類數組的容器。attributes的每個數字索引以名值對(name=”value”)的形式存放了一個attribute節點。而property就是一個屬性,是一個以名值對(name=”value”)的形式存放在Object中的屬性。

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方法。

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

這個例子裏<a>元素的DOM屬性有“href、id和action”,很明顯,前兩個是固有屬性,而後面一個“action”屬性是我們自己自定義上去的,<a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時,建議使用attr方法。

 

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章