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"