模拟jQuery架构--理解jQuery对象

   
<script type="text/javascript">
      
       var jQuery = $ = function(selector){  	
            return new jQuery.fn.init(selector);  
        };  
        
	jQuery.fn = jQuery.prototype = {
          //初始化jQuery对象
          init:function(selector){
		var elem = document.getElementById(selector);		
		this[0] = elem;
		this.length = 1;
                //(1)注意此处返回的是jQuery.fn.init对象
                return this;
	    },
	    each:function(method){
		for(var i=0; i<this.length; i++){
                   //利用call方法改变了method方法的作用域,也就是将method的this变成了
                   //jQuery.fn.init[0]对象,并将i值作为参数传递给method方法。
                   method.call(this[0],i);
	        }
	     }
	  };
        //因为(1)处的返回的是jQuery.fn.init对象,无法调用each方法。
        //所以将jQuery.fn对象赋给jQuery.fn.init对象原型中。这样
       //jQuery.fn.init对象就可以使用each方法了
        jQuery.fn.init.prototype = jQuery.fn;  

        $('myid').each(function(i){  
          alert(i+":"+this.id+":"+this.innerHTML);  
        });  
 </script>

 <div id="myid">测试内容</div>
 

相关推荐