js 实现对jq选择器 id class tag *选择器的模仿封装

简单弄了一下，大神勿喷，仅供自己练习
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 500px;
                height: 200px;
                border: 1px solid #ee5600;
            }
        </style>
    </head>
    <body>
        <div id="box">
            设置背景颜色0
        </div>
        <span>
            设置背景颜色1
        </span>
        <p class="a">
            设置背景颜色2
        </p>
    </body>
    <script type="text/javascript"> 
    var  $ = function(selectdeom ,results){
        results = results || [] ;
        //匹配id class *  
        var requickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = requickExpr.exec(selectdeom);
        if(m){      
             if(m[1]){
                results =  getid(m[1],results ); 
             }else if(m[2]){
                results = getclass(m[2],results);
             }else{
               results = gettag(m[3] || "*",results);
            }
          } 
          return results;   
        }

    var getid = function(id,results){
        results = results || [] ;
        results.push(document.getElementById(id));      
        return results;
    }   
    var getclass = function(className,results){
        results = results || [] ;
        results.push.apply(results,document.getElementsByClassName(className));     
        return results;
    }   

    var gettag = function(tag,results){
        results = results || [] ;     results.push.apply(results,document.getElementsByTagName(tag));
        return results;
    }   
    var each = function(arr,fn){
            for(var i=0;i<arr.length;i++){  
                //将this指向在调用的函数上
                if(fn.call(arr[i],i,arr[i]) === false){
                    break;
                }
            }
        }    
       each($("#box"),function(){
         this.style.background = "red";
       });
       each($("span"),function(){
         this.style.background = "green";
       });  
       each($(".a"),function(){
         this.style.fontSize = 20+"px";
       });
//     each(get("*"),function(){
//       this.style.background = "#f5f5f5";
//     });  
    </script>
</html>
js 实现对jq选择器 id class tag *选择器的模仿封装

猜你喜欢
