模拟Jquery选择器

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

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值