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

最新推荐文章于 2025-12-19 10:29:11 发布

最新推荐文章于 2025-12-19 10:29:11 发布 · 130 阅读

文章标签：

#JavaScript #框架 #ViewUI

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文基于原始文章，对JavaScript框架实现进行了优化和详细解释，旨在帮助读者更好地理解和掌握JavaScript框架的核心概念。通过实例演示，深入浅出地介绍了初始化、教方法及遍历元素等关键操作，提供参考价值。

本文主要是对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>