jQuery中prop()与attr()方法的区别及正确使用场景

prop()方法的引入背景

jQuery 1.6版本引入了prop()方法，此前该功能鲜少被使用。官方文档对其描述仅有一句：获取匹配元素集中第一个元素的属性值。

浏览器属性书写差异

在不同浏览器中，HTML属性的书写规范存在差异。部分浏览器允许简写如disabled、checked，而另一些则要求完整形式如disabled="disabled"、checked="checked"。例如，使用attr("checked")获取复选框状态时，选中状态下返回值为"checked"，未选中时则返回undefined。

prop()对布尔值的统一处理

为解决上述不一致问题，jQuery提供了prop()方法。该方法能统一返回布尔值：选中时返回true，未选中时返回false，从而避免了attr()方法返回字符串或undefined的混乱情况。

attr()与prop()的使用场景指南

关于attr()与prop()的选择时机，官方建议如下：1. 若添加属性名即生效，应使用prop()；2. 涉及true/false两个状态的布尔属性，应使用prop()；3. 其他情况使用attr()。在升级项目中的jQuery版本时，需特别注意这一差异。

以下是官方推荐的attr()与prop()使用对照表，详细列出了各类HTML特性对应的推荐方法。

官方属性对照表解析