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