国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

jQuery.prop() 使用詳解

2019-11-20 12:01:19
字體:
來源:轉載
供稿:網友

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()函數更改<input>和<button>元素的type屬性,在多數瀏覽器上將會拋出一個錯誤,因為該屬性一般不允許在后期更改。

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代碼為例:

復制代碼 代碼如下:
<div id="n1">
    <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對象)的屬性,而不是元素節點(HTML文檔)的屬性document.writeln( $n2.prop("data-key") ); // undefineddocument.writeln( $n2.prop("data_value") ); // undefineddocument.writeln( $n2.prop("id") ); // n2document.writeln( $n2.prop("tagName") ); // Pdocument.writeln( $n2.prop("className") ); // demo testdocument.writeln( $n2.prop("innerHTML") ); // CodePlayerdocument.writeln( typeof $n2.prop("getAttribute") ); // function// prop()設置的屬性也是針對元素(Element對象),因此也可以通過元素本身直接訪問$n2.prop("prop_a", "CodePlayer");document.writeln( $n2[0].prop_a ); // CodePlayervar n2 = document.getElementById("n2");document.writeln( n2.prop_a ); // CodePlayer// 以對象形式同時設置多個屬性,屬性值可以是對象、數組等任意類型$n2.prop( {   prop_b: "baike",  prop_c: 18,  site: { name: "CodePlayer", url: "http://www.survivalescaperooms.com/" }} );document.writeln( $n2[0].prop_c ); // 18document.writeln( $n2[0].site.url ); // //www.survivalescaperooms.com/// 反選所有的復選框(沒選中的改為選中,選中的改為取消選中)$("input:checkbox").prop("checked", function(index, oldValue){  return !oldValue;});

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 冕宁县| 隆林| 五台县| 枝江市| 鄂伦春自治旗| 西平县| 土默特左旗| 宾川县| 灵璧县| 涟水县| 犍为县| 德兴市| 临澧县| 井研县| 高密市| 玉林市| 华坪县| 汶川县| 鸡泽县| 砚山县| 汉沽区| 夏邑县| 青冈县| 康马县| 公主岭市| 宾阳县| 洪泽县| 林口县| 慈利县| 丹棱县| 平原县| 广丰县| 商都县| 扎赉特旗| 穆棱市| 桐梓县| 龙井市| 昌黎县| 临高县| 凤庆县| 大埔县|