码迷,mamicode.com
首页 > Web开发 > 详细

元素的数据存储-jQuery.data()与.data()

时间:2016-05-07 23:38:21      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

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 ] )

元素的数据存储-jQuery.data()与.data()

标签:

原文地址:http://www.cnblogs.com/muqiangwei/p/5469379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!