什么时候最好使用`attr()`而不是`.prop()`?

时间:2013-05-20 16:59:34

标签: jquery attr prop

注意:虽然可能很容易说这是.prop() vs .attr()的重复,但我不相信它。这篇文章解释了{{{{3}之间的区别。 1}}和.prop()但是当一个人优先于另一个时,并没有明确说明,这就是这个问题的目的。)

尽管已经在StackOverflow上阅读了关于.attr().prop()之间差异的一些问题/答案,但我仍然看到很多关于这个问题的混淆。

我觉得在StackOverflow上有一个明确的引用来描述当一个方法比另一个方法更可取时是有用的,这样我们就可以消除猜测并试图弄清楚某些东西是属性还是属性。 / p>

因此,我问,哪个属性/属性更适合使用.attr()并且.prop()

2 个答案:

答案 0 :(得分:8)

在 jQuery 1.9之前适用

下面是一些属性和属性的列表,以及在获取或设置它们时通常应使用的方法。这是首选用法,但.attr()方法适用于所有情况。

+------------------------------------+------------+-----------+
| Attribute/Property                 |  .attr()   |  .prop()  |
+------------------------------------+------------+-----------+
| accesskey                          |    ✓       |           |
| align                              |    ✓       |           |
| async                              |            |    ✓      |
| autofocus                          |            |    ✓      |
| checked                            |            |    ✓      |
| class                              |    ✓       |           |
| contenteditable                    |    ✓       |           |
| disabled                           |            |    ✓      |
| draggable                          |    ✓       |           |
| href                               |    ✓       |           |
| id                                 |    ✓       |           |
| label                              |    ✓       |           |
| location (i.e., window.location)   |            |    ✓      |
| multiple                           |            |    ✓      |
| readOnly                           |            |    ✓      |
| rel                                |    ✓       |           |
| selected                           |            |    ✓      |
| src                                |    ✓       |           |
| tabindex                           |    ✓       |           |
| title                              |    ✓       |           |
| type                               |    ✓       |           |
| width (if needed over .width())    |    ✓       |           |
+------------------------------------+------------+-----------+

{/ 1}}和.attr()都不应用于获取/设置值。请改用.prop()方法(尽管使用.val()即可。

摘要: .attr(“value”, “somevalue”)方法应该用于布尔属性/属性以及html中不存在的属性(例如.prop())。所有其他属性(您可以在html中看到的属性)可以并且应该继续使用window.location方法进行操作。

Reference

答案 1 :(得分:0)

在特定情况下,属性和属性之间的差异非常重要。在jQuery 1.6之前,.attr()方法在检索某些属性时有时会考虑属性值,这可能会导致行为不一致。从jQuery 1.6开始,.prop()方法提供了一种显式检索属性值的方法,而.attr()则检索属性。

例如,应检索selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked和defaultSelected,并使用.prop()方法进行设置。在jQuery 1.6之前,这些属性可以使用.attr()方法检索,但这不在attr的范围内。它们没有相应的属性,只是属性。

关于布尔属性,请考虑由HTML标记定义的DOM元素,并假设它位于名为elem的JavaScript变量中:

  

elem.checked true(布尔值)将随复选框状态而变化   $(elem).prop(“checked”)true(布尔值)将随复选框状态改变

     

elem.getAttribute(“checked”)“checked”(String)复选框的初始状态;不会改变   $(elem).attr(“checked”)(1.6)“checked”(字符串)复选框的初始状态;不会改变

     

$(elem).attr(“checked”)(1.6.1+)“checked”(字符串)将随复选框状态而变化   $(elem).attr(“checked”)(pre-1.6)true(布尔值)已更改为复选框状态

<强> SOURCE