框架设计续集（五）
==之前的选择器函数都是基本选择器，怎么实现组合，兄弟，后代，过滤等等==
<!--组合选择器的实现-->
/**
* Created by Administrator on 2017/11/26.
*/
//假设context是一个选择器字符串
//只需要将选择器字符串转化为dom伪数组
//需要改变得就是在获取元素的上下文做相应的更改
/*对浏览器能力检测模块B*/
var support ={};
support.getElementsByClassName = (function(){
var isExist = !!document.getElementsByClassName;
if(isExist && typeof document.getElementsByClassName == "function" ){
var oDivParent = document.createElement("div"),
oDivChild = document.createElement("div");
oDivChild.className = "cc";
oDivParent.appendChild(oDivChild);
return oDivParent.getElementsByClassName("cc")[0] ===oDivChild;
}
return false
})();
//检测浏览器对字符串是否有trim方法,只是去除字符串首尾的字符，对于中间的空格不处理
support.trim = (function(str){
var isExist = !!String.prototype.trim;
if(isExist){
return str.trim()
}else{
return str.replace(/^\s+|\s+$/g,"")
}
})
/*对浏览器能力检测模块E*/
/*遍历for(){}B*/
function each(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn.call(arr[i],i,arr[i])===false){
break
}
}
}
/*遍历for(){}E*/
/*单个的获取元素的方法B*/
function getTag(tag,context,results){
results = results || [];
context = context ||document;
results.push.apply(results,context.getElementsByTagName(tag));
return results
}
function getID(id,results){
results = results || [];
results.push(document.getElementById(id));
return results
}
function getClass(classname,context,results){
results = results || [];
context = context ||document;
var arr, i,reg;
if(support.getElementsByClassName){
results.push.apply(results,document.getElementsByClassName(classname));
}else{
arr = context.getElementsByTagName("*");
for( i= 0;i<arr.length;i++){
reg = new RegExp("\\b"+classname+"\\b");
if(reg.test(arr[i].className)){
results.push(arr[i])
}
}
}
//console.log(results)
return results
}
/*单个的获取元素的方法E*/
/*基本选择器的实现 B*/
function getElem(selector,context,results){
results = results || [];
context = context ||document;
var regE = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
ex = regE.exec(selector);
if(ex){
//在context不传参数时，对document的情况进行转化，
if(context.nodeType){
context = [context]
}
if(typeof context == "string"){
//将选择器字符串转化为dom数组,加上if判断判断的目的是下边函数递归，需要跳出
context = getElem(context);
}
each(context,function(i,v){
if(ex[1]){
getID(ex[1],results);
}else if(ex[2]){
getClass(ex[2],v,results);
}else if(ex[3]){
getTag(ex[3],v,results)
}else if(ex[4]){
getTag("*",v,results)
}
})
}
return results;
}
/*基本选择器的实现 E */
/*组合选择器的实现 B */
/*怎么实现组合选择器eg:(".con",".box")
为了实现代码的服用，重新定义一个函数*/
function select (selector,context,results){
results = results || [];
var newselector = selector.split(",");
//因为传进来的选择器字符串两端可能有空格，为了防止出错，将其两端的空格去掉
each(newselector,function(i,v){
//遍历，分别调用基本选择器函数，追加到results数组中
results.push.apply(results,getElem(support.trim(v),context))
});
return results
}
/*组合选择器的实现 E*/
eg：
<div class="con" id="con">
<div class="box box1">123</div>
<p class="box1">pppppppppppppppp</p>
<h4>我是大标题</h4>
</div>
<p class="box">我是body下的p标签</p>
<body>
<script src="js/common1.3.js"></script>
<script>
each(select(".box,h4",".con"),function(i,v){
this.style.background = "pink";
})
</script>
//结果就是"".con"下的“.box”和“h4”背景变色
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.11.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
