zoukankan      html  css  js  c++  java
  • 模拟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;
            }
        }
    }
  • 相关阅读:
    文件
    drf序列化组件
    drf入门规范
    单例模式
    初识drf
    restful规范
    虚拟环境使用
    vue基础(三)
    vue基础(二)
    作业
  • 原文地址:https://www.cnblogs.com/pssp/p/5277636.html
Copyright © 2011-2022 走看看