One of qwrap selector decryption: Understanding the selector Writing Method

Qwrap uses an independent QW. Selector Instead of sizzle.
Compared with sizzle, QW. selector abandons isxml parameters (relentless abandonment) and Selector groups, except for the re-sorting (limited practical meaning and too much efficiency impact). Besides the query method, other selector-related methods such as filter are also provided (For details, refer to QW selector Introduction). selector that requires Backtracking is more rigorous than sizzle (for details, see jquery delegate ); the size is less than 70% of sizzle, and the performance is equal. Although there have been no major changes in the past two years, it seems that qwrap is not inferior to sizzle today. Therefore, qwrap decided to continue using it when it was open source.
There are very few people in the industry who are concerned about selector implementation, not to mention the number of people who have implemented selector. Some people suggest that I write some information about selector implementation. Article .
Although there will not be a few Readers interested in it, it is also quite meaningful for me to develop articles from the perspective of thinking. Therefore, let's write about it.

Let's first get to know thisSelector A: "textarea, # myid> input. Date [type = text]: enabled"
The "," is a parallel link character, which splits the selector ASelector a "textarea"AndA. B "# myid> input. Date [type = text]: enabled"Two selectors.
Parallel Connection means that if an element conforms to a A or B, the element meets.

A selector containing the Parallel Link character "," calledSelector Group. It is also a generalized selector.
The selector A and B areIndependent Selector.

Check out selector a B: "# myid> input. Date [type = text]: enabled"
">" Is the parent-child relationship character, which splits A and BSelector a B1 "# myid"AndA B2 "Input. Date [type = text]: enabled"Two selectors.
Css3 has five Relational operators (Combinator):
"," Parallel Link operator (highest priority), "Div, span" indicates Div or span
"" Descendant relationship character, "Div span" indicates the span descendant of the DIV
">" Parent-child relationship character. "div> span" indicates the span son of the div.
"+" Adjacent sibling relationship, "Div + span" indicates the adjacent span brother of the DIV
"~" Sibling character, "~ B "indicates the span brother of the div.
Here, the selector without link characters is calledSelectorFor example,Textarea", A B1"# Myid", A B2"Input. Date [type = text]: Enabled"

Let's take a look at B2 "input. Date [type = text]: enabled"
"Tagname is input" and "classname contains date" and "[type = text]" and ": Enable"
They can be divided into three types:
Shortcut selector: Includes *, tagname, # ID, and. classname.
Attribute selector: enclosed by square brackets
Pseudo-class selector: It is represented by a colon and a pseudo-class name. For pseudo-classes that support parameters, enclose parameters in parentheses, such as ": Nth-child (ODD )"

Generally, it is enough to write CSS to understand so much.
However, many people may have a misunderstanding of the selector, which leads to a knot in the implementation of the decryption selector.
Question 1: In the selector "# myid> input. Date [type = text]: enabled", how many self-selected tools and Relational operators are available?
---- The natural answer is: two selector and one link character.
Question 2: the selector "# myid div> input. Date [type = text]: enabled" contains several self-selection devices and Relational operators?
---- Naturally, the answer is: Three selector and two Relational operators.
Question 3:Why is the selector more than a link character?
---- Why !! Then let's get to know the independent selector again.

First look at the queryselectorall method standard,
The queryselectorall () method on the nodeselector interface must, when invoked,
Return a nodelist containing all of the matching element nodes within the node's Subtrees, in document order. If there are no such nodes, the method must return an empty nodelist.
Returns a set of child nodes that match the selector.
But it does not explain, the reference start point of this selector.
For example, for such a tree structure: HTML> body> Div # div1> Div # div2

 Document. getelementbyid (  '  Div1  '  ). Queryselectorall (  '  Div  '  );  // This is clear. The returned result is: [Div # div2]  
  Document. getelementbyid (  '  Div1  '  ). Queryselectorall (  '  Div  '  );  //  What about this? The returned result is: [Div # div2], or an empty set []? 

In fact, the browser is native and Returns [Div # div2]; while jquery's $ ('# div1 '). find ('div Div ') returns an empty set (less than 1.6 of jquery has the problem of inconsistent native queryselectorall ).
That is to say, it achieves the same result as this usage in the standard:
Document. getelementbyid ('div1 '). queryselectorall (': ScopeDiv '); (Note: Scope pseudo class see: http://dev.w3.org/2006/webapi/selectors-api2/#the-scope-pseudo-class)
That is to say,Jquery adds the default value: Scope.
Therefore, jquery can also be used as follows:
(('Your div1'0000.css ('color', 'red'). Find ('> div'0000.css ('color', 'blue ');
The qwrap policy is consistent with that of jquery. The QW policy is used as follows:
W('your div1'0000.css ('color', 'red'). Query ('> div'0000.css ('color', 'blue ');
The second selector is"> DivIt has a self-selected device with a relational character, that is, the number of self-selected devices is not more than the number of relational characters.

Now, let's answer this question again: the selector "# myid> input. Date [type = text]: enabled" contains several optional tools and Relational operators?
---- I will answer, before # myid, there should actually be a "" Descendant link character, but we have omitted it. That is, it has two self-selected tools and two Relational operators. However, when writing, it saves the descendant Relational operators starting.

Appendix: qwrap Web site: http://www.qwrap.com