您的位置：首页 > Web前端 > JQuery

jquery中操作HTML5中的dataattributes

2013-07-01 17:54 106 查看

在HTML5 中，新增加了data-attributes属性，可以在页面级保存一些数据，比如：

<body>  
  <div data-site="www.codeguru.com" data-category="Technology">Hi, Welcome to HTML 5 data attributes!</div>

<div data-name="Dave" data-age=23 data-dept="Clerical">Hi Dave!</div>
</body>
</html>

而在jquery 中，可以通过.data的方法去获得和设置data attributes，比如：

<!DOCTYPE html>
<html>
	<head>
		<title>Untitled Page</title>5.
		<script type="text/javascript">
$("#btnSet").click(function(e) {
	$("#divEmployee").data("name", "Dave");
	$("#divEmployee").data("age", "23");
	$("#divEmployee").data("dept", "Clerical");
	10.
});</script>
	</head>
	<body>
		<div id="divEmployee">
			Hi Dave!
		</div>
		15.
		<input type="button" id="btnSet" value="Set Value" />
	</body>
</html>

可以看到设置了divEmployee的一系列属性，包括name,age,dept.

也可以用如下两个方法设置：

<script type="text/javascript">
$("#btnSet").click(function(e) {
	$("#divEmployee").data( {
		"name" : "Dave",
		"age" : 23,
		"dept" : "Clerical"
	});
});
</script>

<script type="text/javascript">
$("#btnSet").click(function(e) {
	$("#divEmployee").data("name", "age", "dept").data("Dave", 23, "Clerical");
});
</script>

而获取和删除的方法分别如下：

<script type="text/javascript">
$("#btnSet").click(function(e) {
	var name = $("#divEmployee").data("name")
	var age = $("#divEmployee").data("age")
	var dept = $("#divEmployee").data("dept")
});
</script>

<script type="text/javascript">
$("#btnSet").click(function(e) {
	$("#divEmployee").removeData("employee");
});</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航