码迷,mamicode.com
首页 > Web开发 > 详细

jQuery属性操作之DOM属性操作

时间:2018-08-20 18:57:54      阅读:474      评论:0      收藏:0      [点我收藏+]

标签:rop   name   返回值   select   产生   check   span   oct   UNC   

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属性操作

标签:rop   name   返回值   select   产生   check   span   oct   UNC   

原文地址:https://www.cnblogs.com/yang-wei/p/9506975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!