jquery $.data()方法的使用

$.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-*属性需要注意大小写的问题。

猜你喜欢

转载自blog.csdn.net/huangbaokang/article/details/83651590
今日推荐