attr()、prop()、data()的区别

您所在的位置：网站首页 › prop和attr区别 › attr()、prop()、data()的区别

attr()、prop()、data()的区别

#attr()、prop()、data()的区别| 来源: 网络整理| 查看: 265

attr() 方法设置或返回被选元素的属性值。 prop() 方法设置或返回被选元素的属性和值。 data() 方法向被选元素附加数据，或者从被选元素获取数据。在工作上碰到过。有时候混淆attr()和prop()方法，所以查找资料稍微整理下，做个记录。

attr()和prop()

attr和prop分别是单词attribute和property的缩写，它们均表示“属性”的意思。不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点属性，property表示JS对象的属性。示例：

未选中状态选中状态禁止选择 //js console.log($("#chk1").attr("checked")) //undefined console.log($("#chk2").attr("checked")) //checked console.log($("#chk1").prop("checked")) //false console.log($("#chk2").prop("checked")) //true

像checkbox，radio和select这样的元素，像“checked”、“selected”和“disabled”这些属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。网上的很多资料很多，简洁明了的说法就是：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 data()

data()的特别之处是，它是可以存储任何数据的。不管是字符串、数组、还是json。而attr 和prop做不到哦。

//html代码片段关于prop()、attr()、data()三者的区别 //js console.log($("#demo").attr("data-uid")) //110 console.log($("#demo").data("uid")) //110 //通过attr给data-uid设置属性值 $("#demo").attr("data-uid","123") //查看视图里的html代码关于prop()、attr()、data()三者的区别 //通过data给data-uid设置属性值 $("#demo").data("uid","123") //查看视图里的html代码关于prop()、attr()、data()三者的区别 console.log($("#demo").data("uid")) //123 console.log($("#demo").attr("data-uid")) //110

对div元素进行了data()赋值操作，但HTML代码中div的data-uid的值仍然不变。但是后续操作的打印结果是更改后值。 data()设置值后，attr()不能获取设置后的值。

参考资料： https://www.cnblogs.com/yaomeng/p/5359894.html https://www.cnblogs.com/chenzhiyu/p/7788751.html

【本文地址】

attr()、prop()、data()的区别

attr()、prop()、data()的区别

今日新闻

推荐新闻