jQuery 获取 attr() 与 prop() 属性值的方法及区别介绍

转载地址： https://luluqi.cn/post/198

一、问题来源

在高版本的 jquery 引入 prop 方法后，什么时候该用 prop？什么时候用 attr？它们两个之间有什么区别？这些问题就出现了。


对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素自定义的 DOM 属性，在处理时，使用 attr 方法。
二、举例


<input id="chk1" type="checkbox" data-name='hello'/>是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
1、像 checkbox，radio 和 select 这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用 prop 方法去操作才能获得正确的结果。


$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现：


$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
2、而自定义属性 data-name 需要使用 attr


$("#chk1").prop("data-name") == undefined
如果上面使用attr方法，则会出现：


$("#chk1").attr("data-name") == "hello"