JS模拟jQuery选择器

浏览数：49 / 时间：2015年06月09日

JavaScript模拟jQuery选择器

实现了以下五种选择方法：

$("#id")

$(".class")

$("tag")

$("tag#id")

$("tag.class")

 1 function $(strSelector){
 2     var reId=/#/g;
 3     var reClass=/\./g;
 4     
 5     /* 通过 class 获取元素 */
 6     function getByClass(sClass){
 7         var arrE=[];
 8         var allE=document.getElementsByTagName("*");
 9         var re=new RegExp("\\b" + sClass + "\\b","g");
10         
11         for(var i=0;i<allE.length;i++){
12             if(allE[i].className.toString().search(re) !=-1){
13                 arrE.push(allE[i]);
14             }
15         }
16         return arrE;
17     }
18     
19     
20     /* 包含 # 情况--- id 选择器 */
21     if(reId.test(strSelector)){
22         var eId=strSelector.split("#");
23         
24         if(eId[0]!=""){
25             var isTag=document.getElementsByTagName(eId[0]);
26             var isId= document.getElementById(eId[1]);
27             
28             for(var i=0;i<isTag.length;i++){
29                 if(isId.id == isTag[i].id){
30                     return isId;
31                 }
32             }
33         }
34         else{
35             return document.getElementById(eId[1]);
36         }
37     }
38     /* 包含 . 情况--- class 选择器 */
39     else if(reClass.test(strSelector)){
40         var eClass=strSelector.split(".");
41         
42         if(eClass[0]!=""){
43             var isTag=document.getElementsByTagName(eClass[0]);
44             var isClass= getByClass(eClass[1]);
45             var arr=[];
46             
47             for(var i=0;i<isTag.length;i++){
48                 for(s=0;s<isClass.length;s++){
49                     if(isClass[s].className == isTag[i].className){
50                         arr.push(isClass[s]);
51                     }
52                 }
53             }
54             
55             return arr;
56         }
57         else{
58             return getByClass(eClass[1]);
59         }
60     }
61     /* 获取 tag 符合的元素 */
62     else{
63         return document.getElementsByTagName(strSelector);
64     }
65 }