仿jquery 选择器功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1223</title>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="list" id="list">
<ul>
<li class="liFirst" id="liFirst">111</li>
<li>131</li>
<li><span>131</span></li>
</ul>
<span></span>
</div>
<div class="list">4444<div>
</div>
<script type="text/javascript">
window.onload = function(){
function EQuery(vArg){
var base = {
oneArr:[], // 匹配单个内容
totalArr:[], // 匹配多个单个内容
ele:[], // 实际匹配的元素
i:0, // 变量
parentEle:null, // 复制 oneArr 作为下一次循环的父级
getId:function(id){
return document.getElementById(id);
},
getClass:function(classname,parent,tagname){
//div.list .liFirst
// .list parent div
var arr = [];
for(var i=0,len=parent.length;i<len;i++){
var arr2 = [];
if(document.getElementsByClassName){ // firefox 下获取class
arr2 = parent[i].getElementsByClassName(classname);
tag(tagname,arr2);
}else{
var dom = parent[i].getElementsByTagName("*");
for(var i=0,ielen=dom.length;i<ielen;i++){
if(dom[i].className == classname){
arr2.push(dom[i]);
}
}
tag(tagname,arr2);
}
}
function tag(tagname,arr2){
if(tagname != undefined){
for(var j=0,lens=arr2.length;j<lens;j++){
if(arr2[j].tagName.toLowerCase() == tagname){
arr.push(arr2[j]);
}
}
}else{
for(var j=0,lens=arr2.length;j<lens;j++){
arr.push(arr2[j]);
}
}
}
return arr;
},
getDom:function(dom,parent){
var arr = [],
arr2 = [];
for(var i=0,len=parent.length;i<len;i++){
arr2 = parent[i].getElementsByTagName(dom);
}
arr = arr2;
return arr;
}
}
base.totalArr = vArg.split(/\s+/);
while(base.i<base.totalArr.length){
(function(vArg,base){ // vArg 为匹配的单个内容
if(/^#/.test(vArg) || /^\./.test(vArg) || (!/\.|#/.test(vArg)) ){
base.oneArr = [vArg]; // #id .class tagname
}else{
base.oneArr = /^(\w+)([\W]\w+)/.exec(vArg);
if(base.oneArr[0] == vArg){ // tagname#id tagname.class
base.oneArr.shift();
}
base.oneArr.reverse(); // #id tagname .class tagname
}
var a = base.oneArr[0],
b = base.oneArr[1];
switch(a.charAt(0)){
case "#":
base.ele = [base.getId(a.substr(1))];
break;
case ".":
base.parentEle = base.parentEle || [document];
base.ele = base.getClass(a.substr(1),base.parentEle,b);
break;
default:
base.parentEle = base.parentEle || [document];
base.ele = base.getDom(a,base.parentEle);
break;
}
})(base.totalArr[base.i],base);
base.parentEle = base.ele;
base.i++;
}
this.ele = base.ele;
}
EQuery.prototype.css = function(attr,value){
for(var i=0,len = this.ele.length;i<len;i++){
this.ele[i].style[attr] = value;
}
}
function $(vArg){
return new EQuery(vArg);
}
$("div#wrapper li span").css("color","#ccc");
}
</script>
</body>
</html>
