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>执行结果为：
jQuery属性操作之DOM属性操作
原文地址：https://www.cnblogs.com/yang-wei/p/9506975.html