jQuery 中 .attr() 与 .prop() 的用法浅析

在 jQuery 1.6 以后的版本中,大多数属性可以使用.attr()获取,但是一些特殊情况,必须使用.prop()

参考链接:http://api.jquery.com/prop/ & .prop vs .attr()

第二个链接中有两点说出了attribute(特性)与 property(属性)的区别:

  1. attribute 的值只能是字符串,而 property 的值可以是任何类型,比如checked的 property 是布尔值,style的 property 是包含单个样式的对象,size的 property 是数字。
  2. 虽然一个元素的 attribute 与 property 有相同的名称,更新其中一个通过会更新另一个,但对于一input元素一些写入标签的特殊attribute,比如valuechecked,property 总是表示他的最新状态,而 attribute 表示的是写在代码文件中的初始值( attribute 中的valuechecked对应 property 中的defaultValuedefaultChecked

下面的获取checked值的 demo,也是我们最常见的用法 ,以下 demo 可以很清楚的演示以上两点:

同时,文章开头的.prop()api 参考链接也给出了对比:

elem.checked true(Boolean) 会随着 checkbox 的即时状态改变
$(elem).prop("checked") true(Boolean) 会随着 checkbox 的即时状态改变
elem.getAttribute("checked") "checked"(String) checkbox 的初始状态,不会改变
$(elem).attr("checked")(1.6) "checked"(String) checkbox 的初始状态,不会改变
$(elem).attr("checked")(1.6.1+) "checked"(String) 会随着 checkbox 的即时状态改变
$(elem).attr("checked")(pre-1.6) true(Boolean) 会随着 checkbox 的即时状态改变

比如说,我要获取一个 checkbox 是否被选中,就不能用.attr()方法,因为它获取的是 checkbox 元素生成后的初始状态,不会随着用户操作而改变,所以应该用以下三种方式:

小结:

大部分情况下,.attr()prop()通用。但除了checked以外,以下的值:selectedIndex, tagName, disabled,nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected也应该使用.prop()获取以及设置

发表评论