浅谈attr()与prop()区别

【前言】

    最近做项目的时候遇到了一个坑，浪费了将近一晚上的时间，原因就是有一个地方要改变checkbox的状态，当时我使用的是attr("checked",true)来状态，当时遇到的问题就是我在chrome中运行正常，但是在微信开发者工具中运行出错，无法完全得改变多选框的状态，当时一直以为是代码的问题，于是就在代码上面找问题，找了挺久，然后也修改了很多，但是最后发现还是不行。

 

【主体】

     无奈的我去查找资料，不找不知道，一找才发现，原来问题出现在这里。

     在之前的JQuery版本中，都是使用attr()来访问对象的属性，比如取一个图片的alt属性，就可以使用$(".img").attr("alt")。但是在某些时候，比如访问input的disabled属性的时候就就会有些问题。在一些浏览器里，只要写了disabled属性就可以产生效果，但是在一些浏览器上就要写disabled="disabled"才能产生效果。所以，从1.6版本开始，jQuery提供新的方法prop()来获取这些属性。使用Prop()的时候，返回值是标准属性：true/false， 比如$("checkbox").prop('disabled'),不会返回'disabled'或者“ ”，只会返回true/false。

     根据资料上的说明，我将attr("chedked",true)改成了prop("disabled",true)，然后再查看效果，果然，问题解决了。这就是困扰了我一晚上的问题。

     最后总结一下哪些属性应该用attr()访问，哪些属性应该使用prop()访问：

         第一：只添加属性名称就可以使属性生效的就应该使用attr();

         第二：只存在true/false的属性应该使用prop()。

按照官方的说明，如果是设置disabled和checked这些属性，应该使用prop()方法，而不应该使用attr()方法。

知识，总是要应用在实践中才叫知识。

 

【通俗理解】

（1）prop()获取匹配的元素的属性值。

（2）这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.

（3）区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。

（4）这个布尔型的属性，再解释一下，是属性值只有true|false的属性。

（5）还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。

          1.添加属性名称该属性就会生效应该使用prop();

          2.是有true,false两个属性使用prop();

          3.其他则使用attr();