理解jQuery对象

学习JQuery时对$(...)操作后返回的jQuery对象具有如此灵活的操作方法感到惊讶，阅读JQuery源码后逐步明白一些道理。

下面仿照JQuery构造一个超简单的框架，以说明对JQuery的理解。

 

var jQuery = $ = function(selector){
	return new jQuery.fn.init(selector);
};

使用jQuery(...)和$是一样的，都是返回一个对象，这个对象是由jQuery.fn.init的构造体构造的，这个对象有什么来头呢 ？

jQuery.fn = jQuery.prototype = {
	init:function(selector){
		var elem = document.getElementById(selector);
		this[0] = elem;
		this.length = 1;
		return this;
	},
	each:function(method){
		for(var i=0; i<this.length; i++){
			method.call(this[i],i);
		}
		
	}
};

可见，返回的是一个数组，所以并没有什么神秘的东西。

但这个数组还不能进行each的操作，需要扩展其原型方法，下面的这句很重要：

jQuery.fn.init.prototype = jQuery.fn;

这样，通过$(...)得到的对象就能进行each调用了。

 

下面测试一下：

	<div id="myid">测试内容</div>
	<script>
		$('myid').each(function(i){
			alert(i+":"+this.id+":"+this.innerHTML);
		});
	</script>

确实可以运行，运行结果如下图：