网上有很多教你怎么使用jQuery.data(..)来实现数据缓存，但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别，所以我用到了，研究下分享给大家。$("").data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象，当时我分别在使用它俩的时候真的吓我一跳，区别可大了，真是不用不知道，一用吓一跳。看例子先吧，后再根据源代码分析。
Js代码
test2 test3 test aaaa $(document).ready(function(){ $("#test").click(function(){ alert("JQUERY"); var e=$("div");//定义了两jquery对象 var w=$("div");//e是不等于w的。 //首先使用data([key],[value])用法。 $(e).data("a","aaaa");//分别在e和w上保存Key一样的数据， $(w).data("a","wwww");// 看它是否会覆盖前面的，虽然是保存在不同对象上。 alert($(e).data("a"));//你猜到答案了吗，里输出是wwww;是不是有点意外？ alert(e===w)//false alert($(w).data("a"));//这里也是wwww; //使用jQuery.data(element,[key],[value])来存放数据。 $.data(e,"b","cccc");//分别在e和w上保存Key一样的数据， $.data(w,"b","dddd");// 看它是否会覆盖前面的，虽然是保存在不同对象上。 alert($.data(e,"b"));//应该你能猜答案吧，输出cccc alert($.data(w,"b"));//这输出dddd }); }); 看了上面的例子是不是发现data([key],[value])与jQuery.data(element,[key],[value])两个根本就不一样了对吧？它们之间到底有没有关系呢。怎么data([key],[value])会覆盖前面key相同的值呢？而jQuery.data(element,[key],[value])只要是绑定到不同的对象上都不会造成覆盖。是这样吗？那来研究下它们的源代码吧。
先看jQuery.data(element,[key],[value])源代码。
Js代码jQuery.extend({ cache: {}, // Please use with caution uuid: 0, // Unique for each copy of jQuery on the page // Non-digits removed to match rinlinejQuery expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ), .... data: function( elem, name, data, pvt /* Internal Use Only */ ) { // 是否可以附加数据，不可以则直接返回 if ( !jQuery.acceptData( elem ) ) { return; } var privateCache, thisCache, ret, //jQuery.expando这是一个唯一的字符串，是这介jquery对象产生的时候就生成了。 internalKey = jQuery.expando, getByName = typeof name === "string", // 必须区分处理DOM元素和JS对象，因为IE6-7不能垃圾回收对象跨DOM对象和JS对象进行的引用属性 isNode = elem.nodeType, // 如果是DOM元素，则使用全局的jQuery.cache // 如果是JS对象，则直接附加到对象上 cache = isNode ? jQuery.cache : elem, // Only defining an ID for JS objects if its cache already exists allows // the code to shortcut on the same path as a DOM node with no cache id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey, isEvents = name === "events"; // 避免做