js框架封装（二）——选择器框架

写在前面

在这篇博客中，我会介绍选择器框架的封装

选择器框架

$$.extend({
	//id选择器
	$id:function(id){
		return document.getElementById(id);
	},
	//tag选择器
	$tag:function(tag,layer){
		if(typeof layer == 'string'){
			layer = $$.$id(layer);
		}
		if(layer){
			return layer.getElementsByTagName(tag);
		}else{
			return document.getElementsByTagName(tag);
		}
	},
	//class选择器
	$class:function(classname,layer){
		if(typeof layer == 'string'){
			layer = $$.$id(layer);
		}
		if(layer){
			return layer.getElementsByClassName(classname);
		}else{
			return document.getElementsByClassName(classname);
		}
	},
	//通用选择器
	$select:function(select,layer){
		layer = layer || document;
		return layer.querySelectorAll(select);
	},
	//分组选择器
	$group:function(content){
		var arr = content.split(',');
		var arrs = [];
		for(var i=0;i<arr.length;i++){
			var item = arr[i];
			arrs.pushArray($$.$select(item));
		}
		return arrs;
	},
	//层次选择器
	$layer:function(content){
		var arr = content.split(' ');	//获取内容
		var doms = [document];			//建立dom数组
		var layer,flag,name,dom;
		for(var i=0;i<arr.length;i++){
			var item = arr[i];
			var len = doms.length;
			for(var j=0;j<len;j++){
				layer = doms.shift();
				dom = $$.$select(item,layer);
                doms.pushArray(dom);
            }
        }
        return doms;
    }

id选择器

$id:function(id){
    return document.getElementById(id);
},

class选择器

$class:function(classname,layer){ //class名，当前层
    if(typeof layer == 'string'){ 
        layer = $$.$id(layer);
    }
    if(layer){
        return layer.getElementsByClassName(classname);
    }else{
        return document.getElementsByClassName(classname);
    }
},

tag选择器

$tag:function(tag,layer){
    if(typeof layer == 'string'){
        layer = $$.$id(layer);
    }
    if(layer){
        return layer.getElementsByTagName(tag);
    }else{
        return document.getElementsByTagName(tag);
    }
},

通用选择器

$select:function(select,layer){
    layer = layer || document;
    return layer.querySelectorAll(select);
},

分组选择器

$group:function(content){
    var arr = content.split(',');
    var arrs = [];
    for(var i=0;i<arr.length;i++){
        var item = arr[i];
        arrs.pushArray($$.$select(item));
    }
    return arrs;
},

//往数组里push数组
Array.prototype.pushArray = function(arr){
    if(!arr.length){
        this.push(arr);
    }else{
        for(var i=0;i<arr.length;i++){
            this.push(arr[i]);
        }
    }
}

content = “#app,.panini,p”
选择后
arrs = [dom#app,dom.panini,dom p];

层次选择器

$layer:function(content){
    var arr = content.split(' ');   //获取内容
    var doms = [document];          //建立dom数组
    var layer,flag,name,dom;
    for(var i=0;i<arr.length;i++){
        var item = arr[i];
        var len = doms.length;
        for(var j=0;j<len;j++){
            layer = doms.shift();
            dom = $$.$select(item,layer);
            doms.pushArray(dom);
        }
    }
    return doms;
}

html结构

<div id="app">
    <div class="xgb">
        <p>1</p>
        <p>2</p>
    </div>
    <div class="xgb">
        <p>3</p>
        <p>4</p>
    </div>
</div>
<script>
    var dom = $$.$layer("#app .xgb p");
    for(var i=0;i<dom.length;i++){
        dom[i].style.background = "green";
    }
</script>   

运行结果是所有p元素变绿

层次选择器的原理

解析content内容"#app .xgb p"
得到arr数组 ['#app','.xgb','p']
三次循环：
    第一次循环：
    layer = doms.shift(); //layer = document
    从document里找#app,并把结果放入doms数组
    doms = [dom#app]
    第二次循环：
    layer = doms.shift(); //layer = dom#app
    从#app里找.xgb,并把结果放入doms数组
    doms = [dom1.xgb,dom2.xgb]
    第三次循环：
        第一次内循环:
        layer = doms.shift(); //layer = dom1.xgb
        从.xgb里找p,并把结果放入doms数组
        doms = [dom1.xgb,dom2p,dom3p]
        第二次内循环:
        layer = doms.shift(); //layer = dom2.xgb
        从.xgb里找p,并把结果放入doms数组
        doms = [dom1p,dom2p,dom3p,dom4p]