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

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

attr()和prop()

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

<div id="test">
    <input id="chk1" type="checkbox" />未选中状态
    <input id="chk2" type="checkbox" checked="checked" />选中状态
    <input id="chk3" type="checkbox" disabled />禁止选择
</div>
//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代码片段
<div id="demo" class="test" action="title" data-uid="110">关于prop()、attr()、data()三者的区别</div>
//js
console.log($("#demo").attr("data-uid")) //110
console.log($("#demo").data("uid"))     //110

//通过attr给data-uid设置属性值
$("#demo").attr("data-uid","123")
//查看视图里的html代码
<div id="demo" class="test" action="title" data-uid="123">关于prop()、attr()、data()三者的区别</div>

//通过data给data-uid设置属性值
$("#demo").data("uid","123")
//查看视图里的html代码
<div id="demo" class="test" action="title" data-uid="110">关于prop()、attr()、data()三者的区别</div>
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