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

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

 

 

评论

2 楼 bellstar 2008-10-26  

就以上代码来看＄（“id”），操作后返回的很明显不是数组，而是一个Object,this[0]只是表明当前对象拥有0这个属性，this.length=1更是表明它不是数组，数组它是会自动给它的length属性计数的，没有必要手动设置值。typeof($("id"))看下吧

1 楼 ayumike 2008-10-25  

this[0] = elem;  
this.length = 1;
这个this 是指的jQuery这个对象吗?

下面的this.id是指的DIV这个对象吗?

这2个this 我不太明白 希望可以告诉我下...

$(this).attr()这个this应该是jQuery的自己对象吧

希望能帮我解释下 谢谢啊~~