首页 > 代码库 > jQuery中attr和prop的区别

jQuery中attr和prop的区别

因为项目中经常会遇到使用attr和prop的情况。趁着有时间总结一下attr和prop的用法。

总结起来:

1.对于HTML元素本身所固有的属性,在处理时使用prop方法.

2.对于HTML元素我们所自定义的DOM属性,在处理时使用attr方法

例如:

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

<input id="chk1" type="checkbox" />

$("#chk1").prop("checked") == false
$("#chk1").attr("checked") == undefined


延伸:
1.“attr”和“prop”分别是单词"attribute"和"property"的缩写,都表示属性的意思。但jquery中attr表示HTML文档对象的属性,property表示js文档对象的属性。
两者底层都是原生js对象的Element对象实现的。attr依赖Element对象的getAttribute()和setAttribute()方法实现。prop则是原生js中对象属性获取和设置的方法。jquery对其更好的封装,例如支持多个浏览器,设置多个属性等。
2.attr是jquery1.0就有的属性。prop()函数是1.6新增的。
3.jQuery认为:attribute的checkedselecteddisabled就是表示该属性初始状态的值,property的checkedselecteddisabled才表示该属性实时状态的值(值为truefalse)。在某些版本中,这些属性值表示文档加载时的初始状态值,
即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

jQuery中attr和prop的区别