javascript选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript元素选择器</title>
<script type="text/javascript">
Array.prototype.each=function(f){
for(var i=0,l=this.length;i<l;i++)f.call(this[i],i);
return this
};
Array.prototype.merge=function(arr){
for(var i=0,l=arr.length;i<l;i++)this[this.length]=arr[i];
return this
};
var rule=function(a,b){
var e=[b||document];
var types={
'#':this.byId,
'.':this.byClass,
'>':this.byTagName,
':':this.byAttr,
'default':true
},obj=[];
for(var i=0,k=-1,l=a.length;i<l;i++){
var s = a.charAt(i);
if(typeof types[s]==='function'){
k++;
obj[k]=''
}
obj[k]+=s;
}
for(var i=0,l=obj.length;i<l;i++)e=types[obj[i].charAt(0)](e,obj[i].substr(1));
return e
};
var byId=function(o,t){return [o[0].getElementById(t)]};
var byTagName=function(o,t){
var tags=[];
o.each(function(i){tags.merge(o[i].getElementsByTagName(t))});
return tags;
};
var byClass=function(o,t){
var _=[];
o.each(function(i){
var m=this.getElementsByTagName('*');
for(var j=0,k=m.length;j<k;j++){
if((' '+m[j].className+' ').indexOf(' '+t+' ')!==-1)_.push(m[j])
}
});
return _;
};
var $=function(a,b){return rule(a,b)};
</script>
</head>
<body>
<ul id="test1">
<li>
<ul>
<li><a href="">123</a></li>
<li></li>
</ul>
</li>
<li class="c1"><a href="">123</a></li>
<li class="c1"><a href="">222</a></li>
<li class="c1"></li>
<li><a href="">123</a></li>
</ul>
<script type="text/javascript">
/*示例*/
$('#test1.c1');/*取得test1下面所有class="c1"的元素*/
$('#test1>li');/*取得test1下面所有标签为li的元素*/
$('#test1.c1>a');/*取得#test1下面所有class="c1"元素下的标签为a的元素*/
//---------------------------------------------------------------
$('.c1',document.getElementById('test1'));/*第二个参数为范围,取得test1内的所有class="c1"的元素*/
</script>
</body>
</html>
如有任何建议或疑问，欢迎留言讨论。