元素的数据存储-jQuery.data()与.data()
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 ] )
