动手实现JQuery

1、先来自己动手简化选择器

把JS原生的document.getElement*这样的获取元素方式变成简短的形式

//声明一个对象，对象里面有$和$$两种方法
var base = {
    $:function(id){
        return document.getElementById(id);
    },
    $$:function(className){
        return document.getElementsByClassName(className);
    }
}

//使用
base.$("id");                  //返回相应的元素对象
base.$$("class");              //返回相应的元素对象集合

2、进阶，向JQuery靠拢

让选择器的使用看起来更像JQuery

//声明$变量，$是一个函数，函数作用是返回一个Base对象
var $ = function(){
    return new Base();
}

//Base是一个函数，里面有两个属性$和$$
function Base(){
    this.$ = function(id){ 
        return document.getElementById(id);
    };

    this.$$ = function(className){
        return document.getElementsByClassName(className);
    };
}

//使用，$()得到的是一个Base对象，
//.$和.$$都是调用的Base对象里面的属性
$().$("id");                     //返回相应的元素对象
$().$$("class");                 //返回相应的元素对象集合

3、添加css方法

增加css方法，可以通过css来修改指定元素的样式
主要问题：操作的对象怎么传递？可以通过变量来存储
遗留问题：css的修改都是全部修改，没办法选择某一个

//同上，声明一个$变量，返回一个Base对象
var $ = function(){
    return new Base();
}

//Base里面的所有方法都是返回Base本身的，这样才能实现连缀功能，也就是.eq().css()这样连着写
function Base(){
    this.elements = []  //创建一个数组，来保存获取的节点和节点数组

    this.$ = function(id){
        //因为每一次使用$都会新建一个Base对象，所以不需要清空elements
        this.elements.push(document.getElementById(id));    
        return this;    //一定要返回对象，不然无法进行连缀
    };

    this.$$ = function(className){
        var clss = document.getElementsByClassName(className);
        for(var i = 0 ;i < clss.length; i++){
            //把所有元素存到elements数组中，方便后续的操作
            this.elements.push(clss[i]);   
        }
        return this;
    };

    this.css = function(attr,val){
        //这里是修改了所有元素的样式
        for(var i = 0;i < this.elements.length; i++){
            this.elements[i].style[attr] = val;
        }
        return this;
    }
}

//使用
$().$("id").css("color","white").css("background","black");       //返回的永远是Base对象
$().$$("class").css("color","red").css("border","1px dotted black");   //返回的永远是Base对象

4、增加eq方法

用于遍历元素，从而可以修改某个特定元素的样式，添加一个current变量即可

var $ = function(){
    return new Base();
}
function Base(){
    this.elements = [];  //创建一个数组，来保存获取的节点和节点数组
    this.current = -1;   //用于遍历

    this.$ = function(id){
        //因为每一次使用$都会新建Base对象，所以不需要清空，不会异常
        this.elements.push(document.getElementById(id));    
        return this;    //一定要返回对象，不然无法进行连缀
    };

    this.$$ = function(className){
        var clss = document.getElementsByClassName(className);
        for(var i = 0 ;i < clss.length; i++){
            this.elements.push(clss[i]);
        }
        return this;
    };

    this.eq = function(index){
        this.current = index;
        return this;
    }

    this.css = function(attr,val){
        //当current不是-1时，表示使用过eq方法，表示要对单独某个元素进行操作
        if(this.current != -1)
            this.elements[this.current].style[attr] = val;
        else{
            for(var i = 0;i < this.elements.length; i++){
                this.elements[i].style[attr] = val;
            }
        }
        return this;
    }
}

//使用
$().$("id").css("color","white").css("background","black");       
$().$$("class").eq(1).css("color","red").css("border","1px dotted black");   //通过eq可以修改单独某个元素的样式

5、变成JQuery，通过$(str)形式来获取元素

让使用方式跟JQuery一模一样

//在使用$时，需要传入一个参数，然后解析一下参数的意思并调用Base相关函数
var $ = function(str){
    var base = new Base();
    if(str[0] == "#"){
        base.$(str.substr(1,str.length - 1));
    }
    else if(str[0] == '.'){
        base.$$(str.substr(1,str.length - 1));
    }
    else{
        //TagName
    }
    return base;    //返回的仍然是Base对象本身，这样才能连缀
}
function Base(){
    this.elements = [];  //创建一个数组，来保存获取的节点和节点数组
    this.current = -1;   //用于遍历

    this.$ = function(id){
        //因为每一次使用$都会新建对象，所以不需要清空，不会异常
        this.elements.push(document.getElementById(id));    
        return this;    //一定要返回对象，不然无法进行连缀
    };

    this.$$ = function(className){
        var clss = document.getElementsByClassName(className);
        for(var i = 0 ;i < clss.length; i++){
            this.elements.push(clss[i]);
        }
        return this;
    };

    this.eq = function(index){
        this.current = index;
        return this;
    }

    this.css = function(attr,val){
        if(this.current != -1)this.elements[this.current].style[attr] = val;
        else{
            for(var i = 0;i < this.elements.length; i++){
                this.elements[i].style[attr] = val;
            }
        }
        return this;
    }
}

//使用，跟JQuery的使用方式已经完全一样了
$("#id").css("color","white").css("background","black");       
$(".class").eq(1).css("color","red").css("border","1px dotted black");   

6、说明

这里只是列出了JQuery的核心思想，其他的像animate，find等函数都可以通过this.animate = function(){}这样的形式来添加，原理都是一样的