本篇为回顾js时总结，诣在整理JS中常用知识点，剖析其规律。 模仿jQuery，简单一些，特定功能，像apply函数、getElementXXX函数等浏览器函数都没有实现，直接套用。
创建 common.js ：
//自定义实现push函数
var myPush=function(target,els){
var j=target.length,
i=0;
while((target[j++]=els[i++])){}
target.length=j-1;
};
var getTag=function(tag,context,results=[]){
//处理“IE中push和apply连用会报错”的问题——用自定义push函数
try{
results.push.apply(results,context.getElementsByTagName(tag))
}catch(e){
myPush(results,context.getElementsByTagName(tag))
}
return results;
};
var getId=function(id,results=[]){
results.push(document.getElementById(id));
return results;
};
var getClass=function(className,context,results=[]){
//关于class，有两种形式：1、attribute；2、直接属性
if(document.getElementsByClassName){
results.push.apply(results,context.getElementsByClassName(className))
}else{
each(getTag('*',context),function(i,v){
if((' '+v.className+' ').indexOf(' '+className+' ')!==-1){
results.push(v);
}else{
return false;
}
});
}
return results;
};
//自定义实现each函数
var each=function(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn.call(arr[i],i,arr[i])===false){
break;
}
}
};
//通用的方法——被调用的函数
var get=function(selector,context=document,results=[]){
var requickExpr=/^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
m=requickExpr.exec(selector);
if(m){
//将元素节点变为“数组形式”集合
if(context.nodeType){context=[context]};
//如果元素是字符串形式，那么就先将其相关的所有节点的“数组”取出来（递归）
if(typeof context==='string'){
context=get(context);
}
each(context,function(i,v){
if(m[1]){
results=getId(m[1],results);
}else if(m[2]){
results=getClass(m[2],context,results);
}if(m[3]){
results=getTag(m[3],context,results);
}if(m[4]){
results=getTag(m[4],context,results);
}
});
}
return results;
}使用时，先将common.js导入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>改变元素样式</title>
<script src="./common.js"></script>
</head>
<body>
<div class="c3">
<div class="c rect"></div>
</div>
<div class="c3">
<div class="c1 rect"></div>
<div class="c rect"></div>
</div>
<script>
each(get('.c','.c3'),function(){
this.style.backgroundColor='pink';
});
//也可以这样：
each(get('.c',get('.c3')),function(){
this.style.backgroundColor='red';
});
//或者：
get('.c',get('.c3')).style.backgroundColor='green';
</script>
</body>
</html>