先来解一道题 HTML：
代码语言：javascript复制<div id="myDiv" data-x="x-value"></div>JavaScript：
代码语言：javascript复制console.log( $.data( $div.get(0) ) );
console.log( $div.data() );
console.log( $.data( $div.get(0) ) );data 方法的定义是：
这里只从 jQuery 的源码分析入手，版本是3.2.1
1. $.data() 方法
代码语言：javascript复制data: function( elem, name, data ) {
return dataUser.access( elem, name, data );
},其中 dataUser 是一个Data() 对象，Data对象没有任何特殊的地方。
access 方法：
代码语言：javascript复制access: function( owner, key, value ) {
if ( key === undefined ||
( ( key && typeof key === "string" ) && value === undefined ) ) {
return this.get( owner, key );
}this.set( owner, key, value );
return value !== undefined ? value : key;
},可以看到，$.data(ele) 只会去读取dataUser 结构中存在的数据，而不会去读dom 节点上的 Data 属性相关值。所以，暂时可以认为第一个输出和第二个输出都是一个空对象。
2. $Dom.data();
代码语言：javascript复制data: function( key, value ) {
var i, name, data,elem = this[ 0 ],
attrs = elem && elem.attributes;
......
return data;
......
}
},省略绝大部分代码，可以看到，该方法去读取了元素的 attribute，最后返回的 data 会是在attribute 属性中获得的。所以，第二句打印出来的是{x:"x-value"}.
除此之外，它还会 在 dataUser 的 Cache 中存入此次读出来的 data 数据。所以，第三句打印出来的也应该是{x:'x-value'}。
