prop()函數(shù)用于設(shè)置或返回當(dāng)前jQuery對(duì)象所匹配的元素的屬性值。

該函數(shù)屬于jQuery對(duì)象(實(shí)例)。如果需要?jiǎng)h除DOM元素的屬性，請(qǐng)使用removeProp()函數(shù)。

語(yǔ)法

jQuery 1.6 新增該函數(shù)。prop()函數(shù)有以下兩種用法：

用法一：

jQueryObject.prop( propertyName [, value ] )

設(shè)置或返回指定屬性propertyName的值。如果指定了value參數(shù)，則表示設(shè)置屬性propertyName的值為value；如果沒(méi)有指定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 )

以對(duì)象形式同時(shí)設(shè)置任意多個(gè)屬性的值。對(duì)象object的每個(gè)屬性對(duì)應(yīng)propertyName，屬性的值對(duì)應(yīng)value。

注意：prop()函數(shù)的所有"設(shè)置屬性"操作針對(duì)的是當(dāng)前jQuery對(duì)象所匹配的每一個(gè)元素；所有"讀取屬性"的操作只針對(duì)第一個(gè)匹配的元素。
參數(shù)

請(qǐng)根據(jù)前面語(yǔ)法部分所定義的參數(shù)名稱(chēng)查找對(duì)應(yīng)的參數(shù)。

參數(shù) 描述
propertyName String類(lèi)型指定的屬性名稱(chēng)。
value 可選/Object/Function類(lèi)型指定的屬性值，或返回屬性值的函數(shù)。
object Object類(lèi)型指定的對(duì)象，用于封裝多個(gè)鍵值對(duì)，同時(shí)設(shè)置多項(xiàng)屬性。
參數(shù)value可以是包括對(duì)象和數(shù)組在內(nèi)的任意類(lèi)型。

返回值

prop()函數(shù)的返回值是任意類(lèi)型，返回值的類(lèi)型取決于當(dāng)前prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作還是"讀取屬性"操作。

如果prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作，則返回當(dāng)前jQuery對(duì)象本身；如果是"讀取屬性"操作，則返回讀取到的屬性值。

如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素，返回屬性值時(shí)，prop()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。如果該元素沒(méi)有指定的屬性，則返回undefined。

prop()和attr()的主要區(qū)別：prop()函數(shù)針對(duì)的是DOM元素(JS Element對(duì)象)的屬性，attr()函數(shù)針對(duì)的是DOM元素所對(duì)應(yīng)的文檔節(jié)點(diǎn)的屬性。詳情請(qǐng)查看jQuery函數(shù)attr()和prop()的區(qū)別。

注意事項(xiàng)

1、如果通過(guò)prop()函數(shù)更改<input>和<button>元素的type屬性，在多數(shù)瀏覽器上將會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)樵搶傩砸话悴辉试S在后期更改。

2、如果使用prop()函數(shù)操作表單元素的checked、selected、disabled等屬性，如果該元素被選中(或禁用)，則返回true，否則(意即HTML中沒(méi)有該屬性)返回false。

3、prop()函數(shù)還可以設(shè)置或返回DOM元素的Element對(duì)象上的某些屬性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等屬性。

4、在IE9及更早版本中，如果使用prop()函數(shù)設(shè)置的屬性值不是一個(gè)簡(jiǎn)單的原始值(String、Number、Boolean)，并且在對(duì)應(yīng)的DOM元素被銷(xiāo)毀之前，該屬性沒(méi)有被移除，則可能會(huì)導(dǎo)致內(nèi)存泄漏問(wèn)題。如果你只是為了存儲(chǔ)數(shù)據(jù)，建議你使用data()函數(shù)，以避免內(nèi)存泄漏問(wèn)題。

示例&說(shuō)明

以下面這段HTML代碼為例：

var $n2 = $("#n2");
// prop()操作針對(duì)的是元素(Element對(duì)象)的屬性，而不是元素節(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è)置的屬性也是針對(duì)元素(Element對(duì)象)，因此也可以通過(guò)元素本身直接訪問(wèn)
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以對(duì)象形式同時(shí)設(shè)置多個(gè)屬性，屬性值可以是對(duì)象、數(shù)組等任意類(lèi)型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://chabaoo.cn/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://chabaoo.cn/

// 反選所有的復(fù)選框(沒(méi)選中的改為選中，選中的改為取消選中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論