`

jquery中操作HTML5中的dataattributes

html5jquery 
阅读更多
在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>
1
顶
0
踩
分享到：
| android中从图库中选取图片
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics