jQuery.data()和html5 dataset

新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用，以及包括jQuery在内的四种存取方式。
html代码:

<div id="user" data-uid="123456" data-uname="html5" data-date-of-birth>哈哈</div>  

一）使用attribute方法能够存取 data-* 自定义属性的值: 
    所有的现代浏览器中都能正常工作，但它不是HTML 5 的自定义 data-*属性被使用目的。 

// 使用getAttribute获取 data- 属性  
var user = document . getElementById ( 'user' ) ;  
var userName = plant . getAttribute ( 'data-uname' ) ; //  'html5'  
var userId = plant . getAttribute ( 'data-uid' ) ; //  '123456'  
// 使用setAttribute设置 data- 属性  
user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;  

二）dataset属性存取data-*自定义属性的值： 
   通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值，dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。 
   兼容性：Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器 
1）不是使用完整的属性名，要去掉data- 前缀 
2）属性名如果包含了连字符，连字符将被去掉，并转换为驼峰式的命名，例如：data-date-of-birth  --->dateOfBirth 

var el = document.querySelector('#user');  
console.log(el.uid); // 'user'  
console.log(el.dataset);//一个DOMStringMap  
console.log(el.dataset.uid); // '123456'  
console.log(el.dataset.uname); // 'html5'  
console.log(el.dataset.dateOfBirth); // ''  
el.dataset.dateOfBirth = '2015-03-26'; // 设置data-date-of-birth的值.  
console.log('someDataAttr' in el.dataset);//false  
el.dataset.someDataAttr = 'mydata';  
console.log('someDataAttr' in el.dataset);//true  

接下来我们看看jQuery中的data()    
     作用：在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 
     语法：.data( key, value ) 
            value为新的数据值，可以是任意的Javascript数据类型，除了undefined。 
     语法：.data( obj ) 
            一个用于更新数据的 键/值对。

  <div>  
    The values stored were  
    <span></span>  
    and  
    <span></span>  
  </div>  
//输出：The values stored were 16 and pizza!  
<script>  
$("div").data("test", { first: 16, last: "pizza!" });  
$("span:first").text($("div").data("test").first);  
$("span:last").text($("div").data("test").last);  
</script>  

详细:https://www.cnblogs.com/summa/p/4561474.html