jquery Selector code detailed (a)--sizzle method

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.