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

2022-07-18

①、问题来源

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

  • 对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。

  • 对于 HTML 元素自定义的 DOM 属性,在处理时,使用 attr 方法。

②、举例

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

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

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

B、而自定义属性 data-name 需要使用 attr

$("#chk1").prop("data-name") == undefined

如果上面使用attr方法,则会出现:

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


阅读 93

js文章

带到手机上看