jquery attr&prop

jquery版本的迭代,致方法的改版以及两者之间本身就存在一定的区别

在做一个简单的小需求的时候发现了一个问题。需求很简单，点击复选框，控制全选以及全部选。

1
2
3
4
5
6
7
8
9
10
<div class="container">
    <input type="checkbox" id="check" />
    <div class="box">
        <input type="checkbox" class="child-check" />
        <input type="checkbox" class="child-check" />
        <input type="checkbox" class="child-check" />
        <input type="checkbox" class="child-check" />
        <input type="checkbox" class="child-check" />
    </div>
</div>

点击#check 改变.child-check 的checked属性。

1
2
3
4
5
6
7
8
9
$('#check').on('click',function(){
   var _this = $(this);
   console.log(_this.attr('checked'));
   if(_this.attr('checked')){
       $('.child-check').attr('checked',true);
   }else{
       $('.child-check').attr('checked',false);
   }
});

正常来做的话，应该都是这样写的。但实际上，在运行的时候发现并不是这种情况，那这个时候只能进行调试了。打开chrome控制台，打上断点，一步步看下问题所在。在代码里面，我们是在控制台打印了_this.attr(‘checked’)它的值，因为后面的判断是根据这个值来判断，我们期望的是这个可以返回一个布尔值。但实际上在控制台里面打印出来的却是undefined，这就尴尬了。
那么只能google了。
首先，当前使用的jq版本是1.9.1，发现jq从1.6版本以后增加了prop()方法，接下来进入正题，两者之间有什么区别呢？
他们都表示属性的意思，但是attr表示html文档节点的属性，而prop则表示js对象的属性。ps:(有些也解释为html元素本身就带有的固有属性使用prop，自定义dom属性，是用attr。)
我们用jq时间应该也不短了，我们会发现一个特点，一般情况下，attr设置或得到的属性值是字符串类型，而prop则可以包括数组和对象在内的任意类型。
对于这一点，我觉得我们可以记住一点，对于获取或者设置checked，selected，disabled等属性都使用prop。
接下来贴上正确的代码

1
2
3
4
5
6
7
8
9
$('#check').on('click',function(){
    var _this = $(this);
    console.log(_this.prop('checked'));
    if(_this.prop('checked')){
        $('.child-check').prop('checked',true);
    }else{
        $('.child-check').prop('checked',false);
    }
});

这时候控制台打印出来的就是我们想要的布尔值了。
有些时候，出现问题并不是什么坏事，通过一个很简单的东西也可以让我们知识更全面一点。对于类库框架之类的，有时间也可以自己打个断点调试一下，看看源码，来加深对它的认识。