zoukankan      html  css  js  c++  java
  • 仿jquery 选择器功能

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>1223</title>
    </head>

    <body>
    <div class="wrapper" id="wrapper">
        <div class="list" id="list">
            <ul>
                <li class="liFirst" id="liFirst">111</li>
                <li>131</li>
                <li><span>131</span></li>
            </ul>
            <span></span>
        </div>
        <div class="list">4444<div>
    </div>
    <script type="text/javascript">
    window.onload = function(){
        function EQuery(vArg){
            var base = {
                oneArr:[],                // 匹配单个内容
                totalArr:[],            // 匹配多个单个内容
                ele:[],                    // 实际匹配的元素
                i:0,                    // 变量
                parentEle:null,            // 复制 oneArr 作为下一次循环的父级
                getId:function(id){
                    return document.getElementById(id);
                },
                getClass:function(classname,parent,tagname){
                    //div.list .liFirst
                    // .list parent  div
                    var arr = [];
                    for(var i=0,len=parent.length;i<len;i++){
                        var arr2 = [];
                        if(document.getElementsByClassName){    // firefox 下获取class
                            arr2 = parent[i].getElementsByClassName(classname);
                            tag(tagname,arr2);
                        }else{
                            var dom = parent[i].getElementsByTagName("*");
                            for(var i=0,ielen=dom.length;i<ielen;i++){
                                if(dom[i].className == classname){
                                    arr2.push(dom[i]);
                                }
                            }
                            tag(tagname,arr2);
                        }
                    }
                    function tag(tagname,arr2){
                        if(tagname != undefined){
                            for(var j=0,lens=arr2.length;j<lens;j++){
                                if(arr2[j].tagName.toLowerCase() == tagname){
                                    arr.push(arr2[j]);
                                }
                            }
                        }else{
                            for(var j=0,lens=arr2.length;j<lens;j++){
                                arr.push(arr2[j]);
                            }
                        }
                    }
                    return arr;
                },
                getDom:function(dom,parent){
                    var arr = [],
                        arr2 = [];
                    for(var i=0,len=parent.length;i<len;i++){
                        arr2 = parent[i].getElementsByTagName(dom);
                    }
                    arr = arr2;
                    return arr;
                }
            }
            base.totalArr = vArg.split(/s+/);
            while(base.i<base.totalArr.length){    
                (function(vArg,base){                     // vArg 为匹配的单个内容
                    if(/^#/.test(vArg) || /^./.test(vArg) || (!/.|#/.test(vArg)) ){
                        base.oneArr = [vArg];            // #id  .class   tagname
                    }else{
                        base.oneArr = /^(w+)([W]w+)/.exec(vArg);
                        if(base.oneArr[0] == vArg){        // tagname#id  tagname.class
                            base.oneArr.shift();
                        }
                        base.oneArr.reverse();            // #id tagname .class tagname
                    }
                    var a = base.oneArr[0],
                        b = base.oneArr[1];
                    switch(a.charAt(0)){
                        case "#":
                            base.ele = [base.getId(a.substr(1))];
                            break;
                        case ".":
                            base.parentEle = base.parentEle || [document];
                            base.ele = base.getClass(a.substr(1),base.parentEle,b);
                            break;
                        default:
                            base.parentEle = base.parentEle || [document];
                            base.ele = base.getDom(a,base.parentEle);
                            break;
                    }
                })(base.totalArr[base.i],base);
                base.parentEle = base.ele;
                base.i++;
            }
            this.ele = base.ele;
        }
        EQuery.prototype.css = function(attr,value){
            for(var i=0,len = this.ele.length;i<len;i++){
                this.ele[i].style[attr] = value;
            }
        }
        function $(vArg){
            return new EQuery(vArg);
        }
        $("div#wrapper li span").css("color","#ccc");
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    玩4K必备知识:HDMI1.4、2.0、2.0a、2.0b接口参数对比【扫盲贴】
    Gradle配置最佳实践
    Android Studio 中安装 apk 被拆分成多个 slice,如何禁止?
    编译不同平台 设定
    编译找错
    Delphi 中内存映射对于大文件的使用
    linux——nmap端口扫描命令
    Android 使用 adb命令 远程安装apk
    插件编译 版本问题
    2019 opensuse linux Eclipse
  • 原文地址:https://www.cnblogs.com/xiuciedward/p/3298995.html
Copyright © 2011-2022 走看看