3-9 jQuery的属性与样式之元素的数据存储
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery的属性与样式之元素的数据存储

html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取?  jQuery就提供了一个.data()的方法来处理这个问题

使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化，比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了，常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的

jQuery提供的存储接口

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。

我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险

通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了

同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了

jQuery.removeData( element [, name ] )
.removeData( [name ] )

参考右边的代码区域，2个代码段分别描述了静态与实例data的使用

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left,
  9.     .right {
  10.         width: 300px;
  11.         height: 120px;
  12.     }
  13.  
  14.     .left div,
  15.     .right div {
  16.         width: 100px;
  17.         height: 90px;
  18.         padding: 5px;
  19.         margin: 5px;
  20.         float: left;
  21.         border: 1px solid #ccc;
  22.     }
  23.  
  24.     .left div {
  25.         background: #bbffaa;
  26.     }
  27.  
  28.     .right div {
  29.         background: yellow;
  30.     }
  31.     </style>
  32.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  33. </head>
  34.  
  35. <body>
  36.     <h2>jQuery.data()静态方法</h2>
  37.     <div class="left">
  38.         <div class="aaron">
  39.             <p>点击看结果</p>
  40.             <p>jQuery.data</p>
  41.         </div>
  42.         <div><span></span></div>
  43.     </div>
  44.     <h2>.data()实例方法</h2>
  45.     <div class="right">
  46.         <div class="aaron">
  47.             <p>点击看结果</p>
  48.             <p>.data</p>
  49.         </div>
  50.         <div><span></span></div>
  51.     </div>
  52.     <script type="text/javascript">
  53.     $('.left').click(function() {
  54.         var ele = $(this);
  55.         //通过$.data方式设置数据
  56.         $.data(ele, "a", "data test")
  57.         $.data(ele, "b", {
  58.             name : "慕课网"
  59.         })
  60.         //通过$.data方式取出数据
  61.         var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
  62.         ele.find('span').append(reset)
  63.     })
  64.     </script>
  65.     <script type="text/javascript">
  66.     $('.right').click(function() {
  67.         var ele = $(this);
  68.         //通过.data方式设置数据
  69.         ele.data("a", "data test")
  70.         ele.data("b", {
  71.             name: "慕课网"
  72.         })
  73.         //通过.data方式取出数据
  74.         var reset = ele.data("a") + "</br>" + ele.data("b").name
  75.         ele.find('span').append(reset)
  76.     })
  77.     </script>
  78. </body>
  79.  
  80. </html>
  81.  
返回课程