阿当

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