简易选择器,供新手学习参考。

直接贴代码,
目前不支持组选择器(selector,selector),这种带逗号的
不支持+,>,~这三种css3选择符。

View Code
  1 /*
2 支持以下简易选择:
3
4 Zhus.Selector.find("div.cls span");
5 Zhus.Selector.find(".cls span");
6 Zhus.Selector.find("#id span");
7 Zhus.Selector.find("span[data='data']");
8
9 类似以上等等。。。
10
11 提示:
12 如果是自己想要使用,记得加上querySelectorAll判断。
13 */
14
15 /*
16 * selector
17 * simple selector
18 *
19 * */
20 Zhus.Selector = {
21 "chunker": /((?:\([^)]+\)|\[[^\]]+\]|[^ ,\(\[])+)/g,
22 "match": {
23 "ID": /#([\w\u00c0-\uFFFF_-]+)/,
24 "TAG": /^([\w\u00c0-\uFFFF_-]+)$/,
25 "NAME": /\[name=(['"])?([\w\u00c0-\uFFFF_-]+)\1?\]/,
26 "CLASSNAME": /\.([\w\u00c0-\uFFFF_-]+)/,
27 "ATTR": /\[([\w\u00c0-\uFFFF_-]+)=(['"]?)([\w\u00c0-\uFFFF_-]+)\2\]/
28 },
29 "quick": function(match) {
30 var els = [];
31 if ( !! document.querySelectorAll) {
32 els = document.querySelectorAll(match);
33 }
34 return els;
35 },
36 "simple": {
37 "id": function(id) {
38 return document.getElementById(id);
39 },
40 "tag": function(tag, obj) {
41 obj = obj ? obj: document;
42 return obj.getElementsByTagName(tag)
43 },
44 "name": function(name, obj) {
45 obj = obj ? obj: document;
46 return obj.getElementsByName(name)
47 }
48 },
49 "filter": {
50 "ID":function(match, selector, loops){
51 var match = match,
52 loops = loops || [document];
53 var els = [],
54 tagName,
55 source = [];
56 if (m = selector.match(match)) {
57 tagName = RegExp.leftContext || "*";
58 } else {
59 return [];
60 }
61 obj = document.getElementById(m[1]);
62 return [obj];
63 },
64 "TAG":function(match, selector, loops){
65 var match = match,
66 loops = loops || [document];
67 var els = [],
68 tagName,
69 source = [];
70 if (m = selector.match(match)) {
71 tagName = m[0];
72 } else {
73 return [];
74 }
75 var j = 0,
76 k = loops.length;
77 for (; j < k; j++) {
78 source = source.concat(Array.prototype.slice.call(loops[j].getElementsByTagName(tagName), 0));
79 }
80 els = els.concat(source);
81 return els;
82 },
83 "NAME": function(match, selector, loops) {
84 var match = match,
85 loops = loops || [document];
86 var els = [],
87 tagName,
88 source = [];
89 if (m = selector.match(match)) {
90 tagName = RegExp.leftContext || "*";
91 } else {
92 return [];
93 }
94 var j = 0,
95 k = loops.length;
96 for (; j < k; j++) {
97 source = source.concat(Array.prototype.slice.call(loops[j].getElementsByTagName(tagName), 0));
98 }
99 var l = source.length,
100 i = 0;
101 for (; i < l; i++) {
102 if (source[i].getAttribute("name") == m[2]) {
103 els.push(source[i]);
104 }
105 }
106 return els;
107 },
108 "CLASSNAME": function(match, selector, loops) {
109 var match = match,
110 loops = loops || [document];
111 var els = [],
112 tagName,
113 source = [];
114 if (m = selector.match(match)) {
115 tagName = RegExp.leftContext || "*";
116 } else {
117 return [];
118 }
119 var j = 0,
120 k = loops.length;
121 for (; j < k; j++) {
122 source = source.concat(Array.prototype.slice.call(loops[j].getElementsByTagName(tagName), 0));
123 }
124 var l = source.length,
125 i = 0;
126 for (; i < l; i++) {
127 if ((" " + source[i].className + " ").indexOf(" " + m[1] + " ") !== - 1) {
128 els.push(source[i]);
129 }
130 }
131 return els;
132 },
133 "ATTR": function(match, selector, loops) {
134 var match = match,
135 loops = loops || [document];
136 var els = [],
137 tagName,
138 source = [];
139 if (m = selector.match(match)) {
140 tagName = RegExp.leftContext || "*";
141 } else {
142 return [];
143 }
144 var j = 0,
145 k = loops.length;
146 for (; j < k; j++) {
147 source = source.concat(Array.prototype.slice.call(loops[j].getElementsByTagName(tagName), 0));
148 }
149 var l = source.length,
150 i = 0;
151 for (; i < l; i++) {
152 if (source[i].getAttribute(m[1]) == m[3]) {
153 els.push(source[i]);
154 }
155 }
156 return els;
157 }
158 }
159 }
160 Zhus.Selector.find = function(selector, context, results) {
161 var context = context || [document],
162 results = results || [],
163 parts = [],
164 pt,
165 m,
166 m1,
167 chunker = Zhus.Selector.chunker;
168 chunker.lastIndex = 0;
169 while ((m = chunker.exec(selector)) !== null) {
170 parts.push(m[1]);
171 }
172 pt = parts.shift();
173 for(var a in Selector.match){
174 if((m1 = pt.match(Selector.match[a])) !== null){
175 results = Zhus.Selector.filter[a](Selector.match[a],pt,context);
176 }
177 }
178 if (parts.length > 0) {
179 results = Zhus.Selector.find(parts.join(""),results);
180 }
181 return results;
182 }



原文地址:https://www.cnblogs.com/jiajiaobj/p/2336312.html