jquery 设置数据属性值

📌 相关文章

📜 jquery 设置数据属性值 - Java (1)

📅 最后修改于: 2023-12-03 14:43:19.041000 🧑 作者: Mango

在前端开发中，设置数据属性值对于数据的传递和操作非常方便。Jquery提供了一种很简单的方法来设置数据属性值。

语法

$(selector).data(key, value);

参数

selector: 必需，被选元素。
key: 必需，属性名。
value: 必需，属性值。

实例

<!DOCTYPE html>
<html>
<head>
	<title>jquery 设置数据属性值</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	<p>请点击下面的链接增加计数器：</p>
	<a href="#" id="count">点击这里</a>
	<p id="result"></p>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#count").click(function(){
				var count = ($(this).data("count") || 0) + 1;
				$(this).data("count", count);
				$("#result").text("计数器：" + count);
			});
		});
	</script>
</body>
</html>

代码解释：

当点击链接时，执行一个匿名函数。
定义count变量。如果这个属性不存在，则设置为0。
使用jquery的data()方法设置count属性，并把计数器显示出来。

总结

Jquery的data()方法是非常灵活和方便的设置数据属性值的方法。它支持直接设置属性值，还可以获取，修改和删除属性值。在前端开发中，它是一个非常有用的工具，帮助开发人员更加方便快速地操作数据。