首页 > 代码库 > jquery里的attr()方法和prop()方法的区别

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

在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"
这也是我在工作上遇到的一个坑,花了比较长的时间才找到问题的所在,不过这次的经历让我牢牢记住了两者之间的区别所在,收获良多。
工作之后也好久没写博客了,加油!

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