什么时候使用 `attr()` 而不是 `.prop()` 更可取?
什么时候使用 `attr()` 而不是 `.prop()` 更可取?
这个问题已经在这里有了答案:
(注意:尽管人们可能会认为这是 .prop() vs .attr() 的重复,但我不这样认为。那篇文章很好地解释了 .prop()
和 .attr()
之间的区别,但没有明确地说明何时一个优于另一个,这就是这个问题的目的。)
尽管我已经阅读了 StackOverflow 上许多关于 .prop()
和 .attr()
之间的区别的问题和答案,但我仍然看到很多人对这个问题感到困惑。
我认为在 StackOverflow 上有一个确定性的参考,说明何时应该使用一种方法而不是另一种方法,这样我们就可以消除猜测和试图弄清楚某些东西是属性还是属性的尝试。
因此,我问,哪些属性/属性最好使用 .prop()
,哪些使用 .attr()
?
属性和属性之间的区别在某些情况下可能很重要。在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" (字符串)复选框的初始状态;不会改变
$(elem).attr("checked") (1.6) "checked" (字符串)复选框的初始状态;不会改变
$(elem).attr("checked") (1.6.1+) "checked" (字符串)将随复选框状态改变
$(elem).attr("checked") (pre-1.6) true (布尔值)随复选框状态改变
适用于 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”)
也可以工作)。
总结:布尔属性/属性和 html 中不存在的属性(例如 window.location
)应使用 .prop()
方法。所有其他属性(可以在 html 中看到的属性)可以且应该继续使用 .attr()
方法进行操作。