這篇文章主要介紹了jQuery選擇器源碼解讀(一)：Sizzle方法,本文用詳細的注釋解讀了Sizzle方法的實現源碼,需要的朋友可以參考下

對jQuery的Sizzle各方法做了深入分析(同時也參考了一些網上資料)后，將結果分享給大家。我將采用連載的方式，對Sizzle使用的一些方法詳細解釋一下，每篇文章介紹一個方法。

若需要轉載，請寫明出處，多謝。
 

1. /* 
2. * Sizzle方法是Sizzle選擇器包的主要入口，jQuery的find方法就是調用該方法獲取匹配的節點 
3. * 該方法主要完成下列任務： 
4. * 1、對于單一選擇器，且是ID、Tag、Class三種類型之一，則直接獲取并返回結果 
5. * 2、對于支持querySelectorAll方法的瀏覽器，通過執行querySelectorAll方法獲取并返回匹配的DOM元素 
6. * 3、除上之外則調用select方法獲取并返回匹配的DOM元素 
7. *  
8. *  
9. * @param selector 選擇器字符串 
10. * @param context 執行匹配的最初的上下文（即DOM元素集合）。若context沒有賦值，則取document。 
11. * @param results 已匹配出的部分最終結果。若results沒有賦值，則賦予空數組。 
12. * @param seed 初始集合 
13. */ 
14. function Sizzle(selector, context, results, seed) { 
15. var match, elem, m, nodeType, 
16. // QSA vars 
17. i, groups, old, nid, newContext, newSelector; 
18.  
19. /* 
20. * preferredDoc = window.document 
21. *  
22. * setDocument方法完成一些初始化工作 
23. */ 
24. if ((context ? context.ownerDocument || context : preferredDoc) !== document) { 
25. setDocument(context); 
26. } 
27.  
28. context = context || document; 
29. results = results || []; 
30.  
31. /* 
32. * 若selector不是有效地字符串類型數據，則直接返回results 
33. */ 
34. if (!selector || typeof selector !== "string") { 
35. return results; 
36. } 
37.  
38. /* 
39. * 若context既不是document（nodeType=9），也不是element(nodeType=1)，那么就返回空集合 
40. */ 
41. if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) { 
42. return []; 
43. } 
44.  
45. // 若當前過濾的是HTML文檔，且沒有設定seed，則執行if內的語句體 
46. if (documentIsHTML && !seed) { 
47.  
48. /*  
49. * 若選擇器是單一選擇器，且是ID、Tag、Class三種類型之一，則直接獲取并返回結果 
50. *  
51. * rquickExpr = /^(?:#([/w-]+)|(/w+)|/.([/w-]+))$/ 
52. * 上述正則表達式括號內三段依次分別用來判斷是否是ID、TAG、CLASS類型的單一選擇器 
53. * 上述正則表達式在最外層圓括號內有三個子表達式（即三個圓括號括起來的部分）， 
54. * 分別代表ID、Tag、Class選擇器的值，在下面代碼中，分別體現在match[1]、match[2]、match[3] 
55. */ 
56. if ((match = rquickExpr.exec(selector))) { 
57. // Speed-up: Sizzle("#ID") 
58. // 處理ID類型選擇器，如：#ID 
59. if ((m = match[1])) { 
60. // 若當前上下文是一個document，則執行if內語句體 
61. if (nodeType === 9) { 
62. elem = context.getElementById(m); 
63. // Check parentNode to catch when Blackberry 4.6 
64. // returns 
65. // nodes that are no longer in the document #6963 
66. if (elem && elem.parentNode) { 
67. // Handle the case where IE, Opera, and Webkit 
68. // return items 
69. // by name instead of ID 
70. /* 
71. * 一些老版本的瀏覽器會把name當作ID來處理， 
72. * 返回不正確的結果，所以需要再一次對比返回節點的ID屬性 
73. */ 
74. if (elem.id === m) { 
75. results.push(elem); 
76. return results; 
77. } 
78. } else { 
79. return results; 
80. } 
81. } else { 
82. // Context is not a document 
83. /* 
84. * contains(context, elem)用來確認獲取的elem是否是當前context對象的子對象 
85. */ 
86. if (context.ownerDocument 
87. && (elem = context.ownerDocument.getElementById(m)) 
88. && contains(context, elem) && elem.id === m) { 
89. results.push(elem); 
90. return results; 
91. } 
92. } 
93.  
94. // Speed-up: Sizzle("TAG") 
95. // 處理Tag類型選擇器，如：SPAN 
96. } else if (match[2]) { 
97. push.apply(results, context.getElementsByTagName(selector)); 
98. return results; 
99.  
100. // Speed-up: Sizzle(".CLASS") 
101. /* 
102. * 處理class類型選擇器，如：.class 
103. * 下面條件判斷分別是： 
104. * m = match[3]：有效的class類型選擇器 
105. * support.getElementsByClassName 該選擇器的div支持getElementsByClassName 
106. * context.getElementsByClassName 當前上下文節點有getElementsByClassName方法 
107. *  
108. */ 
109.  
110. } else if ((m = match[3]) && support.getElementsByClassName 
111. && context.getElementsByClassName) { 
112. push.apply(results, context.getElementsByClassName(m)); 
113. return results; 
114. } 
115. } 
116.  
117. // QSA path 
118. /* 
119. * 若瀏覽器支持querySelectorAll方法且選擇器符合querySelectorAll調用標準，則執行if內語句體 
120. * 在這里的檢查僅僅是簡單匹配 
121. * 第一次調用Sizzle時，rbuggyQSA為空 
122. *  
123. * if語句體內對當前context對象的id的賦值與恢復，是用來修正querySelectorAll的一個BUG 
124. * 該BUG會在某些情況下把當前節點（context）也作為結果返回回來。 
125. * 具體方法是，在現有的選擇器前加上一個屬性選擇器：[id=XXX]， 
126. * XXX 為context的id，若context本身沒有設置id，則給個默認值expando。 
127. */ 
128.  
129. if (support.qsa && (!rbuggyQSA || !rbuggyQSA.test(selector))) { 
130. nid = old = expando; 
131. newContext = context; 
132. // 若context是document，則newSelector取自selector，否則為false 
133. newSelector = nodeType === 9 && selector; 
134.  
135. // qSA works strangely on Element-rooted queries 
136. // We can work around this by specifying an extra ID on the 
137. // root 
138. // and working up from there (Thanks to Andrew Dupont for 
139. // the technique) 
140. // IE 8 doesn't work on object elements 
141. if (nodeType === 1 && context.nodeName.toLowerCase() !== "object") { 
142. groups = tokenize(selector); 
143.  
144. if ((old = context.getAttribute("id"))) { 
145. /* 
146. * rescape = /'|///g, 
147. * 這里將old中的單引號、豎杠、反斜杠前加一個反斜杠 
148. * old.replace(rescape, "//#FormatTableID_0#amp;")代碼中的#FormatTableID_0#amp;代表匹配項 
149. */ 
150. nid = old.replace(rescape, "//#FormatTableID_0#amp;"); 
151. } else { 
152. context.setAttribute("id", nid); 
153. } 
154. nid = "[id='" + nid + "'] "; 
155.  
156. // 重新組合新的選擇器 
157. i = groups.length; 
158. while (i--) { 
159. groups[i] = nid + toSelector(groups[i]); 
160. } 
161. /* 
162. * rsibling = new RegExp(whitespace + "*[+~]") 
163. * rsibling用于判定選擇器是否存在兄弟關系符 
164. * 若包含+~符號，則取context的父節點作為當前節點 
165. */ 
166. newContext = rsibling.test(selector) && context.parentNode 
167. || context; 
168. newSelector = groups.join(","); 
169. } 
170.  
171. if (newSelector) { 
172. /* 
173. * 這里之所以需要用try...catch， 
174. * 是因為jquery所支持的一些選擇器是querySelectorAll所不支持的， 
175. * 當使用這些選擇器時，querySelectorAll會報非法選擇器， 
176. * 故需要jquery自身去實現。 
177. */ 
178. try { 
179. // 將querySelectorAll獲取的結果并入results，而后返回resulsts 
180. push.apply(results, newContext 
181. .querySelectorAll(newSelector)); 
182. return results; 
183. } catch (qsaError) { 
184. } finally { 
185. if (!old) { 
186. context.removeAttribute("id"); 
187. } 
188. } 
189. } 
190. } 
191. } 
192.  
193. // All others 
194. // 除上述快捷方式和調用querySelectorAll方式直接獲取結果外，其余都需調用select來獲取結果 
195. /* 
196. * rtrim = new RegExp("^" + whitespace + "+|((?:^|[^////])(?:////.)*)" 
197. * + whitespace + "+$", "g"), 
198. * whitespace = "[//x20//t//r//n//f]"; 
199. * 上述rtrim正則表達式的作用是去掉selector兩邊的空白，空白字符由whitespace變量定義 
200. * rtrim的效果與new RegExp("^" + whitespace + "+|" + whitespace + "+$", "g")相似 
201. */ 
202. return select(selector.replace(rtrim, "$1"), context, results, seed); 
203. } 

各位朋友，若覺得寫得不錯，幫我頂一下，給點動力，多謝
!