After a thorough analysis of the sizzle methods of jquery (also referring to some online materials), the results are shared with everyone. I will use a serial way to explain in detail the methods used by sizzle, and each article describes a method.
If you need to reprint, please specify the source, thank you.
/* * @param selector Selector String * @param context executes the original context (that is, the DOM element) that matches. If the context is not assigned, the document is taken. * @param results has been matched to the final result of the part. If results is not assigned, an empty array is assigned. * @param seed preprocessing results */function Sizzle (selector, context, results, seed) {var match, Elem, M, nodetype,//QSA Varsi, group s, old, nid, Newcontext, newselector;/* * preferreddoc = window.document * * Setdocument method completes some initialization work */if (context? cont ext.ownerdocument | | Context:preferreddoc) (!== document) {setdocument (context);} Context = Context | | Document;results = Results | | [];/* * If selector is not a valid string type data, then return directly to Results */if (!selector | | typeof selector!== "string") {return results;} /* * If the context is neither document (nodetype=9) nor element (nodetype=1), then return an empty collection */if ((NodeType = Context.nodetype)!== 1 & & NodeType!== 9) {return [];} If the current filter is an HTML document and no seed is set, then the statement body if (documentishtml &&!seed) {/* * If the selector is a single selector and is one of the ID, Tag, class three types is executed. Then directly gets and returns the result * * rquickexpr =/^ (?: # ([\w-]+) | ( \w+) |\. ([\w-]+)) $/* Above the regular expression in parentheses three paragraphs in order to determine whether the ID, TAG, class type of a single selector * The preceding regular expression has three sub-expressions (that is, three parentheses) within the outermost parentheses, representing the values of the ID, Tag, class selector, respectively, in the following code, in Match[1], match[2], match[3] */if (match = Rquickexpr.exec (selector)) {//Speed-up:sizzle ("#ID")//process ID type selector, e.g. #IDif ((M = match[1]) {//If the current context is a document, The IF inner statement body if (NodeType = = 9) {Elem = Context.getelementbyid (m);//Check parentnode to catch when Blackberry 4.6//returns/ /nodes that is no longer in the document #6963if (Elem && elem.parentnode) {//Handle the case where IE, Opera, and webkit//return items//by name instead of id/* * Some older browsers will treat name as ID, * return incorrect results, so you need to compare the ID property of the returned node again */if (elem.id = = = m) {Results.push (elem); return results;}} else {return results;}} else {//context is not a document/* * CONTAINS (context, elem) to confirm whether the acquired Elem is a sub-object of the current Context object */if (CONTEXT.OWNERDOCUMENT&A mp;& (Elem = Context.ownerDocument.getElementById (M)) && contains (context, elem) && elem.id = = = m) { Results.push (elem); return results;}} Speed-up:sizzle ("tag")//handle TAG type selector, such as: SPAN} else if (Match[2]) {push.apply (results, Context.getelementsbytagname (selector)); return results;//speed-up:sizzle (". Class ")/* * Processing class type Selector, such as:. Class * The following conditions are judged: * m = match[3]: Valid class type Selector * support.getelementsbyclassname div support GE for this selector Telementsbyclassname * Context.getelementsbyclassname Current context node has Getelementsbyclassname method * */} else if ((M = match[3]) &am p;& support.getelementsbyclassname&& context.getelementsbyclassname) {push.apply (results, Context.getelementsbyclassname (m)); return results;}} QSA path/* * If the browser supports the Queryselectorall method and the selector conforms to the Queryselectorall call standard, then execute the IF inside statement body * Check here is just a simple match * when the first call to sizzle, RBUGGYQSA is an empty * * If statement the assignment and recovery of the ID of the current context object is a bug used to correct queryselectorall * The bug will return the current node (context) as a result in some cases. * To do this, add a property selector to the existing selector: [Id=xxx], * XXX is the context ID, and if the context itself does not have an ID set, the default value is expando. */if (SUPPORT.QSA && (!RBUGGYQSA | |!rbuggyqsa.test (selector))) {nid = old = Expando;newcontext = context;//If cont Ext is document, then Newselector is taken from selector, otherwise falsenewselector = Nodetype = = 9 && selector;//QSA Works strangely on element-rooted queries//We can work around this by specifying an Extra ID on the//root//and working up from there (Thanks to Andrew Dupont for//the Technique)//IE 8 doesn ' t work on OB Ject Elementsif (NodeType = = = 1 && context.nodeName.toLowerCase ()!== "Object") {groups = Tokenize (selector); if ( Old = Context.getattribute ("id"))) {/* * Rescape =/' |\\/g, * here is the single quotation mark, backslash, and a backslash * old.replace (rescape, "\\$&") code The $& represents the match */nid = Old.replace (Rescape, "\\$&");} else {context.setattribute ("id", nid);} Nid = "[id= '" + nid + "']";//re-group the new selector i = Groups.length;while (i--) {Groups[i] = nid + Toselector (Groups[i]);} /* * rsibling = new RegExp (whitespace + "*[+~]") * rsibling is used to determine if the selector has a sibling character * If the +~ symbol is included, the parent node of the context is taken as the current node */newcontext = R Sibling.test (selector) && context.parentnode| | Context;newselector = Groups.join (",");} if (newselector) {/* * Try...catch is required here, * because some of the selectors supported by jquery are not supported by Queryselectorall,* When using these selectors, Queryselectorall will report an illegal selector, which requires jquery to implement itself. */try {//The results obtained by Queryselectorall are incorporated into results and then returned to resulstspush.apply (results, Newcontext.queryselectorall (newselector ); return results;} catch (Qsaerror) {} finally {if (!old) {Context.removeattribute ("id");}}}} All others//In addition to the above shortcuts and call Queryselectorall way to get the results directly, the rest need to call Select to get the results
<pre code_snippet_id= "603125" snippet_file_name= "blog_20150212_1_7852099" name= "code" class= "JavaScript" > Return Select (Selector.replace (RTrim, "$"), context, results, Seed);}
jquery Selector code detailed (a)--sizzle method