网站首页 工具系列 | jQuery设置和获取自定义属性
工具系列 | jQuery设置和获取自定义属性
时间:2019-09-30 16:11:04 作者:Tinywan 浏览量:12312

前言

jQuery中设置和获取自定义属性的方法目前知道的有两种:attr()和data();

1.attr()

一、设置自定义属性

1
2
3
4
5
6
7
8
9
<div class="container">
<div class="demo"></div>
</div>
<script type="text/javascript">
   $(function(){
       $(".demo").attr("test",'123');
       console.log($(".container").html());        //  <div class="demo" test="123"></div>
   });
</script>

二、获取自定义属性

1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="demo"></div>
</div>
<script type="text/javascript">
   $(function(){
       $(".demo").attr("test",'123');
       var result = $(".demo").attr("test");
       console.log(result);        // 123(字符串)
   });
</script>

2.data()

一、设置自定义属性

1
2
3
4
5
6
7
8
9
<div class="container">
<div class="demo"></div>
</div>
<script type="text/javascript">
   $(function(){
       $(".demo").data("test","123");
       console.log($(".container").html()); //<div class="demo"></div>
   });
</script>

二、获取自定义属性

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<div class="demo" data-name='demo'></div>
</div>
</body>
<script type="text/javascript">
$(function(){
$(".demo").data("test","123");
console.log($(".demo").data("test")); //123
  console.log($(".demo").data("name")); //demo
});
</script>

注意:这里我们发现使用data()方法给div设置自定义属性。这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。同时,命名的时候需要注意格式:data-* 。

attr()和prop()的区别

这里通过全选以及反选的例子来说明。

以下是使用attr()实现的代码,是有问题的:

全选复选框明明显示勾选,但是没有显示checked属性;其它复选框全部选中时,全选复选框自动显示勾选,但反选又没有反应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<title>Title</title>
</head>
<body>
<ul>
<li>
<input type="checkbox" class="checkbox"> 1
</li>
<li>
<input type="checkbox" class="checkbox"> 2
</li>
<li>
<input type="checkbox" class="checkbox"> 3
</li>
<li>
<input type="checkbox" class="checkbox"> 4
</li>
</ul>
<input type="checkbox" id="selectedAll">全选
<script>
   function selectedAll(){
       var checkbox = $(".checkbox");
       var checked = checkbox.filter(":checked");
       if(checkbox.length == checked.length){
           $("#selectedAll").attr("checked","checked");
       }else{
           $("#selectedAll").attr("checked",undefined);
       }
   }
   $(function () {
       //        全选
       $(".checkbox").on("change",function () {
           selectedAll();
       })
       $("#selectedAll").on("change",function(){
           var checked = $(this).attr("checked");
           console.log(checked);
           $(".checkbox").attr("checked",checked);
           selectedAll();
       });
   })
</script>
</body>
</html>

解决方法:

原来是jQuery版本问题。jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断。

正确代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<title>Title</title>
</head>
<body>
<ul>
<li>
<input type="checkbox" class="checkbox"> 1
</li>
<li>
<input type="checkbox" class="checkbox"> 2
</li>
<li>
<input type="checkbox" class="checkbox"> 3
</li>
<li>
<input type="checkbox" class="checkbox"> 4
</li>
</ul>
<input type="checkbox" id="selectedAll">全选
<script>
   function selectedAll(){
       var checkbox = $(".checkbox");
       var checked = checkbox.filter(":checked");
       if(checkbox.length == checked.length){
           $("#selectedAll").prop("checked",true);
       }else{
           $("#selectedAll").prop("checked",false);
       }
   }
   $(function () {
       //        全选
       $(".checkbox").on("change",function () {
           selectedAll();
       })
       $("#selectedAll").on("change",function(){
           var checked = $(this).prop("checked");
           $(".checkbox").prop("checked",checked);
           selectedAll();
       });
   })
</script>
</body>
</html>

这篇博客上提到,这三者之间的区别。

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property。

.prop(),此方法jq1.6引入,读/写DOM的property。
.data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上。

从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()总是最优的。

attr和prop分别是单词attribute和property的缩写,它们均表示“属性”的意思。不过,在jQuery中,attribute和property却是两个不同的概念。attribute表示HTML文档节点属性,property表示JS对象的属性。

prop()的设计目标用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);
attr()的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

但我觉得以上的区分看着有些复杂,我的个人理解是:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法;

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

同时网上也有以下的一张仅运行在新的.prop()方法中的图片,可以按照图片所示的属性区分attr()和prop()这两种方法的使用。


附件下载
最新评论