类jq选择器扩展.

这几天一有空就在折腾类jq选择器，昨天晚上自己实现了选择器的大致雏形。今天接着折腾给这个简陋的选择器增添新的方法。

我们平时用jq选择器，不只能够用$(str)方法获取元素，也支持$(dom对象集合)；

为了造的更像我们常用的这个轮子，接着对昨天晚上做的选择器又进行了一点扩展。

以下是昨天坐的选择器雏形，

利用getEle(str)方法便可获取dom元素集合.

function getByClass(oParent,sClass){
            
            if(oParent.getElementsByClassName){
                return oParent.getElementsByClassName(sClass);
            }
            
            var result = [];
            var re = new RegExp("\\b"+sClass+"\\b");
            
            var aEle = oParent.getElementsByTagName("*");
            
            for(var i = 0; i < aEle.length; i++){
                if( re.test(aEle[i].className) ){
                    result.push(aEle[i]);
                }
            }
            return result;
        }


        function getByStr(aParent,str){
            var aChild = [];
            
            //选择元素
            //str  #id  .class  tagname
            for(var i = 0; i < aParent.length; i++){
                switch(str.charAt(0)){
                    case "#":// id
                        var obj = document.getElementById(str.substring(1));
                        aChild.push(obj);
                        break;
                    case ".":// 类
                        var aEle = getByClass(aParent[i],str.substring(1));
                        //aChild = aChild.concat(aEle);
                        for(var j = 0; j < aEle.length; j++){
                            aChild.push(aEle[j]);
                        }
                        break;
                    default://标签
                    
                        //tagname#id 
                        if(/^[a-z0-9]+#[a-z0-9\-_$]+$/i.test(str)){
                            //[tagname,id]
                            var arr = str.split("#");
                            var aEle = aParent[i].getElementsByTagName(arr[0]);
                            for(var j = 0; j < aEle.length; j++){
                                if(aEle[j].id == arr[1]){
                                    aChild.push(aEle[j]);
                                }
                            }
                        //li.box
                        } else if(/[a-z0-9]+\.[a-z0-9\-_$]+$/i.test(str)){
                             // [tagname,class]
                             var arr = str.split(".");
                             var aEle = aParent[i].getElementsByTagName(arr[0]);
                            for(var j = 0; j < aEle.length; j++){
                                if(aEle[j].className == arr[1]){
                                    aChild.push(aEle[j]);
                                }
                            }
                        //input[type=button] 
                        } else if(/\w+\[\w+=\w+\]/.test(str)){
                            
                            //arr [input,type,button,]
                            var arr = str.split(/\[|=|\]/);
                            var aEle = aParent[i].getElementsByTagName(arr[0]); 
                            for(var j = 0; j < aEle.length; j++){
                            
                                if(aEle[j].getAttribute(arr[1])  == arr[2]){
                                    aChild.push(aEle[j]);
                                }
                            }
                            //li:first  li:eq(index) 
                        } else if(/\w+:\w+(\(\.\))?/.test(str)){
                            
                            /*[li,eq,index,]
                              arr[0]  tagname
                              arr[1]  first/eq/gt/lt/odd/even
                              arr[2]  内容
                            */
                            var arr = str.split(/:|\(|\)/);
                            var aEle = aParent[i].getElementsByTagName(arr[0]);                    
                            switch(arr[1]){
                                case "first":
                                    aChild.push(aEle[0]);
                                    break;
                                case "last":
                                   aChild.push(aEle[aEle.length - 1]);
                                    break;
                                case "eq":
                                    aChild.push(aEle[arr[2]]);
                                    break;
                                case "gt"://大于
                                    for(var j = parseInt(arr[2]) + 1; j < aEle.length; j++){
                                        aChild.push(aEle[j]);
                                        
                                    }
                                
                                break;
                                case "lt"://小于
                                    for(var j = 0; j < parseInt(arr[2]); j++){
                                        aChild.push(aEle[j]);
                                        
                                    }
                                    break;
                                case "odd":
                                    for(var j = 0; j < aEle.length; j++){
                                        if(j%2 == 1){
                                            aChild.push(aEle[j]);
                                        }                                
                                    }
                                break;
                                case "even":
                                    for(var j = 0; j < aEle.length; j+=2){
                                        aChild.push(aEle[j]);                                
                                    }
                                break;
                            }
                            
                            
                            
                        }else {//纯标签
                            var aEle = aParent[i].getElementsByTagName(str);
                            //aChild = aChild.concat(aEle);
                            for(var j = 0; j < aEle.length; j++){
                                aChild.push(aEle[j]);
                            }
                        }
                }
                
            }
            return aChild;
        }


        //获取元素
        function getEle(str){
            // 切 
            var arr = str.replace(/^\s+|\s+$/g,"").replace(/\s+/g," ").split(" ");
            var aParent = [document];
            var aChild  = [];
            
            //循环获取元素
            for(var i = 0; i < arr.length; i++){

                aChild = getByStr(aParent,arr[i]);
                
                //核心： 上一次子级 是下一次父级
                aParent = aChild;
            }
             
            return aChild;
        }

View Code

接着对以上方法进行扩展。

function Query(args){
  this.eles = [];
  switch (typeof args){
         case 'string':
             if(args.indexOf('<')==-1){
                    this.eles = getEle(args)
             }  
             break;
         case 'object':
              if('length' in args){
                     for(var i =0;i<args.length;i++){
                               this.eles.push(args[i]);
                     }
              }else{
                     this.eles.push(args);
              }
              break;
   }  
　　//return this.eles   我们也可就此打住  直接返回出获取的dom对象集合;这里为了继续进行扩展这一步我就不返回了。
}

Query('div a .abc').eles;//便可获取对象了
Query(dom).eles;//也可获取dom对象

 jq的$(function(){fn()});很强大实用，即完成dom树加载完毕后执行函数;有制造了私有空间，让变量不再互相污染。

先声明一个domReady函数实现类似Jq的$(document).ready()方法;

function domReady(fn){
    if(document.addEventListener){
        document.addEventListener("DOMContentLoaded",fn,false);
    } else {
        document.attachEvent("onreadystatechange",function(){
            if(document.readyState == "complete"){
                fn && fn();
            }    
        });
    }
}

继续对我的Query选择器进行扩展

function Query(args){
    
    this.elements = [];
    switch(typeof args){
        case "string":// getEle()  1 创建元素  2 获取元素
            if(args.indexOf("<") != -1){//创建元素
                this.domString = args;
            } else {//获取元素
                this.elements = getEle(args);
            }
            break;
        case "object":// 包装
            if("length" in args){
                for(var i = 0; i < args.length; i++){
                    this.elements.push(args[i]);    
                }
            } else {
                this.elements.push(args);    
            }
            break;
　　　　  case "function":// domReady
            domReady(args);
            break;
    }    
}
Query(function(){fn});//便也实现了类似jq $(document).ready(fn);的效果

 

转载于:https://www.cnblogs.com/vidy/p/4792957.html