Jquery中的`attr`和`prop`的区别

Jquery中的attr和prop的区别

测试唤醒: Google

attr和prop的作用和区别

  attr和prop都是Jquery对象用于设置或者获取DOM元素的函数, 比如操作disabled控制按钮是否可用; 最近再操作checkbox时发现, 使用attr无法生效只能使用后者. 依赖于getAttribute()和setAttribute()两个函数.

attr

attribute指明的是HTML文档节点属性;

这里的type/value/id等, 均是DOM节点的属性

使用attr获取属性

var b = $("#su")

b.attr("type")
"submit"
b.attr("value")
"百度一下"
b.attr("id")
"su"
b.attr("class")
"btn self-btn bg s_btn"
b.attr("className")
undefined

注意:不同的Jquery版本中的这些值, 可能返回的类型都会不同, 可能返回true/false也可能返回checked/selected等. 笔者没详细测试, 但是如果遇到问题最后自行测试一下返回结果比较好.

prop

prop可以获取的是DOM节点对应的JS对象的属性, 我们可以使用诸如document.getElementById("su")获取一个JS对象, DOM节点上的属性再这个对象上未必有, 这个对象上的属性也未必在DOM节点上显示的说明.

var a = document.getElementById("su")

a.className
"btn self-btn bg s_btn"

$(a).prop("className")
"btn self-btn bg s_btn"

这里的className就是JS对象的属性, 在DOM节点上对应的是class(没有className这个东西)

注意: 对于之前说明的如checked实际上是与JQuery的版本有关, 不过建议使用prop; 不过有兴趣可以测试一下发现, 使用attr或者直接操作JS对象的attr属性, 并不会影响DOM节点的代码(可以猜到checked应当是与JS对象关联的); 而修改disabled属性会发现HTML标签中显示的添加了该属性(JS的属性和DOM节点的属性是一致的).

扩展data

HTML标签可以使用data-key='value'的方式自定义数据

$("#test").data("key")

可以获取该自定义的属性值