jQuery中attr和prop的区别

Posted 2020-09-19 EngineerWen的技术博客

因为项目中经常会遇到使用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的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。在某些版本中，这些属性值表示文档加载时的初始状态值，
即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。