介绍前几天在做一个mini京东项目的时候,涉及到一个全选的小功能。一开始用了attr,效果不是我想要的。单击一次产品按钮后,attr无法更改其状态。最后google了一下发现需要用prop代替。虽然解决了效果问题,但是还是想弄明白prop和attr的区别。遇到不同版本的问题,我一般都是先查看相关的官方文档,但是在jq的api中文文档中找不到有价值的东西。只是发现适用的版本和概念略有不同。attr:设置或返回被选元素的属性值。Version:1.0prop:获取匹配元素集中第一个元素的属性值。Version:1.6+从概念上看,发现操作的对象和用法好像基本一样,然后带着疑惑进行了一些实验,查阅了一些相关资料。示例代码checkbox">单选
单选
单选
单选
单选
单选
$('.checkAll').click(function(){$('.item').attr('checked',this.checked);});问题描述当全选按钮被选中时,所有的单选按钮都被选中,当全选按钮没有被选中时,所有的单选按钮都没有被选中。当只点击全选按钮时,重复几次是没有问题的,但是如果其中一个单选按钮被点击,那么这个单选按钮就不会像其他单选按钮一样随着全选按钮的状态而变化。attr和prop的本质attr是attribute的缩写,prop是property的缩写,都有属性的意思,但是attr是操作html文档的节点属性,prop是操作js对象属性。attr在js中使用了setAttribute和getAttribute,而prop直接使用了原生js的element[value]和element[value]=key。attr和prop的区别attr设置的属性值只能是字符串类型。如果不是字符串类型,也会调用它的toString()方法将其转为字符串类型。prop设置的属性值可以是任意类型,包括数组和对象。1.6之后,对于布尔值的属性,attr返回的也是字符串类型。Checked或disabled直接返回checked、selected、disabled。否则返回未定义。解决我这个问题的关键是jQuery认为的下面这句话:一个属性的checked、selected、disabled属性代表该属性的初始状态值,一个property的checked、selected、disabled属性代表该属性的值属性的实时状态(值为真或假)。说到布尔值,比如checkbox,有true和false等布尔值的元素属性,属性是在页面加载时设置的,并且一直保持初始值,而properties存储的是元素的当前值属性。所以当我没有点击单选按钮的时候,就是浏览器刚刚加载的初始状态,还没有被用户点击过。这时候可以通过attr进行设置和操作。当用户点击时,当前按钮不是初始状态。state,attr自然是无法被操控的。