首頁 > web前端 > js教程 > jQuery.prop() 使用詳解_jquery

jQuery.prop() 使用詳解_jquery

WBOY
發布: 2016-05-16 15:49:36
原創
1446 人瀏覽過

prop()函數用於設定或傳回目前jQuery物件所匹配的元素的屬性值。

函數屬於jQuery物件(實例)。如果需要刪除DOM元素的屬性,請使用removeProp()函數。

文法

jQuery 1.6 新增此函數。 prop()函數有以下兩種用法:

用法一:

jQueryObject.prop( propertyName [, value ] )

設定或傳回指定屬性propertyName的值。如果指定了value參數,表示設定屬性propertyName的值為value;如果沒有指定value參數,則表示傳回屬性propertyName的值。

參數value也可以是函數,prop()將根據匹配的所有元素遍歷執行該函數,函數中的this指標將指向對應的DOM元素。 prop()也會為函數傳入兩個參數:第一個參數就是該元素在符合元素中的索引,第二個參數就是該元素propertyName屬性目前的值。函數的傳回值就是為該元素的propertyName屬性所設定的值。

用法二:

jQueryObject.prop( object )

以物件形式同時設定任意多個屬性的值。物件object的每個屬性對應propertyName,屬性的值對應value。

注意:prop()函數的所有"設定屬性"操作針對的是當前jQuery物件所匹配的每一個元素;所有"讀取屬性"的操作只針對第一個匹配的元素。
參數

請根據前面語法部分所定義的參數名稱尋找對應的參數。

參數 描述
propertyName String類型指定的屬性名稱。
value 可選/Object/Function類型指定的屬性值,或傳回屬性值的函數。
object Object類型指定的對象,用於封裝多個鍵值對,同時設定多項屬性。
參數value可以是包括物件和陣列在內的任意型別。

傳回值

prop()函數的傳回值是任意型,傳回值的型別取決於目前prop()函數執行的是"設定屬性"運算或"讀取屬性"操作。

如果prop()函數執行的是"設定屬性"操作,則傳回目前jQuery物件本身;如果是"讀取屬性"操作,則傳回讀取到的屬性值。

如果目前jQuery物件符合多個元素,則傳回屬性值時,prop()函數只以其中第一個符合的元素為準。如果該元素沒有指定的屬性,則傳回undefined。

prop()和attr()的主要差異:prop()函數針對的是DOM元素(JS Element物件)的屬性,attr()函數針對的是DOM元素所對應的文檔節點的屬性。詳情請查看jQuery函數attr()和prop()的差異。

注意事項

1、如果透過prop()函數更改

2、如果使用prop()函數操作表單元素的checked、selected、disabled等屬性,如果該元素被選取(或停用),則傳回true,否則(意即HTML中沒有該屬性)傳回false。

3、prop()函數也可以設定或傳回DOM元素的Element物件上的某些屬性,例如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等屬性。

4、在IE9及更早版本中,如果使用prop()函數設定的屬性值不是一個簡單的原始值(String、Number、Boolean),並且在對應的DOM元素被銷毀之前,該屬性沒有被移除,則可能會導致記憶體洩漏問題。如果你只是為了儲存數據,建議你使用data()函數,以避免記憶體洩漏問題。

範例&說明

以下面這段HTML程式碼為例:

複製程式碼 程式碼如下:

   

CodePlayer


   
   

我們編寫如下jQuery程式碼:
var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(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()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/

// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

登入後複製

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板