jQuery中attr()与prop()的区别

今天看<锋利的jquery>第五章表单的应用时，我发现了一个问题:代码如下

<form action="#" method="post" id="regForm">
        你爱好的运动是?
        <input type="checkbox" id="checkAll">全选/清除<br>
        <input type="checkbox" name="items" value="足球">足球
        <input type="checkbox" name="items" value="篮球">篮球
        <input type="checkbox" name="items" value="羽毛球">羽毛球
        <input type="checkbox" name="items" value="乒乓球">乒乓球
</form>
<script type="text/javascript">
    $(function(){
        $('#checkAll').click(function(){
        // $('[name=items]').prop('checked',this.checked);
           $('[name=items]').attr('checked',this.checked);
           console.log($(this).attr('checked'));
           console.log($(this).prop('checked'));
        });
    });
</script>

书上是想利用attr()来达到全选和清除的目的，但是我用了之后发现attr('checked',this.checked);只会生效一次，运行程序之后发现 console.log($(this).attr('checked'));的值竟然是undefinded,赶紧查阅了一波资料,原来这个地方应该用prop()方法,log查看了一下，发现console.log($(this).prop('checked'));输出的是true和false,将attr()替换为prop()方法之后，原来的bug就解决了。但是，什么时候用attr()，什么时候用prop()呢？赶紧又搜了一波，最后总结一下:

如果是需要设置为true或者false这种：像checked等等，就应该用prop(),prop()用来检索DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

如果是id,class这种，最好用attr().用于attr()操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法将其转换为字符串类型