jQuery.prop() 使用詳解
prop()函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的元素的屬性值。
該函數(shù)屬于jQuery對象(實(shí)例)。如果需要?jiǎng)h除DOM元素的屬性,請使用removeProp()函數(shù)。
語法
jQuery 1.6 新增該函數(shù)。prop()函數(shù)有以下兩種用法:
用法一:
jQueryObject.prop( propertyName [, value ] )
設(shè)置或返回指定屬性propertyName的值。如果指定了value參數(shù),則表示設(shè)置屬性propertyName的值為value;如果沒有指定value參數(shù),則表示返回屬性propertyName的值。
參數(shù)value還可以是函數(shù),prop()將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù),函數(shù)中的this指針將指向?qū)?yīng)的DOM元素。prop()還會(huì)為函數(shù)傳入兩個(gè)參數(shù):第一個(gè)參數(shù)就是該元素在匹配元素中的索引,第二個(gè)參數(shù)就是該元素propertyName屬性當(dāng)前的值。函數(shù)的返回值就是為該元素的propertyName屬性設(shè)置的值。
用法二:
jQueryObject.prop( object )
以對象形式同時(shí)設(shè)置任意多個(gè)屬性的值。對象object的每個(gè)屬性對應(yīng)propertyName,屬性的值對應(yīng)value。
注意:prop()函數(shù)的所有"設(shè)置屬性"操作針對的是當(dāng)前jQuery對象所匹配的每一個(gè)元素;所有"讀取屬性"的操作只針對第一個(gè)匹配的元素。
參數(shù)
請根據(jù)前面語法部分所定義的參數(shù)名稱查找對應(yīng)的參數(shù)。
參數(shù) 描述
propertyName String類型指定的屬性名稱。
value 可選/Object/Function類型指定的屬性值,或返回屬性值的函數(shù)。
object Object類型指定的對象,用于封裝多個(gè)鍵值對,同時(shí)設(shè)置多項(xiàng)屬性。
參數(shù)value可以是包括對象和數(shù)組在內(nèi)的任意類型。
返回值
prop()函數(shù)的返回值是任意類型,返回值的類型取決于當(dāng)前prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作還是"讀取屬性"操作。
如果prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作,則返回當(dāng)前jQuery對象本身;如果是"讀取屬性"操作,則返回讀取到的屬性值。
如果當(dāng)前jQuery對象匹配多個(gè)元素,返回屬性值時(shí),prop()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。如果該元素沒有指定的屬性,則返回undefined。
prop()和attr()的主要區(qū)別:prop()函數(shù)針對的是DOM元素(JS Element對象)的屬性,attr()函數(shù)針對的是DOM元素所對應(yīng)的文檔節(jié)點(diǎn)的屬性。詳情請查看jQuery函數(shù)attr()和prop()的區(qū)別。
注意事項(xiàng)
1、如果通過prop()函數(shù)更改<input>和<button>元素的type屬性,在多數(shù)瀏覽器上將會(huì)拋出一個(gè)錯(cuò)誤,因?yàn)樵搶傩砸话悴辉试S在后期更改。
2、如果使用prop()函數(shù)操作表單元素的checked、selected、disabled等屬性,如果該元素被選中(或禁用),則返回true,否則(意即HTML中沒有該屬性)返回false。
3、prop()函數(shù)還可以設(shè)置或返回DOM元素的Element對象上的某些屬性,例如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等屬性。
4、在IE9及更早版本中,如果使用prop()函數(shù)設(shè)置的屬性值不是一個(gè)簡單的原始值(String、Number、Boolean),并且在對應(yīng)的DOM元素被銷毀之前,該屬性沒有被移除,則可能會(huì)導(dǎo)致內(nèi)存泄漏問題。如果你只是為了存儲(chǔ)數(shù)據(jù),建議你使用data()函數(shù),以避免內(nèi)存泄漏問題。
示例&說明
以下面這段HTML代碼為例:
<p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
<input id="n3" name="order_id" type="checkbox" value="1">
<input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>
我們編寫如下jQuery代碼:
var $n2 = $("#n2"); // prop()操作針對的是元素(Element對象)的屬性,而不是元素節(jié)點(diǎn)(HTML文檔)的屬性 document.writeln( $n2.prop("data-key") ); // undefined document.writeln( $n2.prop("data_value") ); // undefined document.writeln( $n2.prop("id") ); // n2 document.writeln( $n2.prop("tagName") ); // P document.writeln( $n2.prop("className") ); // demo test document.writeln( $n2.prop("innerHTML") ); // CodePlayer document.writeln( typeof $n2.prop("getAttribute") ); // function // prop()設(shè)置的屬性也是針對元素(Element對象),因此也可以通過元素本身直接訪問 $n2.prop("prop_a", "CodePlayer"); document.writeln( $n2[0].prop_a ); // CodePlayer var n2 = document.getElementById("n2"); document.writeln( n2.prop_a ); // CodePlayer // 以對象形式同時(shí)設(shè)置多個(gè)屬性,屬性值可以是對象、數(shù)組等任意類型 $n2.prop( { prop_b: "baike", prop_c: 18, site: { name: "CodePlayer", url: "http://www.dbjr.com.cn/" } } ); document.writeln( $n2[0].prop_c ); // 18 document.writeln( $n2[0].site.url ); // http://www.dbjr.com.cn/ // 反選所有的復(fù)選框(沒選中的改為選中,選中的改為取消選中) $("input:checkbox").prop("checked", function(index, oldValue){ return !oldValue; });
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jquery validate.js表單驗(yàn)證入門實(shí)例(附源碼)
這篇文章主要介紹了jquery validate.js表單驗(yàn)證入門實(shí)例,為大家提供了jquery validate.js表單驗(yàn)證的源碼,特別適合初學(xué)者學(xué)習(xí)validate.js表單驗(yàn)證,感興趣的小伙伴們可以參考一下2015-11-11jQuery contains過濾器實(shí)現(xiàn)精確匹配使用方法
contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本,或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用,來選擇指定的組中包含指定文本的元素2013-04-04超級酷和最實(shí)用的jQuery實(shí)例收集(20個(gè))
二十個(gè)超級酷和最實(shí)用的jQuery實(shí)例,對于使用和學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考與學(xué)習(xí)資料。2010-04-04簡單實(shí)現(xiàn)jQuery手風(fēng)琴效果
這篇文章主要教大家如何簡單實(shí)現(xiàn)jQuery手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08jQuery zTree插件快速實(shí)現(xiàn)目錄樹
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件快速實(shí)現(xiàn)目錄樹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query遍歷table的tr獲取td的值實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果,涉及jquery操作頁面屬性的動(dòng)態(tài)添加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery滑動(dòng)效果實(shí)現(xiàn)方法分析
這篇文章主要介紹了jQuery滑動(dòng)效果實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)滑動(dòng)效果常用的slideDown()、slideUp()及slideToggle()方法相關(guān)使用技巧,需要的朋友可以參考下2018-09-09jquery與google map api結(jié)合使用 控件,監(jiān)聽器
關(guān)于jquery的獲取不再此處累贅,網(wǎng)上有許多關(guān)于jquery的介紹。2010-03-03