本文將手把手逐漸實現一個簡化版的 JQuery。

先來自己動手簡化選擇器

base 是一個對象，擁有兩個方法，方法名為 $、$$，功能分別為通過 id 和 class 來獲取元素。

var base = {
    $:function(id){
        return document.getElementById(id);
    },
    $$:function(className){
        return document.getElementsByClassName(className);
    }
}

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

進階，向JQuery靠攏

聲明一個全局方法 $，用于返回一個 base 對象。

var $ = function(){
    return new Base();
}
function Base(){
    this.$ = function(id){
        return document.getElementById(id);
    };

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

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

加上css方法

增加 css 方法，就可以通過 el.css().css() 鏈式調用的形式給元素增加樣式。

var $ = function(){
    return new Base();
}
function Base(){
    this.elements = []  //創建一個數組，來保存獲取的節點和節點數組

    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.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");       //返回相應的元素對象
$().$$("class").css("color","red").css("border","1px dotted black");   //返回相應的元素對象集合

加上eq方法

用于遍歷元素，添加一個 current 變量即可

var $ = function(){
    return new 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;
    }
}

//使用
$().$("id").css("color","white").css("background","black");       //返回相應的元素對象
$().$$("class").eq(1).css("color","red").css("border","1px dotted black");   //返回相應的元素對象集合

通過$("str")來獲取元素

進一步封裝 $ 函數，從而使得調用方法對標 JQuery。

$('#id').css().css()

$('.class').eq(2).css().css()

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

//使用
$("#id").css("color","white").css("background","black");       //返回相應的元素對象
$(".class").eq(1).css("color","red").css("border","1px dotted black");   //返回相應的元素對象集合