test2test3testaaaa$.ready{$.click{alert;vare=$;//定义了两jquery对象varw=$;//e是不等于w的。//首先使用data.data("a","aaaa");//分别在e和w上保存Key一样的数据,$.data("a","wwww");//看它是否会覆盖前面的,虽然是保存在不同对象上。alert.data;//你猜到答案了吗,里输出是wwww;是不是有点意外?alert//falsealert.data;//这里也是wwww;//使用jQuery.data(element,[key],[value])来存放数据。$.data(e,"b","cccc");//分别在e和w上保存Key一样的数据,$.data(w,"b","dddd");//看它是否会覆盖前面的,虽然是保存在不同对象上。alert($.data;//应该你能猜答案吧,输出ccccalert($.data;//这输出dddd});});

大家看张图。

看jQuery.data(element,[key],[value]卡塔尔源代码后能够了解,每一个element都会有谈得来的八个{key:value}对象保存着多少,所以新建的靶子就是有key雷同它也不会覆盖原来存在的指标key所对应的value,因为新目的保存是是在另三个{key:value}对象中。接下来要剖析data源代码应用到了each,在深入分析它早先先看下each用法和源代码。

代码如下:

总结

网络有许多教您怎么使用jQuery.data来促成数量缓存,但有八个客商时时接纳的data和jQuery.data(element,[key],[value]State of Qatar,少之甚少说清楚它们的区分,在那作者想差十分少的证实下:$.data与jQuery.data(element,[key],[value]卡塔尔国,这三个函数都以用来在要素上存放数据也就平常所说的多寡缓存,都回到jQuery对象,这时候本人分别在应用它俩的时候确实吓小编风度翩翩跳,分歧可大了,真是不用不掌握,生机勃勃用吓意气风发跳。看例子先吧,后再依靠源代码解析。

//args作为内部成员的调用来使用each:function{varname,i=0,length=object.length;//当object为jQuery对象时,length非空if{if{forif(callback.apply===false)break;}elseforif(callback.apply===false)break;//以下是客户端程序进行调用}else{if{forif(callback.call(object[name],name,object[name])===false)break;}else//i表示索引值,value表示DOM元素for(varvalue=object[0];i现在我们关注下 for ( var value = object[0]; i < length && callback.call !== false; value = object[++i] ){} 这句代码;其中object[0]取得jQuery对象中的第一个DOM元素,通过for循环,得到遍历整个jQuery对象中对应的每个DOM元素,通过callback.call; 将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;其中callback是类似于 function { } 的方法。所以就得到 $.each{ });再来看看data的源代码。jQuery.fn.extend({data:function{varparts,part,attr,name,l,elem=this[0],i=0,data=null;//Getsallvaluesif{.....//处理没有Key的情况,这里不是我们要讨论的returndata;}//Setsmultiplevaluesif(typeofkey==="object"){returnthis.each{jQuery.data;}parts=key.split;parts[1]=parts[1]?"."+parts[1]:"";part=parts[1]+"!";returnjQuery.access{if{。。。//这里是没有value时,是索取返回值的情况,这不是我们讨论}parts[1]=value;//如果我使用用$.data("a","aaa")),下面调用each前的this指的是$这返回的对象,this.each{//注意了,这里是以每一个匹配的元素作为上下文来执行一个函数varself=jQuery;self.triggerHandler("setData"+part,parts);//这里在元素上存放数据,本质还是委托data(element,[key],[value])来做的。//看前面有分析过了。//下面data里的this指的是遍历整个jQuery对象中对应的每个DOM元素//$它对应页面中一个数组。jQuery.data;//这名句会被循环多次执行,也就是保存数据。//这里就是核心一句话。但要清楚看上面了它是在each中的。self.triggerHandler("changeData"+part,parts);});},null,value,arguments.length>1,null,false);},//在元素上移除存放的数据。具体实现如下:removeData:function{returnthis.each{jQuery.removeData;如果对于data的源代码不是很了解,好吧,我就用一个例子来模仿实现它吧。Js代码:复制代码代码如下:test2test3testaaaa$.ready{$.click{alert;vari=0;$.each;//&#21482;&#36755;&#20986;1;&#22240;&#20026;&#21482;&#26377;&#19968;&#20010;&lt;divid=&amp;quot;abc3&amp;quot;&gt;});alert;varj=1;$.each{//&#20197;&#27599;&#19968;&#20010;&#21305;&#37197;&#30340;&#20803;&#32032;&#20316;&#20026;&#19978;&#19979;&#25991;&#26469;&#25191;&#34892;&#36825;&#20010;&#20989;&#25968;$.data(this,&amp;quot;a&amp;quot;,&amp;quot;wwww&amp;quot;);//&#36825;&#37324;&#30340;this&#23601;&#26159;&#25351;$&#65292;//&#20998;&#21035;&#36941;&#21382;&#27599;&#19968;&#20010;&#21305;&#37197;&#30340;&#20803;&#32032;&#32473;&#23427;&#20204;&#27599;&#19968;&#20010;&#23545;&#35937;{}&#37117;&#20445;&#23384;&#19968;&#20010;key/valuealert;//&#20998;&#21035;&#36755;&#20986;1&#65292;2&#65292;3&#22240;&#20026;&#26377;&#19977;&#20010;&lt;div&gt;&#20803;&#32032;});alert.data;//&#36820;&#22238;wwww,//&#26159;&#19981;&#26159;&#24456;&#24778;&#21568;&#65292;&#25105;&#27809;&#26377;&#20445;&#23384;&#22312;&#23427;&#36523;&#19978;&#21834;&#65292;&#24590;&#20040;&#20063;&#26377;&#20540;&#65292;&#24456;&#26126;&#26174;&#26159;&#23427;&#26159;&#26597;&#36825;&#20010;div&#33410;&#28857;&#19978;&#26377;&#27809;&#26377;&#65292;//&#32943;&#23450;&#26159;&#26377;&#20540;&#20102;&#65292;&#22240;&#20026;&#19978;&#38754;&#32473;&#24490;&#29615;&#20445;&#23384;&#22312;div&#36825;Dom&#32467;&#28857;&#19978;&#20102;&#12290;alert===$;//false&#35777;&#26126;&#20004;&#26032;&#24314;&#30340;&#23545;&#35937;&#19981;&#26159;&#21516;&#19968;&#20010;&#12290;alert.data;//&#36820;&#22238;wwww,//&#36825;&#37324;&#20063;&#26159;&#19968;&#26679;&#22240;&#20026;&#26159;div&#33410;&#28857;&#19978;&#37117;&#20445;&#23384;&#20102;&amp;quot;a&amp;quot;=&amp;quot;wwww&amp;quot;&#36825;&#26679;&#19968;&#20010;&#38190;&#20540;&#23545;&#20102;&#12290;});});
jQuery.fn=jQuery.prototype={each:function{returnjQuery.each;}}
test2test3testaaaa$.ready{$.click{alert;vari=0;$.each;//&#21482;&#36755;&#20986;1;&#22240;&#20026;&#21482;&#26377;&#19968;&#20010;&lt;divid=&amp;quot;abc3&amp;quot;&gt;});alert;varj=0;$.each;//&#20998;&#21035;&#36755;&#20986;1&#65292;2&#65292;3;&#22240;&#20026;&#26377;&#19977;&#20010;&lt;div&gt;&#25152;&#20197;&#24490;&#29615;&#19977;&#36941;});});});

看了上面的例子是还是不是意识data与jQuery.data(element,[key],[value]卡塔尔三个向来就差别等了对吗?它们中间究竟有未有关系吧。怎么data会覆盖前边key雷同的值吗?而jQuery.data(element,[key],[数据解读学习data和jQuery.data(element,[key],[value])-Web前端之家。value]State of Qatar只要是绑定到分歧的目的上都不会导致覆盖。是这么呢?那来钻探下它们的源代码吧。先看jQuery.data(element,[key],[value])源代码。如下:

现在对data与jQuery.data(element,[key],[数据解读 ,value]卡塔尔(قطر‎都有理解了啊,如若依旧半懂,再回头多看二回,耐烦地明白一下。其实表面上特不一样等。但本质上恐怕有关系的,今后通晓原理后就足以请放心地采用了。jQuery.data(element,[key],[value]卡塔尔国只把数据绑定到参数element节点上。data,如$.data(“a”,”aaaa”卡塔尔它是把多少绑定每贰个相称div节点的成分上。

现行反革命来看each方法的切实可行落到实处如下:

能够看出它回到的是全局的each方法,而且将本身jQuery对象做为参数给它,全局的each方法的活龙活现落实如下:

jQuery.extend({cache:{},//Pleaseusewithcautionuuid:0,//UniqueforeachcopyofjQueryonthepage//Non-digitsremovedtomatchrinlinejQueryexpando:"jQuery"+(jQuery.fn.jquery+Math.random.replace,....data:function(elem,name,data,pvt/*InternalUseOnly*/){//是否可以附加数据,不可以则直接返回if(!jQuery.acceptData{return;}varprivateCache,thisCache,ret,//jQuery.expando这是一个唯一的字符串,是这介jquery对象产生的时候就生成了。internalKey=jQuery.expando,getByName=typeofname==="string",//必须区分处理DOM元素和JS对象,因为IE6-7不能垃圾回收对象跨DOM对象和JS对象进行的引用属性isNode=elem.nodeType,//如果是DOM元素,则使用全局的jQuery.cache//如果是JS对象,则直接附加到对象上cache=isNode?jQuery.cache:elem,//OnlydefininganIDforJSobjectsifitscachealreadyexistsallows//thecodetoshortcutonthesamepathasaDOMnodewithnocacheid=isNode?elem[internalKey]:elem[internalKey]&&internalKey,isEvents=name==="events";//避免做更多的不必要工作,当尝试在一个没有任何数据的对象上获取数据时//对象没有任何数据,直接返回if((!id||!cache[id]||(!isEvents&&!pvt&&!cache[id].data))&&getByName&&data===undefined){return;}//id不存在的话就生成一个if{//OnlyDOMnodesneedanewuniqueIDforeachelementsincetheirdata//endsupintheglobalcacheif{//如果是DOM元素则在元素上产生唯一的ID并且以jQuery.expando//为属性值为id保存在elem元素上,以便以后再根据jQuery.expando来查找ID。elem[internalKey]=id=++jQuery.uuid;}else{//JS对象则直接使用jQuery.expando,既然是直接附加到对象上,又何必要id呢?//避免与其他属性冲突!id=internalKey;}}////当我们试着访问一个键是否含有值的时候,如果不存在jQuery.cache[id]值,//初始化jQuery.cache[id]值为一个空对象{}if{cache[id]={};if{cache[id].toJSON=jQuery.noop;}}//AnobjectcanbepassedtojQuery.datainsteadofakey/valuepair;thisgets//shallowcopiedoverontotheexistingcache//data是接收对象和函数,浅拷贝if(typeofname==="object"||typeofname==="function"){if{cache[id]=jQuery.extend;}else{cache[id].data=jQuery.extend;}}/存储对象,存放了所有数据的映射对象privateCache=thisCache=cache[id];//jQuerydata()isstoredinaseparateobjectinsidetheobject'sinternaldata//cacheinordertoavoidkeycollisionsbetweeninternaldataanduser-defined//data.//jQuery内部数据存在一个独立的对象(thisCache.data==thisCache[internalKey])//上,为了避免内部数据和用户定义数据冲突if{//存放私有数据的对象不存在,则创建一个{}if{thisCache.data={};}//使用私有数据对象替换thisCachethisCache=thisCache.data;}//如果data不是undefined,表示传入了data参数,则存储data到name属性上if{//jQuery.camelCase作用是如果传入的是object/function,不做转换,//只有传入的name是字符串才会转换。所以最终保存下来的是key/value对;thisCache[jQuery.camelCase]=data;}//从这以后下面的代码都是处理data:functiondata为空,求返回值data的情况了。if(isEvents&&!thisCache[name]){returnprivateCache.events;}//如果name是字符串,则返回data//如果不是,则返回整个存储对象if{//FirstTrytofindas-ispropertydataret=thisCache[name];//Testfornull|undefinedpropertydataif{//TrytofindthecamelCasedpropertyret=thisCache[jQuery.camelCase];}}else{ret=thisCache;}returnret;},............});

昨日意气风发篇小说我们享受了豆蔻年华篇文章“你对jQuery.data的生龙活虎部分学问,明日那篇随笔大家越来越读书,用它来落到实处数据缓存。

那些知识相对于刚(Yu-Gang卡塔尔(قطر‎入门的童鞋来讲,大概有些懵,不过足以稳步学习。

相关文章

网站地图xml地图