• 模拟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 = /-([dw]+)]/;
            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-([wd]+)=([wd]+)/;
            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;
            }
        }
    }
  • 相关阅读:
    适配器模式
    代理模式
    单例模式
    构建者(建造者)模式
    js Math方法
    补零
    js中十进制与二进制、八进制、十六进制的互相转换
    js生成一个范围内随机数Math.random
    js不改变原数组的情况下取数值数组的最大值和最小值
    自己封装方法,功能跟数组的indexof一样
  • 原文地址:https://www.cnblogs.com/pssp/p/5277636.html
Copyright © 2020-2023  润新知