模擬Jquery選擇器 - pssp－IT工程師數位筆記本

文章出處

目前實現的功能有以下幾點：

　　1.$("#adom"); // 返回id為adom的DOM對象

　　2.$("a"); // 返回一個a標簽的數組

　　3.$(".classa"); // 返回一個class的數組

　　4.$("[data-log]"); // 返回一個包含屬性data-log的數組

　　5.$("[data-time=2015]"); // 返回一個屬性為data-time且值為2015的數組

其他選擇器有時間在弄吧。

function $() {
    var a = arguments,len,str,sub,dataReg;
    // class兼容IE
    function classN(n){
        var tag = document.getElementsByTagName("*");
        for(var i=0,arr=[];i<tag.length;i++){
            if(tag[i].className.indexOf(n)!==-1){
                arr.push(tag[i]);
            }
        }
        return arr;
    }
    // 自定義data選擇器
    function data(d){
        var tag = document.getElementsByTagName("*");
        var reg = /\-([\d\w]+)\]/;
        for(var i=0,arr=[];i<tag.length;i++){
            if(tag[i].dataset[reg.exec(d)[1]]){
                arr.push(tag[i]);
            }
        }
        return arr;
    }
    // 自定義data選擇器嚴格版
    function dataT(d){
        var tag = document.getElementsByTagName("*");
        var reg = /\[data\-([\w\d]+)\=([\w\d]+)/;
        for(var i=0,arr=[];i<tag.length;i++){
            if(tag[i].dataset[reg.exec(d)[1]]===reg.exec(d)[2]){
                arr.push(tag[i]);
            }
        }
        return arr;
    }
    // 如果是函數，將函數添加到load事件中
    if((typeof a[0])==="function"){
        window.addEventListener('load',a[0]);
    }else{
        len = a.length;
        str = a[0].charAt(0);
        sub = a[0].substring(1);
        dataReg = /\=/.test(a[0]);
        switch(str){
            case "#":
                return document.getElementById(sub);
                break;
            case ".":
                return classN(sub);
                break;
            case "[":
                switch(dataReg){
                    case false:
                        return data(a[0]);
                        break;
                    case true:
                        return dataT(a[0]);
                        break;
                }
                break;
            default:
                return document.getElementsByTagName(a[0]);
                break;
        }
    }
}