The understanding of the jquery selector Sizzle Lexical analyzer

Source: Internet
Author: User

Sizzle's introduction:Sizzle is the object of the internal implementation of the selector lexical analysis in jquery, while Tokenize is like a div. classname > A:[attrname=name] Such a selector, which is serialized into an array, each cell inside is a label Can be tag,classname, connector [> + etc], and eventually return this array for later use. In the jquery selector,
Document.getelementbyid,document.getelemetbytagname, Document.getelementbyclassname,document.queryselector, Document.queryselectorall,
such as native selector interface, JQ first to query these interfaces,
Elem = document.getElementById (match[2]);
If this interface is not compatible, it will call its own implementation of the selector sizzle. These CSS selectors, in the lexical parsing process, break down each selector into characters, one unit for each character
The structure of each member unit is:
{    "div" ],    "TAG",    "div"}

or the connector ">", "" "," + "," ~ "
{    "    >" ">"}

Sizzle's Tokenize source code:
Tokenize = Sizzle.tokenize =function(selector, parseonly) {varmatched, match, tokens, type, sofar, groups, prefilters, cached= tokencache[Selector + "" ]; if(cached) {returnParseonly? 0:cached.slice (0 ); } Sofar=selector; Groups= []; Prefilters= Expr.prefilter;//preprocessing Methods             while(sofar) {//Comma and First runif (!matched | | (match = Rcomma.exec (Sofar))) {            if(match) {//Don ' t consume trailing commas as validSofar = Sofar.slice (match[0].length) | |Sofar; } Groups.push (Tokens= []) ); } Matched=false; //combinators//matches the connection symbol ">", "" "," + "," ~ "if (match = Rcombinators.exec (Sofar))) {matched =Match.shift (); Tokens.push ({value:matched,//Cast descendant combinators to Spacetype:match[0].replace (RTrim, "")            }); Sofar=Sofar.slice (matched.length); }        //Filters
Match filter: TAG CLASS ATTR child PSEUDO for (typeinexpr.filter) {if (match = matchexpr[type].exec (SOFAR)) && (!prefilters[type] | | (match = prefilters[type] (match)) ) {matched =Match.shift (); Tokens.push ({value:matched, Type:type, Matches:match }); Sofar=Sofar.slice (matched.length); } } //here, the first character has not yet captured the corresponding parsing result, so exit if (!matched) { Break; } } //return the length of the invalid excess//if we ' re just parsing//Otherwise, throw an error or Return tokens
If the conversion returns the length of the selector that did not match successfully, the token is returned, and an error is thrown. Return parseonly?SoFar.length:soFar?Sizzle.error (selector)://Cache The TokensTokencache (selector, groups). Slice (0 );};

Sizzle Matching Process:

Selector:

e.g.

Selector Selector:div > P +. Alen input[type= ' Radio '],div > P +. Alen input[type= ' checkbox ']

1. First, the first label Div, not the connection symbol, is found when filter filtering

2, then match the second character, for ">", to find the combinators match 3. Then match whether the first character is a comma [is then group], whether it is conbinator[">", "" "," + "," ~ " ], or the element in filter TAG CLASS ATTR child pseudo[Pseudo-element] ...   results of Sizzle matches: summary: In the look at Aaron's jquery source code analysis, and jquery source code, there are many puzzled place, write blog to smooth down the train of thought.
Reference: Http://www.cnblogs.com/aaronjs/p/3281911.html

The understanding of the jquery selector Sizzle Lexical analyzer

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.