jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
更新時(shí)間:2013年11月15日 17:24:37 作者:
prop和attr的區(qū)別你知道嗎?在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹,感興趣的朋友不要錯(cuò)過(guò)
1、.prop( propertyName )
獲取匹配集合中第一個(gè)元素的Property的值
2、
.prop( propertyName, value )
.prop( map )
.prop( propertyName, function(index, oldPropertyValue) )
給匹配元素集合設(shè)定一個(gè)或多個(gè)屬性
.prop()和 .attr()區(qū)別
下面是關(guān)于jQuery1.6和1.6.1中Attributes模塊變化的描述,以及.attr()方法和.prop()方法的首選使用
Attributes模塊的變化是移除了attributes和properties之間模棱兩可的東西,但是在jQuery社區(qū)中引起了一些混亂,因?yàn)樵?.6之前的所有版本中都使用一個(gè)方法(.attr())來(lái)處理attributes和properties。但是老的.attr()方法有一些bug,很難維護(hù)。jQuery1.6.1對(duì)Attributes模塊進(jìn)行了更新,并且修復(fù)了幾個(gè)bug。
elem.checked true (Boolean) Will change with checkbox state
$(elem).prop("checked") true (Boolean) Will change with checkbox state
elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6) "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+) "checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6) true (Boolean) Changed with checkbox state
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
這三個(gè)都是返回Boolean值。
為了讓jQuery1.6中的.attr()方法的變化被理解的清楚些,下面是一些使用.attr()的例子,雖然在jQuery之前的版本中能正常工作,但是現(xiàn)在必須使用.prop()方法代替:
首先,window或document中使用.attr()方法在jQuery1.6中不能正常運(yùn)行,因?yàn)閣indow和document中不能有attributes。它們包含properties(比如:location或readyState),必須使用.prop()方法操作或簡(jiǎn)單地使用javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()將被自動(dòng)轉(zhuǎn)成使用.prop,而不是拋出一個(gè)錯(cuò)誤。
其次,checked,selected和前面提到的其它boolean attributes,因?yàn)檫@些attributes和其相應(yīng)的properties之間的特殊關(guān)系而被特殊對(duì)待?;旧希粋€(gè)attribute就是以下html中你看到的:
<input type=”checkbox” checked=”checked”>
boolean attributes,比如:checked,僅被設(shè)置成默認(rèn)值或初始值。在一個(gè)checkbox的元素中,checked attributes在頁(yè)面加載的時(shí)候就被設(shè)置,而不管checkbox元素是否被選中。
properties就是瀏覽器用來(lái)記錄當(dāng)前值的東西。正常情況下,properties反映它們相應(yīng)的attributes(如果存在的話)。但這并不是boolean attriubutes的情況。當(dāng)用戶點(diǎn)擊一個(gè)checkbox元素或選中一個(gè)select元素的一個(gè)option時(shí),boolean properties保持最新。但相應(yīng)的boolean attributes是不一樣的,正如上面所述,它們僅被瀏覽器用來(lái)保存初始值。
$(“:checkbox”).get(0).checked = true;
// Is the same as $(":checkbox:first").prop(“checked”, true);
在jQuery1.6中,如果使用下面的方法設(shè)置checked:
$(“:checkbox”).attr(“checked”, true);
將不會(huì)檢查checkbox元素,因?yàn)樗切枰辉O(shè)置的property,但是你所有的設(shè)置都是初始值。
然而,曾經(jīng)jQuery1.6被釋放出來(lái)的時(shí)候,jQuery團(tuán)隊(duì)明白當(dāng)瀏覽器僅關(guān)心頁(yè)面加載時(shí),設(shè)置一些值不是特別的有用。所以,為了保持向后兼容性和.attr()方法的有用性,我們可以繼續(xù)在jQuery1.6.1中使用.attr()方法取得和設(shè)置這些boolean attributes。
最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()動(dòng)態(tài)地取得和設(shè)置boolean attributes/properties的完整列表:
autofocus, autoplay, async, checked, controls, defer, disabled,
hidden, loop, multiple, open, readonly, required, scoped, selected
還是建議使用.prop()方法來(lái)設(shè)置這些boolean attributes/properties,即使這些用例沒(méi)有轉(zhuǎn)換成使用.prop()方法,但是你的代碼仍然可以在jQuery1.6.1中正常運(yùn)行。
下面是一些attributes和properties的列表,正常情況下,應(yīng)該使用其對(duì)應(yīng)的方法(見(jiàn)下面的列表)來(lái)取得和設(shè)置它們。下面的是首用法,但是.attr()方法可以運(yùn)行在所有的attributes情況下。
注意:一些DOM元素的properties也被列在下面,但是僅運(yùn)行在新的.prop()方法中
*例如: window.location
**如果需要在(if needed over) .width()
.attr()和.prop()都不應(yīng)該被用來(lái)取值/設(shè)值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以繼續(xù)運(yùn)行,就像1.6之前做的那樣)
3、首選用法的概述
.prop()方法應(yīng)該被用來(lái)處理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且應(yīng)該繼續(xù)使用.attr()方法來(lái)進(jìn)行操作。
上面的概述已經(jīng)描述的夠清楚了,我也沒(méi)有必要再總結(jié)了。
參考文獻(xiàn):
http://hxq0506.iteye.com/blog/1046334
獲取匹配集合中第一個(gè)元素的Property的值
2、
.prop( propertyName, value )
.prop( map )
.prop( propertyName, function(index, oldPropertyValue) )
給匹配元素集合設(shè)定一個(gè)或多個(gè)屬性
.prop()和 .attr()區(qū)別
下面是關(guān)于jQuery1.6和1.6.1中Attributes模塊變化的描述,以及.attr()方法和.prop()方法的首選使用
Attributes模塊的變化是移除了attributes和properties之間模棱兩可的東西,但是在jQuery社區(qū)中引起了一些混亂,因?yàn)樵?.6之前的所有版本中都使用一個(gè)方法(.attr())來(lái)處理attributes和properties。但是老的.attr()方法有一些bug,很難維護(hù)。jQuery1.6.1對(duì)Attributes模塊進(jìn)行了更新,并且修復(fù)了幾個(gè)bug。
elem.checked true (Boolean) Will change with checkbox state
$(elem).prop("checked") true (Boolean) Will change with checkbox state
elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6) "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+) "checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6) true (Boolean) Changed with checkbox state
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
這三個(gè)都是返回Boolean值。
為了讓jQuery1.6中的.attr()方法的變化被理解的清楚些,下面是一些使用.attr()的例子,雖然在jQuery之前的版本中能正常工作,但是現(xiàn)在必須使用.prop()方法代替:

首先,window或document中使用.attr()方法在jQuery1.6中不能正常運(yùn)行,因?yàn)閣indow和document中不能有attributes。它們包含properties(比如:location或readyState),必須使用.prop()方法操作或簡(jiǎn)單地使用javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()將被自動(dòng)轉(zhuǎn)成使用.prop,而不是拋出一個(gè)錯(cuò)誤。
其次,checked,selected和前面提到的其它boolean attributes,因?yàn)檫@些attributes和其相應(yīng)的properties之間的特殊關(guān)系而被特殊對(duì)待?;旧希粋€(gè)attribute就是以下html中你看到的:
<input type=”checkbox” checked=”checked”>
boolean attributes,比如:checked,僅被設(shè)置成默認(rèn)值或初始值。在一個(gè)checkbox的元素中,checked attributes在頁(yè)面加載的時(shí)候就被設(shè)置,而不管checkbox元素是否被選中。
properties就是瀏覽器用來(lái)記錄當(dāng)前值的東西。正常情況下,properties反映它們相應(yīng)的attributes(如果存在的話)。但這并不是boolean attriubutes的情況。當(dāng)用戶點(diǎn)擊一個(gè)checkbox元素或選中一個(gè)select元素的一個(gè)option時(shí),boolean properties保持最新。但相應(yīng)的boolean attributes是不一樣的,正如上面所述,它們僅被瀏覽器用來(lái)保存初始值。
$(“:checkbox”).get(0).checked = true;
// Is the same as $(":checkbox:first").prop(“checked”, true);
在jQuery1.6中,如果使用下面的方法設(shè)置checked:
$(“:checkbox”).attr(“checked”, true);
將不會(huì)檢查checkbox元素,因?yàn)樗切枰辉O(shè)置的property,但是你所有的設(shè)置都是初始值。
然而,曾經(jīng)jQuery1.6被釋放出來(lái)的時(shí)候,jQuery團(tuán)隊(duì)明白當(dāng)瀏覽器僅關(guān)心頁(yè)面加載時(shí),設(shè)置一些值不是特別的有用。所以,為了保持向后兼容性和.attr()方法的有用性,我們可以繼續(xù)在jQuery1.6.1中使用.attr()方法取得和設(shè)置這些boolean attributes。
最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()動(dòng)態(tài)地取得和設(shè)置boolean attributes/properties的完整列表:
autofocus, autoplay, async, checked, controls, defer, disabled,
hidden, loop, multiple, open, readonly, required, scoped, selected
還是建議使用.prop()方法來(lái)設(shè)置這些boolean attributes/properties,即使這些用例沒(méi)有轉(zhuǎn)換成使用.prop()方法,但是你的代碼仍然可以在jQuery1.6.1中正常運(yùn)行。
下面是一些attributes和properties的列表,正常情況下,應(yīng)該使用其對(duì)應(yīng)的方法(見(jiàn)下面的列表)來(lái)取得和設(shè)置它們。下面的是首用法,但是.attr()方法可以運(yùn)行在所有的attributes情況下。
注意:一些DOM元素的properties也被列在下面,但是僅運(yùn)行在新的.prop()方法中

*例如: window.location
**如果需要在(if needed over) .width()
.attr()和.prop()都不應(yīng)該被用來(lái)取值/設(shè)值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以繼續(xù)運(yùn)行,就像1.6之前做的那樣)
3、首選用法的概述
.prop()方法應(yīng)該被用來(lái)處理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且應(yīng)該繼續(xù)使用.attr()方法來(lái)進(jìn)行操作。
上面的概述已經(jīng)描述的夠清楚了,我也沒(méi)有必要再總結(jié)了。
參考文獻(xiàn):
http://hxq0506.iteye.com/blog/1046334
您可能感興趣的文章:
- jquery獲取自定義屬性(attr和prop)實(shí)例介紹
- jquery中prop()方法和attr()方法的區(qū)別淺析
- js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法
- jquery下onpropertychange事件的綁定方法
- Jquery阻止事件冒泡 event.stopPropagation
- jQuery中prop()方法用法實(shí)例
- jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
- jQuery中attr()和prop()在修改checked屬性時(shí)的區(qū)別
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- 詳解jQuery中的prop()使用方法
相關(guān)文章
jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能,涉及jQuery基于事件響應(yīng)針對(duì)頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01jQuery實(shí)現(xiàn)簡(jiǎn)單的DIV拖動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的DIV拖動(dòng)效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-02-02JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成,通常位于頁(yè)眉或頁(yè)腳內(nèi)部。本文給大家介紹JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳的相關(guān)知識(shí),需要的朋友參考下吧2016-03-03jquery的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法
下面小編就為大家?guī)?lái)一篇jquery的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jQuery為iframe的body添加click事件的實(shí)現(xiàn)代碼
jQuery為iframe的body添加click事件的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼(移動(dòng)端)
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼,適合用于移動(dòng)端。需要的朋友可以參考下2017-05-05