曾以为attr和data效果是一样的,只是attr需要多写一点代码量。后来在开发中发现他们并不相同。先写两个div体验一下:
<div id="test1">test1</div>
<div id="test2">test2</div>
<script>
// 赋值
$("#test1").attr("data-test1", "test1")
$("#test2").data("test2", "test2")
// 取值
console.log($("#test1").attr("data-test1")) // test1
console.log($("#test2").data("test2")) // test2
// 交换取值
console.log($("#test1").data("test1")) // test1
console.log($("#test2").attr("data-test2")) // undefined
</script>
在浏览器上Elements显示为
<div id="test1" data-test1="test1">test1</div>
<div id="test2">test2</div>
那attr 更改了#test1的值后用data再获取会如何
$("#test1").attr("data-test1", "test111")
console.log($("#test1").data("test1")) // test1
更改后在浏览器上Elements显示为
<div id="test1" data-test1="test111">test1</div>
<div id="test2">test2</div>
原来 jquery 的 data 是一种缓存机制,是一种将缓存附加到选择的对象上方法。用 data 取值时,它先获取到 DOM 节点值,并将其值存到缓存里,在以后查找时,它找到 DOM 后直接从缓存读取。所以即使attr改变了元素的值,但是缓存里的值没变,读取的结果没变。
attr 方法直接对DOM进行操作,在元素里能够直接看到。
所以应避免混合用data和attr。
在性能上,建议使用data,因为它能够减少对DOM的操作。