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>
执行结果为：
原文地址：https://www.cnblogs.com/yang-wei/p/9506975.html
时间： 2024-11-01 16:55:49