JS写jQuery框架

JS写jQuery框架-开始

①以匿名函数的自执行作为开始

②window.jQeury = window.$ = jQuery表示全局范围内可以使用jQuery函数

(function(){

	var jQuery = function(){

	};

	window.jQuery = window.$ = jQuery;

})();

JS写jQuery框架-选择器

以$(’#main’).css().html(); 为例

一、$(’#main’) 是对象，这样它才会有方法 才可以使用(.)

二、css方法、html方法…这些方法都放在原型（即 jQuery.prototype）中、

//index.html
<script>
    $('#main')把'#main' 作为实参传入到函数中，所以函数需要有形参来接收这个实参
</script>


//myjQuery.js
(function(){
    //$()要返回对象

	var jQuery = function(selector){
        //把init方法实例化
		return new jQuery.fn.init(selector)
	};
    function markAll(dom,that){
        var res = that;
        //如果dom是一个列表，那么我们就需要循环遍历dom的每一个节点。节点的遍历及赋值到init对象中
        for(var i = 0;i < dom.length;i++){
            res[i] = dom[i];
        }
        that.length = dom.length;
        //必须返回init，否则后面的css、html不知道给谁加
        return that;
    }
    //fn是原型的别名
    jQuery.fn = jQuery.prototype = {
        init:function(selector){
           var dom=null; 
 		if(typeof selector != 'string'){
            //获取到非字符串元素 window、this
            dom=[selector]
         }else{
             //获取到元素
             dom = document.querySelectorAll(selector);
         }     /*document.querySelectorAll(selector)返回的是dom节点，而我们需要的是一个对象，即我们需要的形式是：init{
    	0:'div'        
    }
    所以我们需要封装一个函数将对象传回去*/
            return markAll(dom,this);
        },
        css:function(){
            
        },
        html:function(){
            
        },
        eq:function(){
            
        }
        
    }
	window.jQuery = window.$ = jQuery;
})();

JS写jQuery框架-css方法

$(’#main’).css().html();

$(’#main’) 等同于 init对象.css

表示init对象用了css方法 ，但是init对象并没有css方法，目前css、html等方法都在原型中，所以需要把jQuery原型的方法赋值给init的原型中

$\ast$$\ast$$\ast$jQuery.fn.init.prototype = jQuery.fn

$\ast$$\ast$$\ast$为了实现$(’#main’).css().html(); 这种连缀写法，每一个方法中都要返回this 。即 (’#main’).css() 等同于 init.css() (’#main’).css().html()等同于init.html

css、html中根据参数的个数不同可以判断 ：是修改参数还是获取参数，过程如下：

//index.html
<script>
    $('#main')把'#main' 作为实参传入到函数中，所以函数需要有形参来接收这个实参
</script>


//myjQuery.js
(function(){
    //$()要返回对象

	var jQuery = function(selector){
        //把init方法实例化
		return new jQuery.fn.init(selector)
	};
    function markAll(dom,that){
        var res = that;
        //如果dom是一个列表，那么我们就需要循环遍历dom的每一个节点。节点的遍历及赋值到init对象中
        for(var i = 0;i < dom.length;i++){
            res[i] = dom[i];
        }
        that.length = dom.length;
        //必须返回init，否则后面的css、html不知道给谁加
        return that;
    }
    //fn是原型的别名
    jQuery.fn = jQuery.prototype = {
        init:function(selector){
           var dom=null; 
 		if(typeof selector != 'string'){
            //获取到非字符串元素 window、this
            dom=[selector]
         }else{
             //获取到元素
             dom = document.querySelectorAll(selector);
         }     /*document.querySelectorAll(selector)返回的是dom节点，而我们需要的是一个对象，即我们需要的形式是：init{
    	0:'div'        
    }
    所以我们需要封装一个函数将对象传回去*/
            return markAll(dom,this);
        },
        css:function(){
            //通过参数的个数来判断，是设置参数还是获取参数
            var arg = arguments,
                len = arg.length;
            if(len==1){
                //获取
                return this[0].style[arg[0]];
            }else if(len == 2){
                //设置
                //this[0]表示第一个节点
                this[0].style[arg[0]] = arg[1];
                return this//this表示init
            }
            return this;
        },
        html:function(){
            alert(2)
            return this;
        },
        eq:function(){
            alert(3)
            return this;
        }
        jQuery.fn.init.prototype = jQuery.fn
    }

	window.jQuery = window.$ = jQuery;

})();

JS写jQuery框架-first、last、eq、html方法

$(’#main’).html()表示获取

$(’#main’).html(‘xxx’)表示设置

//index.html
<script>
   <ul>
    	<li> </li>
		<li> </li>
		<li> </li>
		<li> </li>
		<li> </li>
   </ul>
</script>

//myjQuery.js
(function(){
    //$()要返回对象

	var jQuery = function(selector){
        //把init方法实例化
		return new jQuery.fn.init(selector)
	};
    function markAll(dom,that){
        var res = that;
        //如果dom是一个列表，那么我们就需要循环遍历dom的每一个节点。节点的遍历及赋值到init对象中
        for(var i = 0;i < dom.length;i++){
            res[i] = dom[i];
        }
        that.length = dom.length;
        //必须返回init，否则后面的css、html不知道给谁加
        return that;
    }
    //fn是原型的别名
    jQuery.fn = jQuery.prototype = {
        init:function(selector){
           var dom=null; 
 		if(typeof selector != 'string'){
            //获取到非字符串元素 window、this
            dom=[selector]
         }else{
             //获取到元素
             dom = document.querySelectorAll(selector);
         }     /*document.querySelectorAll(selector)返回的是dom节点，而我们需要的是一个对象，即我们需要的形式是：init{
    	0:'div'        
    }
    所以我们需要封装一个函数将对象传回去*/
            return markAll(dom,this);
        },
        css:function(){
            //通过参数的个数来判断，是设置参数还是获取参数
            var arg = arguments,
                len = arg.length;
            if(len==1){
                //获取
                return this[0].style[arg[0]];
            }else if(len == 2){
                //设置
                //this[0]表示第一个节点
                this[0].style[arg[0]] = arg[1];
                return this//this表示init
            }
            return this;
        },
        html:function(){
            //通过参数的个数来判断，是设置参数还是获取参数
            var arg = arguments,
                len = arg.length;
            if(len==1){
                //设置
                this[0].innerHTML = arg[0];
                return this;
            }else if(len == 0){
                //获取
                return this[0].innerHTML
            }
            return this;
        },
        first:function(){
            return $(this[0])
        },
        last:function(){
            return $(this.length - 1)
        },
        eq:function(num){
            return $(this[num])
        }
        
    }
	jQuery.fn.init.prototype = jQuery.fn
	window.jQuery = window.$ = jQuery;

})();