DOM屬性操作是對DOM元素的屬性進行讀取、設置和移除操作， 比如prop()、 removeProp().
1. prop()
1.1 使用prop()獲取返回值
prop() 用於返回屬性值時， 則返回第一個匹配元素的值。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>prop() Demo</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script> 8 $(function () { 9 var cla = $("div").prop("class"); 10 console.log(cla); 11 12 var id = $("div").prop("id"); 13 console.log(id); 14 }) 15 </script> 16 </head> 17 <body> 18 <div class="divClass" id="divId"></div> 19 </body> 20 </html>
1.2 使用prop()設置屬性值
1.2.1 使用prop() 設置單個屬性值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>removeAttr() Demo</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script> 8 $(function () { 9 $("div").prop("class", "divClass"); 10 $("div").prop("id", "divId"); 11 }) 12 </script> 13 </head> 14 <body> 15 <div></div> 16 </body> 17 </html>
執行結果為：
1.2.2 使用prop()設置多個屬性值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>prop() Demo</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script> 8 $(function () { 9 $("div").prop({ 10 "class": "divClass", 11 "id": "divId" 12 }) 13 }) 14 </script> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
執行結果為：
2. removeProp()
返回值：jQuery
描述： 為集合中匹配的元素刪除一個屬性(property)。
語法格式為：
$(selector).remoceProp(propertyName)
其中：
propertyName
類型： string
要移除的屬性的名稱
$(selector).removeProp()方法用來刪除由$(selector).prop()方法設置的屬性值。
若嘗試移除DOM元素或window對象上的一些內建的屬性(property)， 瀏覽器可能會產生錯誤。
如果真的這么做了， 那么jQuery首先會將屬性(property)設置成 undefined， 然后忽略任何瀏覽器產生的錯誤。
一般來說， 只需要移除自定義的屬性(property)， 而不是移除內建的(原生的)屬性(property)。
注意：
不要使用此方法來刪除原生的屬性(property)， 比如checked， disabled或者selected， 這將會完全移除該屬性。一旦移除， 不能再次被添加到元素上。
2.1 代碼示例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>removeProp() Demo</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script> 8 $(function () { 9 var $para = $("p"); 10 11 $para.prop("luggageCode", 1234); 12 $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), "."); 13 $para.removeProp("luggageCode"); 14 $para.append("Now the secret luggage code is:", String($para.prop("luggageCode")), "."); 15 }) 16 </script> 17 </head> 18 <body> 19 <p></p> 20 </body> 21 </html>
執行結果為：
