JQuery中attr和prop的区别

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？

区别

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

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

举一个例子：

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

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

使用prop方法：

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

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

$("#chk0").attr("checked")    //undefined
$("#chk1").attr("checked")    //checked
$("#chk2").attr("checked")    //checked
$("#chk2").attr("data")    //空值

总结

prop()函数的结果:

1. 如果有写标签固定的属性，返回指定属性值。
2. 如果没有写标签固定的属性，返回值是空字符串。

attr()函数的结果:

1. 如果有写相应的属性，返回其属性，如有checked这个属性，就返回它。
2. 如果没有写相应的属性，返回值是undefined。
3. 如果是自定义属性，如data，若是有值，显示属性值，若是没有值，显示空值。

全文完。