`
wangzff
  • 浏览: 745 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

      本文主要是对http://stworthy.iteye.com/blog/200863此篇文章的改进,希望读者更能重复理解javascript的一些框架。本文在stworthy的基础上对代码做了一些改变,并做了一些详细的阐述,希望能给广大IT朋友一点参考价值,如果写的不好的地方欢迎指正。

   

 

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

 

0
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics