jquery里的attr()方法和prop()方法的区别

Posted 2020-09-24

在jq的高版本里出现了prop()方法，那么attr()和prop()的区别在哪呢？这两者分别在什么情况用呢？

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

eg:<a href="http://www.baidu.com" target="_blank">哈哈</a>

像href、target这样的属性是html元素本身就带有的固有属性，在处理时，使用prop()方法；

eg: <a href="http://www.baidu.com" action="ccc">哈哈</a>

像action这样的属性是我们自己自定义的DOM属性，在处理时，使用attr()方法；

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

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

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

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

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
这也是我在工作上遇到的一个坑，花了比较长的时间才找到问题的所在，不过这次的经历让我牢牢记住了两者之间的区别所在，收获良多。
工作之后也好久没写博客了，加油！