jQuery:prop和attr的区别

attr全称attribute(属性) 

prop全称property(属性)

虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

举个例子:

<input type="checkbox" id="i1" value="1">

针对上面的代码,

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

如果换成下面的代码:

<input type="checkbox" checked id="i1" value="1">

再执行:

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

接下来再看一下针对自定义属性,attr和prop又有什么区别:

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码:

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下:

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
posted @ 2019-08-05 15:31  shengguorui  阅读(407)  评论(1编辑  收藏  举报