个人觉得,data方法试用的是在jq开辟出来的缓存上,而attr方法是作用在视图上,比如下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div data-id="123">aaaa</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
var a1 = $("div").attr("data-id");
var a2 = $("div").data("id");
console.log(a1 + "\n" + a2);
$("div").attr("data-id", "456");
var a3 = $("div").data("id");
var a4 = $("div").attr("data-id");
console.log(a3 + "\n" + a4);
$("div").data("id", "789");
var a5 = $("div").data("id");
var a6 = $("div").attr("data-id");
console.log(a5 + "\n" + a6);
</script>
</html>
当我们只留下
$("div").attr("data-id", "456");
的时候,f12看到的是data-id为456,如果留下
$("div").data("id", "789");
的时候,看到的是data-id为123;
所以验证了这么一句话:
$.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别。
而且在上面的代码,我们也可以看到,两个不是可以混着用的,毕竟作用的对象不同,现在我们做个新尝试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div data-name="data-name123" name="name123">aaaa</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
console.log($("div").attr("name"));
console.log($("div").data());
</script>
</html>
实验后发现一个事实,就是将data的打印出来,是这个样子的:
{name: "data-name123"}
name:"data-name123"
__proto__:Object
所以在使用data的时候要小心点