jquery,$, selector, regular expression

1. Blank

1. //whitespace characters http://www.w3.org/TR/css3-selectors/#whitespace
2. whitespace = "[\\x20\\t\\r\\n\\f]",

In the string, the slash is used for escaping, and if you want to output a slash, it must be represented by a double slash. The above string is represented directly by a regular expression object, as follows:

/[\x20\t\r\n\f]/,

The reason why five characters are defined as blank, out of this CSS3 standard, see: http://www.w3.org/TR/css3-syntax/4.1 Chapter whitespace logic diagram. The exact words: only the characters "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "form feed "(u+000c) can occur in whitespace.

\\X20 represents a space, \\t represents a tab, \\r represents a carriage return (line terminator), \\n Represents a newline character, and \\f represents a page break

2. Identifiers

Although the English here is not an identifier, it is actually used to judge the tag, class and other identifiers, so it is translated into identifiers.

1. //http://www.w3.org/TR/css3-syntax/#characters
2. characterencoding = "(?: \ \\\.| [\\w-]| [^\\x00-\\xa0]) +",,

As you can see, identifiers can be made up of three types, one: \\\\. ; II: [\\w-]; three: [^\\x00-\\xa0]. The CSS 3 standard is described in the Ident-token diagram of the http://www.w3.org/TR/css3-syntax/4.1 chapter. Of course, careful people will find that this regular expression is not written exactly according to the standard, but this has been able to deal with most of the common situation, enough, after all, to consider the efficiency of the problem.

Part I: \\\\., which represents the escape character (including Unicode code), preceded by a backslash (\) followed by a string of any character except a newline and a line terminator, where jquery does not match the escape character according to the criteria, but instead uses the decimal point to represent the subsequent character, in the actual code, Exact matches are made in type name and type value conversions such as attr, Class, ID, and so on. Its CSS 3 standard see: Http://www.w3.org/TR/CSS21/syndata.html#escaped-characters

Part Two: [\\w-], which represents an identifier consisting of a number, an English letter, and an underscore.

Part III: [^\\X00-\\XA0], representing non-ASCII code.

3. Identification

1. //Loosely modeled on CSS identifier characters
2. //An unquoted value should is a CSS identifier http://www.w3.org/TR/css3-selectors/#attribute-selectors
3. //Proper syntax:http://www.w3.org/tr/css21/syndata.html#value-def-identifier
4. identifier = Characterencoding.replace ( "W", "w#"),

Why you need to add a # here, it is unclear, even if the standard document it gives, there is no reason to find, and the standard identifier does not allow the use of the # character. Who has found the reason, please share. And identifier is actually used to make judgments rather than identifiers, I'm only using the # character in the href, so I'm guessing if it's used to support the evaluation of the HREF value, so add this #.

4. Attribute Selector

1. //Acceptable operators http://www.w3.org/TR/selectors/#attribute-selectors
2. attributes = "\\[" + whitespace + "* (" + characterencoding + ")" + whitespace +
3. "*(?:( [*^$|! ~]?=) "+ whitespace + " * (?:( [‘\"]) ((?:\ \\\.| [^\\\\]) *?) \\3| ("+ identifier + ") |) " + whitespace + "*\\]",

The following properties are in the basic format:

[attribute name match symbol value]

Examples are as follows:

[Title! = "Hello"]

The above property selector indicates that the Title property value is not equal to Hello

The regular expression is interpreted from left to right in the following sequence:

"\\[" means the left bracket

whitespace + "*" indicates any number of whitespace characters between the two before and after the same

"* (" + characterencoding + ")" denotes the name of the property

(?:( [*^$|! ~]?=) denotes =, *=, ^=, $=, |=,! =, ~=7 match symbols

"(?:( [‘\"]) ((?:\ \\\.| [^\\\\]) *?) \\3| ("+ identifier +") |) " Represents an escape character enclosed in single or double quotation marks or any combination of characters except a backslash, or [identity]. Where \\3 represents a character that is consistent with ([' \ "]), in which case it is represented by \\3 because ([' \"]) a match is possible with a single quote or a double quote, and \\3 indicates that the current position matches the character ([' \ "]), which is either a pair of single or paired double quotes. 3 represents the 3rd pair of parentheses from the left side of the regular expression (parentheses followed by: and \ \ (not counted).

\ \] represents the right bracket

5. Pseudo-Class Selector

1. //Prefer arguments quoted,
2. //Then not containing pseudos/brackets,
3. //Then attribute selectors/non-parenthetical expressions,
4. //Then anything else
5. //These preferences is here to reduce the number of selectors
6. //Needing tokenize in the PSEUDO prefilter
7. Pseudos = ":(" + characterencoding + ") (?: \ \((([‘\"])((?:\ \\\.| [^\\\\]) *?) \\3| ((?:\ \\\.| [^\\\\()[\\]]|" + Attributes.replace ( 3, 8) + ") *) |. *)\\)|)",

The pseudo-class basic format is as follows:

":" means the colon begins

"(" + characterencoding + ")" denotes the pseudo-class name

(?: \ \ (First group | second group | third group) \ \) |) Represents any or none of the three matching characters enclosed in parentheses, the last vertical bar in the subexpression is equivalent to, indicating that the preceding expression can have no or 1 occurrences.

First group: ([' \ ']) (?: \ \\\.| [^\\\\]) *?) \\3 represents an escape character enclosed in single or double quotation marks or any combination of characters except a backslash

The second group: (?: \ \\\.| [^\\\\()[\\]]|" + Attributes.replace (3, 8) + ") *) represents an escape character or any character set that does not contain backslashes, parentheses, and brackets, or a character set that conforms to the property selector

Group Three:. * represents any number of character sets except newline and line terminator.

Pseudo-class is the most complex regular expression, which is used to match three parts of a pseudo-class bracket selector, which is mainly used to match the following conditions:

First group: Used to match strings enclosed in single or double quotation marks in parentheses, such as:: Contains (' Hello ')

Second group: used to match a selector other than an attribute in parentheses, a pseudo-class with parentheses, i.e. a selector that does not have the possibility of nesting, such as:: EQ (2),: Not (: first)

Group Three: all selectors except above.

Also, it is important to state here that the pseudo-class recognizes that the information in parentheses is in a greedy manner, so that, except for the second set of matches it is not possible to go beyond the pseudo-class itself (because it is not allowed to include a closing parenthesis), the remainder may span multiple selectors, for example: a matching selector string is as follows:

1. Selector One: not (' tile ': first): Contains (' title ');
2. Selector Two: not (: first): eq (4). Class

For selector One, you can match the first set, but the match is not ' tile ', but ' tile ': Contains (' title ', which is the greedy way.

For selector Two, the first to second group of sub-matches are not satisfied, so we have to match the third item, so the match is: first): EQ (4, of course, this is also the greedy way.

In the jquery code, the matching content will be further confirmed, get: not the actual end of the position, this is beyond the content of this title, not in detail here.

Everyone, if you feel this article is useful, please help the top, thank you!

If you have any questions, you can also write them in the comments.

jquery,$, selector, regular expression