模拟Jquery选择器

Posted 2020-06-23 追梦子

目前实现的功能有以下几点：

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