jquery为DOM元素缓存数据

定义和用法

1.$.data() 函数用于在指定的元素上存取数据，返回设置值。

提示： 1.这是一个底层方法，.data() 方法更方便使用。 
2.通过 data() 函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。 

用法一：

$.data( element, key, value )

其中element为我们自己需要缓存数据的dom元素，key就是键，value就是缓存的值。

假设我的页面有一个id为dom1的div元素，我想给这个dom元素缓存一个数据，名字叫number，值为999，方便我在下次为这个div写一些事件的时候直接从这个div的缓存中取到number。我之前也有疑问，这需要缓存么，给这个div设置一个属性叫number，赋值为999不得了么，可是代码越写到后面越发明白缓存的重要性，就这么说，假如我们设置属性，那么在我们获取的时候，用户是由可能通过浏览器修改页面的（不少用户也知道F12打开调试改html的，比如说我自己*---*），这样我们再去获取时，可能就已经是用户修改的脏数据了，很不安全。通过缓存，就可以很好的解决问题，用户是还是很难去修改内存数据的，而且数据也对其不可见。

见代码：

var a=document.getElementById('dom1');
$.data(a,'number',999);

a是我获取到的dom元素，下面一行就是为这个dom缓存number=999的这个数据。

如果要取缓存的值，很简单var value=$('div#dom1').data('number')，这样就可以取到缓存在这个div上的number值了

这里强调一下获取到的a对象，这是个dom对象，现在我们普遍都用jquery了，再取id为dom1是可能都会这么写var a=$('div#dom1')，这样写也是取到了元素，但是这里的a就是一个jquery对象，并不是dom对象，如果不转换的话，

$.data(a,'number',999);这一句是无法添加缓存的

我们如果使用jquery获取的对象，可以这么写

$.data(a.get(0),'number',999);

a是jquery对象，a.get(0)就把jquery对象转换成了dom对象，之后就可以缓存数据啦！

用法二：

jqueryObj.data(key, value )

这个其实就是选中的jquery对象直接缓存，还用上面的a举例子

var a=$('div#dom1');
a.data('number',999);

取值还是一样的，不过就是把方法一的第一个目标对象提取出来，再调用.data()进行缓存。

两种方法，推荐使用第一种方法！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

原因：

根据测试，前一种写法要后前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是

定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。