Jquery中的attr和prop的区别
测试唤醒: Google
attr和prop的作用和区别
attr和prop都是Jquery对象用于设置或者获取DOM元素的函数, 比如操作disabled控制按钮是否可用; 最近再操作checkbox时发现, 使用attr无法生效只能使用后者. 依赖于getAttribute()和setAttribute()两个函数.
attr
attribute指明的是HTML文档节点属性;
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
这里的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")
可以获取该自定义的属性值
