jQuery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style>
7 .left,
8 .right {
9 width: 300px;
10 height: 120px;
11 }
12 .left div,
13 .right div {
14 width: 100px;
15 height: 90px;
16 padding: 5px;
17 margin: 5px;
18 float: left;
19 border: 1px solid #ccc;
20 }
21 .left div {
22 background: #bbffaa;
23 }
24 .right div {
25 background: yellow;
26 }
27 </style>
28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
29 </head>
30 <body>
31 <h2>jQuery.data()静态方法</h2>
32 <div class="left">
33 <div class="aaron">
34 <p>点击看结果</p>
35 <p>jQuery.data</p>
36 </div>
37 <div><span></span></div>
38 </div>
39 <h2>.data()实例方法</h2>
40 <div class="right">
41 <div class="aaron">
42 <p>点击看结果</p>
43 <p>.data</p>
44 </div>
45 <div><span></span></div>
46 </div>
47 <script type="text/javascript">
48 $(‘.left‘).click(function() {
49 var ele = $(this);
50 //通过$.data方式设置数据
51 $.data(ele, "a", "data test1")
52 $.data(ele, "b", {
53 name : "data test2"
54 })
55 //通过$.data方式取出数据
56 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
57 ele.find(‘span‘).append(reset)
58 })
59 </script>
60 <script type="text/javascript">
61 $(‘.right‘).click(function() {
62 var ele = $(this);
63 //通过.data方式设置数据
64 ele.data("a", "data test1")
65 ele.data("b", {
66 name: "data test2"
67 })
68 //通过.data方式取出数据
69 var reset = ele.data("a") + "</br>" + ele.data("b").name
70 ele.find(‘span‘).append(reset)
71 })
72 </script>
73 </body>
74
75 </html>
同样的,jQuery也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] ) .removeData( [name ] )
时间： 2024-10-12 22:45:52