JQuery中attr和prop的区别

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？

区别

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，很简单：

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

举一个例子：

<input id="chk0" type="checkbox" data />是否可见 <input id="chk1" type="checkbox" checked />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些有固有属性 true 和 false ，因此需要使用prop方法去操作才能获得正确的结果。

使用prop方法：

$("#chk0").prop("checked"); //false
$("#chk1").prop("checked"); //true
$("#chk2").prop("checked"); //true

如果上面使用attr方法，则会出现：

$("#chk0").attr("checked"); //undefined
$("#chk1").attr("checked"); //checked
$("#chk2").attr("checked"); //checked
$("#chk2").attr("data"); //空值

总结

prop()函数的结果:

1. 如果有写标签固定的属性，返回指定属性值。
2. 如果没有写标签固定的属性，返回值是空字符串。

attr()函数的结果:

1. 如果有写相应的属性，返回其属性，如有checked这个属性，就返回它。
2. 如果没有写相应的属性，返回值是undefined。
3. 如果是自定义属性，如data，若是有值，显示属性值，若是没有值，显示空值。

一句话原理

• attr() 操作的是 HTML 标签上写死的属性（字符串），读的是”初始Markup”。
• prop() 操作的是 DOM 对象上的属性（property），读的是”运行时真实状态”。

对 checked 这种布尔属性，关键在于：用户勾选/取消后，DOM 的 checked property 会变，但 HTML 上的 checked attribute 字符串不会跟着变。所以：

• 想拿到”当前到底选没选” → 用 prop("checked") ✅
• 用 attr("checked") → 拿到的是初始 HTML 里写没写这个属性，跟当前状态无关 ❌

怎么选（速查）

场景	用
checked / selected / disabled 等布尔状态	prop()
读”当前值”（如 value 输入框现状）	prop()
自定义属性 data-*	attr()
读取/修改 HTML 原始属性（如 id、class、href 初始值）	attr()

经验法则：涉及”状态”用 prop，涉及”属性字符串/自定义属性”用 attr。碰上拿不到正确值的，十有八九是把 prop 用成了 attr。

全文完。