jQuery中attr()和prop()的区别

jQuery做为一个简洁且锋利的JS库,一直是前端开发的必备技能。
当我们使用jQuery去操作DOM元素属性时,有时候并不是那么顺利。

attr()和prop()的区别

prop(property):表示JS对象的属性
attr(attribute):表示HTML文档节点的属性
所以当我们操作DOM元素的自有属性,例如disabled、selected等时attr()并没有起作用,而应该用prop()

例如:

1
2
3
4
5
6
7
8
9
10
<button id="btn" class="btn" type="button"></button>

$("#btn").attr("disabled")
undefined
$("#btn").prop("disabled")
false
$("#btn").attr("class")
btn
$("#btn").prop("className")
btn

当然,由于DOM元素某些属性的更改也会影响到元素节点上对应的属性。所以:

1
2
3
$("#btn").prop("className","change")
$("#btn").attr("class")
change
扫一扫,请老师喝水