码迷,mamicode.com
首页 > Web开发 > 详细

模拟Jquery选择器

时间:2016-03-15 00:21:24      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 

模拟Jquery选择器

标签:

原文地址:http://www.cnblogs.com/pssp/p/5277636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!