作爲數聚傳媒的一名前端開發人員,會經常使用到jQuery,但是,在使用jQuery中的函數開發效果的時候,總會出現一些細微的小問題,今天我們就來談談,jQuery中一些相似卻不同的函數的使用方法。以下將會通過attr()和prop()爲例,進行詳細解析。
很明顯,"attr"和"prop"分別是單詞"attribute"和"property"的縮寫,並且它們均表示"屬性"的意思。attr()函數和prop()函數都用於設置或獲取指定的屬性,它們的參數和用法也幾乎完全相同。但不得不說的是,在jQuery中,"attribute"和"property"卻是兩個不同的概念。attribute表示HTML文檔節點的屬性,property表示JS對象的屬性。比較如下:
1、應用版本不同
attr()是jQuery 1.0版本就有的函數,prop()是jQuery 1.6版本新增的函數。毫無疑問,在1.6之前,你只能使用attr()函數;1.6及以後版本,你可以根據實際需要選擇對應的函數。
在jQuery 1.6之前, attr()函數不僅承擔了attribute的設置和獲取工作,還同時承擔了property的設置和獲取工作。例如:在jQuery 1.6之前,attr()也可以設置或獲取TagName、ClassName、NodeName、NodeType等DOM元素的property。
直到jQuery 1.6新增prop()函數,並用來承擔property的設置或獲取工作之後,attr()才只用來負責attribute的設置和獲取工作。
2、操作對象不同
在jQuery的底層實現中,函數attr()和prop()的功能都是通過JS原生的Element對象實現的。
attr( )函數主要依賴的是Element對象的getAttribute()和setAttribute()兩個方法。
prop()函數主要依賴的則是JS中原生的對象屬性獲取和設置方式。
jQuery對這些操作方式進行了封裝,使我們操作起來更加方便(比如:以對象形式同時設置多個屬性),並且實現了跨瀏覽器兼容。
在jQuery中,prop()函數的設計目標是用於設置或獲取指定DOM元素(指的是JS對象,Element類型)上的屬性(property);attr()函數的設計目標是用於設置或獲取指定DOM元素所對應的文檔節點上的屬性(attribute)。
例如:
<!-- 這裏的id、class、data_id均是該元素文檔節點的attribute -->
<div id="message" data_id="123"></div>
<script type="text/javascript">
// 這裏的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>
此外,需要注意的是,雖然prop()針對的是DOM元素的property,而不是元素節點的attribute,但是DOM元素某些屬性的更改也會影響到元素節點上對應的屬性。例如,property的id對應attribute的“id”,property的className對應attribute的“class”。
3、用於設置的屬性值類型不同
由於attr()函數操作的是文檔節點的屬性,因此設置的屬性值只能是String型(字符串類型),如果不是字符串類型,也會調用其toString()方法,將其轉爲字符串類型。
prop()函數操作的是JS對象的屬性,因此設置的屬性值可以爲包括數組和對象在內的任意類型。
4、其他細節問題
對於表單元素的"checked"、"selected"、"disabled"等屬性,在jQuery 1.6之前,attr()獲取這些屬性的返回值爲Boolean類型:如果被選中(或禁用)就返回true,否則返回false。
但是從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()函數。
以上,就是對attr和prop進行的簡單對比。
其實,不管是JavaScript 、Jquery還是其他技術,都存在像這樣的小問題,只有通過項目實戰,不斷的進行對比、總結,這樣才能不斷的提高。
數聚傳媒力求高質量高效率完成工作,而作爲數聚傳媒的一名前端開發人員,更需要不斷提升自身技能,以便高效快速的完成項目,達到公司要求。