版权声明：本文为博主原创文章，转载注明地址：http://blog.csdn.net/wang704987562 https://blog.csdn.net/wang704987562/article/details/81810867
前言
使用data()方法给元素添加data-*属性是很常见的操作，但是data()方法操作的数据保存在jQuery内部，而并没有改变DOM的属性。看下例子
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq-data()</title>
<style>
.container {
width: 750px;
border: 1px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container" data-name="wzx"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/x-javascript">
$(document).ready(function() {
//设置data-name
$(".container").data("name", "wzx1");
console.log("name:" + $(".container").data("name"));
//修改data-name
$(".container").data("name", "wzx123");
console.log("name:" + $(".container").data("name"))
});
</script>
</html>console输出的值已经修改了
但是DOM对应的data-*属性却没有修改
如果要修改DOM对应的属性，使用attr()方法