jQuery中attr和prop在修改checked属性时的区别

Posted 2023-05-08

在做复选框全选按钮的时候，出现了一个问题，使用语句$.attr('checked',true)，将复选框的属性改为被选中，在chrome浏览器中第一次点击有效后面就不行了，IE8倒是没有问题。
原因是html的属性分为attribute和property，暂且将后者称为特性。
checked属性即分为attribute->checked，和property->true,false。
对于一个checkbox，若未定义checked="checked"，alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。
使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。
所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。
另外关于在IE9之前版本中，如果property没有在DOM元素被移除之前删除，使用.prop()方法设置DOM元素property（简单类型除外：number、string、boolean）的值会导致内存泄露。为了安全的设置DOM对象的值，避免内存泄露，可以使用.data()方法。 参考技术A 区别就是 attr用于自带属性 而prop用于自定义属性

jquery中attr() & prop() 的区别与其实现方法

$(function(){
    $(‘#check‘).attr(‘checked‘);        //   undefind   ？？？一头雾水
})

在jquery中 attr 本来就是用来设置或者获取属性的，可是上面的方法却返回给 undefined ？

然后我尝试用

    $(‘#check‘).prop(‘checked‘);     

发现可以正常运行！！

在jquery中prop是相对来说版本比较新的一个方法，乍一看它的功能好像和attr没有什么很大的差别，的确，它们都可设置或者来获取属性，比如

$(‘#div‘).attr(‘title‘,‘hello‘);
$(‘#div‘).prop(‘title‘,‘hello‘);
$(‘#div‘).attr(‘class‘);
$(‘#div‘).prop(‘class‘);

都可以正常的运行，通过查看他们在jquery中的源码我有所发现：

　　在原生js中我们可以用 setAttribute() 和 getAttribute() 进行操作 ，也可以用  .|[] 进行操作 (exp: document.getElementById(‘div‘).title|| document.getElementById(‘div‘)[title] )。

　　在jquery当中 attr() 方法最主要的就是应用了原生中的 setAttribute() 和 getAttribute()  而  prop() 方法用的则是 . | []  这就是他们之间为什么会有不同之处的根本原因（当然，其中还有一些hook的因素影响着，感兴趣的同学可以去看一看源码）

　　那么 attr() 和 prop()  在平常的使用中有什么区别呢，在jQuery 1.6中，.attr()方法查询那些没有设置的属性，则会返回一个undefined。如果你要去恢复或者改变DOM状态值，类似checked，selected，disabled等表单元素的状态，最好使用.prop()方法,而自定义的属性最好使用attr() 方法，若使用prop() 同样可能会出现undefined的情况。官方给出了下面的一个表：（什么时候用哪种方法）