什么时候最好使用 `attr()` 而不是 `.prop()`？ [复制]答案

【问题标题】：When is it preferable to use `attr()` instead of `.prop()`? [duplicate]什么时候最好使用 `attr()` 而不是 `.prop()`？ [复制]
【发布时间】：2013-05-15 07:18:37
【问题描述】：

(注意：虽然说这是 .prop() vs .attr() 的副本可能很诱人，但我不相信它是。这篇文章很好地解释了 .prop() 和.attr() 但没有明确说明什么时候一个比另一个更可取，这就是这个问题的目的。）

尽管在 StackOverflow 上阅读了许多关于 .prop() 和 .attr() 之间差异的问题/答案，但我仍然在这个问题上看到很多困惑。

我觉得在 StackOverflow 上有一个明确的参考来描述什么时候一种方法比另一种更可取是很有用的，这样我们就可以消除猜测和试图弄清楚某物是属性还是属性的尝试。

因此，我问，哪些属性/属性最好使用.prop()，哪些.attr()？

【问题讨论】：

在此处找到您的答案stackoverflow.com/questions/5874652/prop-vs-attr[enter 此处的链接描述][1]。 [1]：stackoverflow.com/questions/5874652/prop-vs-attr
@AzAh 你没读过他用来提问的便条吗？
@PalashMondal，是的，我在答案末尾包含了指向 jQuery 参考的链接。关键是要在 StackOverflow 上轻松搜索参考。
但是……其他问题怎么解释不了呢？如果需要属性，最好使用 .attr()，如果需要属性，最好使用 .prop。另一个问题很好地定义了这一点。
@KevinB，尽管有那篇文章，我仍然看到很多困惑。对于我们很多人来说，尽管阅读过那篇文章，但并不总是很清楚某物是属性还是属性。这个问题/答案的灵感来自另一个问题的答案中的冗长讨论。

标签： jquery attr prop

【解决方案1】：

适用之前 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())    |    ✓       |           |
+------------------------------------+------------+-----------+

.attr() 和 .prop() 都不应该用于获取/设置值。请改用.val() 方法（尽管使用.attr(“value”, “somevalue”) 也可以。

总结：.prop() 方法应该用于布尔属性/属性以及 html 中不存在的属性（例如 window.location）。所有其他属性（您可以在 html 中看到的属性）可以并且应该继续使用 .attr() 方法进行操作。

Reference

【讨论】：

但.attr() 方法适用于所有情况。不。
@undefined，我引用 jQuery 文档。
是的，这仅在 jQuery 1.6 中有效。
jQuery 1.6.1 使 .attr 向后兼容（它不在 1.6 中），并且 1.9 回到与 1.6 类似的设置，它再次向后不兼容，使 .attr 无法正常工作带有一些布尔属性。
@KevinB，我会寻求更多参考资料以提供更好的答案。任何帮助表示赞赏。（而且我认为这支持了我的论点，即对此有足够的不确定性，因此在容易找到的地方清楚地说明答案会很有用。）

【解决方案2】：

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

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

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

elem.checked true (Boolean) 会随着复选框的状态而改变 $(elem).prop("checked") true (Boolean) 会随着复选框的状态而改变

elem.getAttribute("checked") "checked" (String) 复选框的初始状态；不变 $(elem).attr("checked") (1.6) "checked" (String) 复选框的初始状态；不变

$(elem).attr("checked") (1.6.1+) "checked" (String) 会随着复选框的状态而改变 $(elem).attr("checked") (pre-1.6) true (Boolean) 随复选框状态改变

SOURCE

【讨论】：