jquery中操作HTML5中的dataattributes

在HTML5 中，新增加了data-attributes属性，可以在页面级保存一些数据，比如：
Java代码
1. <body>
2.   <div data-site="www.codeguru.com" data-category="Technology">Hi, Welcome to HTML 5 data attributes!</div>
3.
4. <div data-name="Dave" data-age=23 data-dept="Clerical">Hi Dave!</div>
5. </body>
6. </html>

而在jquery 中，可以通过.data的方法去获得和设置data attributes，比如：
Java代码
1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <title>Untitled Page</title>5.
5.         <script type="text/javascript">
6. $("#btnSet").click(function(e) {
7.     $("#divEmployee").data("name", "Dave");
8.     $("#divEmployee").data("age", "23");
9.     $("#divEmployee").data("dept", "Clerical");
10.     10.
11. });</script>
12.     </head>
13.     <body>
14.         <div id="divEmployee">
15.             Hi Dave!
16.         </div>
17.         15.
18.         <input type="button" id="btnSet" value="Set Value" />
19.     </body>
20. </html>

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

也可以用如下两个方法设置：
Java代码
1. <script type="text/javascript">
2. $("#btnSet").click(function(e) {
3.     $("#divEmployee").data( {
4.         "name" : "Dave",
5.         "age" : 23,
6.         "dept" : "Clerical"
7.     });
8. });
9. </script>
10.
11.

Java代码
1. <script type="text/javascript">
2. $("#btnSet").click(function(e) {
3.     $("#divEmployee").data("name", "age", "dept").data("Dave", 23, "Clerical");
4. });
5. </script>

   而获取和删除的方法分别如下：
Java代码
1.
2.     <script type="text/javascript">
3. $("#btnSet").click(function(e) {
4.     var name = $("#divEmployee").data("name")
5.     var age = $("#divEmployee").data("age")
6.     var dept = $("#divEmployee").data("dept")
7. });
8. </script>

Java代码
1.
2. <script type="text/javascript">
3. $("#btnSet").click(function(e) {
4.     $("#divEmployee").removeData("employee");
5. });</script>

摘自 jackyrong

补充：web前端 , JavaScript ,