分析
一、jQuery对象访问
1. 【each(callback)】
例子:
HTML代码 | jQuery代码 | 运行结果 |
<img/><img/> | $("img").each(function(i){ | [ <img src=/uploadfile/201101/18/9D95820334.jpg" />, <img src=/uploadfile/201101/18/DA95820914.jpg" /> ] |
<img/><img/> | $("img").each(function(){ | 切换样式example |
现在来看each方法的具体实现如下:
jQuery.fn = jQuery.prototype = {
可以看到它返回的是全局的each方法,并且将自身jQuery对象做为参数给它,全局的each方法的具体实现如下:
现在我们关注下 for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 这句代码;
其中object[0]取得jQuery对象中的第一个DOM元素,通过for循环,得到遍历整个jQuery对象中对应的每个DOM元素,通过callback.call( value,i,value); 将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;其中callback是类似于 function(index, elem) { } 的方法。所以就得到 $("").each(function(index, elem){ });
2. 【size()】和【length】
这两个都是得到jQuery 对象中元素的个数,具体实现如下:
3. 【selector】和【context】
selector返回传给jQuery()的原始选择器。
context返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
4. 【get()】和【get(index)】
get()取得所有匹配的 DOM 元素集合。
get(index)取得其中一个匹配的DOM元素,index表示取得第几个匹配的元素。
$(this).get(0)与$(this)[0]等价。
现在看下get方法的具体实现如下:
当不包含num时,调用jQuery.makeArray方法,具体实现如下:
makeArray: function( array ) {可以看出这里的array为jQuery对象,因此执行 while( i ) ret[--i] = array[i]; , 返回的是以array所有匹配的DOM元素所组成的数组。这和前面的定义相一致。
当包含num时,直接返回 this[ num ],所以这样验证了 $(this).get(0)与$(this)[0]等价 的说明。
5. 【index(subject)】
搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
例子
HTML代码 | jQuery代码 |
<div id="foobar"><div></div><div id="foo"></div></div> | $("div").index($(''#foobar'')[0]) // 0 |
现在看下index方法的具体实现如下:
index: function( elem ) {继续查看jQuery.inArray方法,具体实现如下:
inArray: function( elem, array ) {一目了然,返回elem的索引值。
二、数据缓存
1. 【data(name)】和【data(name,value)】
data(name)返回元素上储存的相应名字的数据,可以用data(name, value)来设定。
data(name,value)在元素上存放数据,同时也返回value。
例子
HTML代码 | jQuery代码 |
<div></div> | $("div").data("blah"); // undefined |
<div></div> | $("div").data("test", { first: 16, last: "pizza!" }); |
现在来看看data方法的具体实现:
点击展开当我们要在元素上存放数据的时候,比如 $("div").data("blah","hello"); 将执行这句代码:
return this.trigger("setData" + parts + "!", [parts[0], value]).each(function(){jQuery.data( this, key, value );});我们看下jQuery.data(this,key,value);这句代码,继续展开jQuery.data方法的具体实现以及相关其他代码:
点击展开其中这句代码
if ( data !== undefined )
jQuery.cache[ id ][ name ] = data;
将data存储在cache对象中。
当我们需要返回元素上储存的相应名字的数据的时候,比如 $("div").data("blah"); 主要将执行这句代码:
data = jQuery.data( this[0], key );
最后将返回一个保存在 jQuery.cache[ id ][ name ] 中的数据。
2. 【removeData(name)】
在元素上移除存放的数据。具体实现如下:
继续展开jQuery.removeData方法的具体实现:
点击展开HTML 代码 | jQuery 代码 |
<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } span { color:red; } </style> <button id="show">Show Length of Queue</button> <span></span> <div></div> | $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:''+=200''},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:''-=200''},1500); $("div").hide("slow"); $("div").show(1200); } runIt(); |
<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> Click here <div></div> | $(document.body).click(function () { $("div").show("slow"); $("div").animate({left:''+=200''},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:''-=200''},500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }); |
<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <button id="start">Start</button> <button id="stop">Stop</button> <div></div> | $("#start").click(function () { $("div").show("slow"); $("div").animate({left:''+=200''},5000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:''-=200''},1500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }); $("#stop").click(function () { $("div").queue("fx", ); $("div").stop(); }); |
由于div节点产生动画效果,每条动画就调用一个jQuery.data方法,将每条动作保存在jQuery.cache中,就形成了缓存队列。至于div节点产生动画效果如何调用jQuery.data方法会在以后的章节中介绍。
请看第一行的例子,可以看到这里包含7条动作效果,也就是在还没有执行它们以前,如果调用 var n = $("div").queue("fx"); 返回一个队列对象n,查看该对象的长度,发现队列长度为7,而每执行完一条动作,队列长度就会减1。
再看第二行的例子,queue的第一个参数为一个函数,当执行完这个自定义函数后,要继续执行队列,这要调用dequeue方法。
再看第三行的例子,queue的第二个参数为一个数组,实际上它可以是一个新队列或者现有队列去替代当前队列,其中新队列或者现有队列的值和queue(callback)相同。
现在看看queue的具体实现:
queue: function(type, data){其中 if(typeof type !== "string") { data = type; type = "fx"; } 可以得出fx为默认的队列名称。继续查看jQuery.queue方法:
queue: function( elem, type, data ) {归根结底最后通过jQuery.data从jQuery.cache对象获得数据。jQuery.isArray(data) 判断是否是新队列或者现有队列数组。
4. 【dequeue([name])】
从队列最前端移除一个队列函数,并执行它。
dequeue的具体实现为:
然后查看jQuery.dequeue方法的具体实现如下:
dequeue: function( elem, type ){可以发现最后通过 fn=queue.shift();或者fn=queue[0]得到队列的第一个元素,然后fn.call(elem);去执行它。
好了,jQuery对象访问和数据缓存的原理机制就是这样的。
谢谢大家阅读 !