jquery中操作HTML5中的dataattributes
在HTML5 中，新增加了data-attributes属性，可以在页面级保存一些数据，比如：
而在jquery 中，可以通过.data的方法去获得和设置data attributes，比如：
可以看到设置了divEmployee的一系列属性，包括name,age,dept.
也可以用如下两个方法设置：
而获取和删除的方法分别如下：
<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>