理解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>

确实可以运行,运行结果如下图:

 

 

阅读更多

没有更多推荐了,返回首页