jquery $.data()方法的使用

最新推荐文章于 2021-08-13 11:21:28 发布

黄宝康

最新推荐文章于 2021-08-13 11:21:28 发布

阅读量2.6k

点赞数

分类专栏： jquery 文章标签： jquery $.data()方法的使用

本文链接：https://blog.csdn.net/huangbaokang/article/details/83651590

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

$.data()可以用来设置DOM元素的data-*属性，也可以用来获取DOM元素的data-*的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>$.data()的使用</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<div id="my">测试$.data()</div>
	<button id="set">设置值</button>
	<button id="get" data-someName="test">获取值</button>

	<script type="text/javascript">
	$(function(){
		// 设置data值
		$("#set").click(function(){
			$("#my").data("lover","zhanglulu");
		});

		// 获取data值
		$("#get").click(function(){
			alert($("#my").data("lover"));// 弹出zhanglulu
			alert($(this).data("somename"));// 这里必须写成小写，写成someName会弹窗undefined
			
			alert(this.dataset.someName);//注意获取自身的data属性时，名称会自动转小写
			console.log(this.dataset);//可以看到已经转小写了，控制台输出{somename: "test"}
		});
	});
	</script>
</body>
</html>

这里需要注意的是自身的data-*属性需要注意大小写的问题。