jQuery 学习-样式篇（九）：jQuery 存储和删除元素私有数据的方法

本文链接：https://blog.csdn.net/xzk9381/article/details/112214561

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/112214561，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

html5 dataset 是新的 HTML5 标准，允许在普通的元素标签中嵌入类似 data-* 的属性。有了这个属性就可以更加有序直观的进行数据预设或存储。

那么如果在不支持 HTML5 标准的浏览器上，jQuery 提供了一个 .data() 方法来处理这个问题。

一、设置或返回元素的数据接口

使用 $.data() 方法可以设置或返回元素的数据接口，该方法可以向其中传递 2 个或 3 个参数。如果传递 2 个参数，那么就是指定标签和一个 JSON 对象。如果传递三个参数，则是指定标签、key 和 value：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$.data(mydiv,'age','18');
			$.data(mydiv,{
				'name':'xuzk',
				'sex':"male"
			})
		})
	</script>
</head>
<body>
	<div id='mydiv'></div>
</body>
</html>

这样设置好的数据，在元素中是无法直接查看的，可以使用 $.data() 方法来返回这些数据：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$.data(mydiv,'age','18');
			$.data(mydiv,{
				'name':'xuzk',
				'sex':"male"
			})

			console.log($.data(mydiv));
			console.log($.data(mydiv,'age'));
		})
	</script>
</head>
<body>
	<div id='mydiv'></div>
</body>
</html>

可以直接指定元素名称，这样会以 JSON 的方式返回所有数据。也可以直接指定数据的 key 来返回对应的 value。

二、删除元素的数据接口

使用 $.removeData 可以删除指定元素数据接口中的指定数据或全部数据：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$.data(mydiv,'age','18');
			$.data(mydiv,{
				'name':'xuzk',
				'sex':"male"
			})

			$.removeData(mydiv,'age');
			console.log($.data(mydiv));
			$.removeData(mydiv);
			console.log($.data(mydiv));
		})
	</script>
</head>
<body>
	<div id='mydiv'></div>
</body>
</html>