从jQuery 1.12迁移至3.5：.attr()改.prop()的功能疑问

嘿，这个问题问到点子上了——从jQuery 1.x升级到3.x时，attr()和prop()的区别绝对是高频踩坑点，我来帮你拆解下你的修改方案：

首先得明确两者的核心差异：

• attr()操作的是DOM元素的HTML属性（就是你写在标签里的静态属性，比如<input checked="checked">里的checked）
• prop()操作的是DOM元素对象的JS层面属性（比如input.checked，它是实时反映状态的布尔值）

针对你计划的三个修改，逐一分析功能变化：

1. 获取状态：attr()改为prop() #

原来的写法：

$(selector).attr('checked');
$(selector).attr('selected');

改成：

$(selector).prop('checked');
$(selector).prop('selected');

• 在jQuery 1.12中，attr('checked')返回的是字符串"checked"（选中时）或undefined（未选中时）；而prop('checked')直接返回布尔值true/false。
• 这个修改不会破坏原有功能，反而更合理：判断选中状态本来就该用布尔值。如果你的代码之前是用== "checked"或!= undefined来判断，改成prop后直接用if ($el.prop('checked'))会更简洁可靠，逻辑完全等价。

2. 设置选中状态：attr('checked', ...)改为prop('checked', true) #

原来的写法：

$(selector).attr('checked', 'checked');
$(selector).attr('checked', true);

改成：

$(selector).prop('checked', true);

• 旧版本里用attr设置虽然能生效，但本质是修改HTML属性；而prop直接修改DOM对象的实时状态，这才是控制表单元素选中状态的正确姿势。
• 举个例子：如果用户手动点击复选框改变状态，attr('checked')可能还停留在初始的"checked"值，但prop('checked')会实时更新。你的修改不仅不会有功能变化，还能避免这种“状态不一致”的潜在bug，代码更健壮。

3. 设置选中状态：attr('selected', ...)改为prop('selected', true) #

和上面的checked逻辑完全一致：
原来的写法：

$(selector).attr('selected', 'selected');
$(selector).attr('selected', true);

改成：

$(selector).prop('selected', true);

• 同样，这个修改是正确的，不会改变原有功能，反而能让下拉选项的选中状态和用户操作实时同步，避免旧写法可能出现的状态滞后问题。

总结 #

你的这三个修改都是完全符合jQuery 3.x设计规范的，不会带来负面的功能变化，反而能消除旧版本中attr()处理布尔属性的模糊性，让代码更可靠、更易维护。

内容的提问来源于stack exchange，提问作者SAKTHIVEL N