Jquery中attr和prop的区别

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

上面的描述也许有点模糊，举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
 
 

 
 
1

这个例子里<a>元素的DOM属性有“href、target和class“，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>
 
 

 
 
1

这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
 
 

 
 
1
2

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
 
 

 
 
1
2

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
 
 

 
 
1
2

全文完。

---

最近做项目的时候遇到了一个坑，浪费了将近一晚上的时间，原因就是有一个地方要改变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()访问：

• 第一：只添加属性名称就可以使属性生效的就应该使用prop();
• 第二：只存在true/false的属性应该使用prop()。

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

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