版权声明：菜鸟的个人见解，请指导 https://blog.csdn.net/HUSHILIN001/article/details/81611732
个人觉得，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的时候要小心点