jQuery内核解读-迭代器

读这篇文章前，建议先读以下基础解读
jQuery内核解读-原型继承
jQuery内核解读-选择器

jQuery对象就是对象和数组的混合体，但是它不拥有数组的方法，因为它的结构是人为附加的，也就是说它不是Array数据类型，而是Object数据型。那么如何实现在jQuery对象上调用html()方法，并实现操作jQuery对象所有的DOM元素呢？

jQuery定义了一个each()工具函数，利用这个工具可以遍历jQuery对象中所有的DOM元素，并把所需要操作的内容封装到一个回调函数中，然后通过每个DOIM元素上调用这个回调函数。

view plain复制代码print?

1. <SPAN></SPAN>  
2.  <SPAN></SPAN>  
3. <SPAN></SPAN>  
4. <SPAN></SPAN>  

view plain复制代码print?

1. var $=jQuery=function(selector,context){   
2.     return new jQuery.fn.init(selector,context);//定义选择器的实例   
3. }   
4. jQuery.fn=jQuery.prototype={//jQuery类的原型对象   
5.     init:function(selector,context){//定义选择器构造器   
6.         selector = selector || document;//设置默认值为document   
7.         context = context || document;//设置默认值为document   
8.         if( selector.nodeType ){ //如果选择符为节点对象   
9.             this[0] = selector;//把参数节点传递给实例对象的数组   
10.             this.length = 1;//并设置实例对象的length属性，定义包含的元素个数   
11.             this.context = selector;//设置实例的属性，返回选择范围   
12.             return this;//返回当前实例   
13.         }   
14.         if( typeof selector==='string'){   
15.             var e = context.getElementsByTagName(selector); //获取指定名称的元素   
16.             for(var i =0;i<e.length;i++){//遍历元素集合，并把所有元素填入当前实例数组中   
17.                 this[i] = e[i];   
18.             }   
19.             this.length = e.length;//设置实例的length属性，即定义包含的元素个数   
20.             this.context = selector;//设置实例的属性，返回选择范围   
21.             return this;//返回当前实例   
22.         }   
23.         else{   
24.             this.length = 0;//否则设置实例的length属性值为0   
25.             this.context = selector;//设置实例的属性，返回选择范围   
26.             return this;//返回当前实例   
27.         }   
28.     },   
29.     jQuery:"1.3.2",   
30.     size:function(){   
31.         return this.length;   
32.     },   
33.     html:function(val){   
34.         jQuery.each(this,function(val){   
35.             this.innerHTML = val;   
36.         }, val);   
37.     }   
38. };   
39. jQuery.fn.init.prototype=jQuery.fn;   
40.   
41. //扩展jQuery工具函数   
42. jQuery.each=function(object, callback, args){   
43.     for(var i=0; i<object.length; i++){   
44.         callback.call(object[i],args);   
45.     }   
46.     return object;   
47. }   
48. $('span').html('1');  

var $=jQuery=function(selector,context){
	return new jQuery.fn.init(selector,context);//定义选择器的实例
}
jQuery.fn=jQuery.prototype={//jQuery类的原型对象
	init:function(selector,context){//定义选择器构造器
		selector = selector || document;//设置默认值为document
		context = context || document;//设置默认值为document
		if( selector.nodeType ){ //如果选择符为节点对象
			this[0] = selector;//把参数节点传递给实例对象的数组
			this.length = 1;//并设置实例对象的length属性，定义包含的元素个数
			this.context = selector;//设置实例的属性，返回选择范围
			return this;//返回当前实例
		}
		if( typeof selector==='string'){
			var e = context.getElementsByTagName(selector); //获取指定名称的元素
			for(var i =0;i<e.length;i++){//遍历元素集合，并把所有元素填入当前实例数组中
				this[i] = e[i];
			}
			this.length = e.length;//设置实例的length属性，即定义包含的元素个数
			this.context = selector;//设置实例的属性，返回选择范围
			return this;//返回当前实例
		}
		else{
			this.length = 0;//否则设置实例的length属性值为0
			this.context = selector;//设置实例的属性，返回选择范围
			return this;//返回当前实例
		}
	},
	jQuery:"1.3.2",
	size:function(){
		return this.length;
	},
	html:function(val){
		jQuery.each(this,function(val){
			this.innerHTML = val;
		}, val);
	}
};
jQuery.fn.init.prototype=jQuery.fn;

//扩展jQuery工具函数
jQuery.each=function(object, callback, args){
	for(var i=0; i<object.length; i++){
		callback.call(object[i],args);
	}
	return object;
}
$('span').html('1');

注意：代码中，each()函数的当前作用对象是jQuery对象，故this指向当前jQuery对象，即this表示一个集合对象；而在html()方法中，由于each()函数是指定DOM元素上执行的，所以该函数内的this指针指向的是当前DOM元素对象，即this表示一个元素。 这只是简单的实现了jQuery函数的each迭代。实际在jQuery中，它封装的each()函数的功能就很强大。

view plain复制代码print?

1. jQuery.each=function(object, callback, args){   
2.     var name, i=0, length=object.length;   
3.     if(args){//如果存在回调函数的参数数组   
4.         if( length===undefined){//如果object不是jQuery对象   
5.             for(name in object){   
6.                 if(callback.apply( object[name],args)===false) //在对象上调用回调函数，如果返回值为false，则跳出循环   
7.                 break;   
8.             }   
9.         }else{   
10.             if(length===undefined){//如果object不是jQuery对象   
11.                 for(name in object){   
12.                     if(callback.apply( object[name],nam,object[name])===false) //在对象上调用回调函数，如果返回值为false，则跳出循环   
13.                     break;   
14.                 }   
15.             }else{   
16.                 for(var value=object[0];i<length&&callback.call(value,i value)!===false;value=object[++i]){}   
17.             }   
18.         }   
19.         return object;//返回jQuery对象   
20.     }   
21. }  

jQuery.each=function(object, callback, args){
	var name, i=0, length=object.length;
	if(args){//如果存在回调函数的参数数组
		if( length===undefined){//如果object不是jQuery对象
			for(name in object){
				if(callback.apply( object[name],args)===false) //在对象上调用回调函数，如果返回值为false，则跳出循环
				break;
			}
		}else{
			if(length===undefined){//如果object不是jQuery对象
				for(name in object){
					if(callback.apply( object[name],nam,object[name])===false) //在对象上调用回调函数，如果返回值为false，则跳出循环
					break;
				}
			}else{
				for(var value=object[0];i<length&&callback.call(value,i value)!===false;value=object[++i]){}
			}
		}
		return object;//返回jQuery对象
	}
}

原文地址：http://www.kisscss.cn/thread-159-1-1.html