Analysis of differences in ID handling of colons in jquery selectors

questions raised

For an input box, if the ID contains a colon (:), the selector needs to have a special wording,

For example, the ID is lower

<input type= "text" value= "ddd" id= "A:B" >

Use $ (selector) to use the #id value directly, no DOM found

Console.log ("#a: B")
Console.log ($ ("#a: B"). length)//Output 0

After exploring, you can choose to DOM using the following two methods:

$ ("#a \\:b");

$ ("[id^= ' a:b ']");

One of the first, need to add a backslash (\) before the colon (:), some classmates want to ask, the name is two backslash, trick me?

See the next section for more information.

JS Escape

The string syntax in JS requires a few metacharacters, and for those metacharacters you need to use a transfer if you want to appear in a string:

Escape table: From http://www.w3school.com.cn/js/js_special_characters.asp

Code	Output
\‘	Single quotation marks
\"	Double quotes
\&	and number
\\	Back slash
\ n	Line break
\ r	Carriage return character
\ t	Tabs
\b	Backspace
\f	Page break

In fact, as seen from the table above, it is not only the metacharacters that need to be displayed to escape (","), but also the case where a specific character can be escaped to another meaning after using a transfer, for example, N--to a newline character.

From the learning can follow the following logic to understand the whole JS escape:

1. The JS string uses single or double quotation marks as the "parentheses" of the string, representing a whole string, inside the quotation mark as the string content,

2, then the question came, the string content to include the quotation marks, how to do?

3, JS Designer (Brendan Eich) consider, similar to the C language relay method, using \x way to represent X, that is, the escape rule \x = = x, where x includes quotation marks (' ").

4, since the use of the \x format to perform the escape, the string content to include \ What to do? If \ is used directly, it is likely to escape unexpectedly with a normal character later.

5, since the escape rule has been set \x = = x, then \ in the string content exists in the scene, is conforming to this rule, the rule application effect is \ = = \,

6, finally there is a scene, there are many control characters (including the format control characters, such as \ n, and non-printable characters), the characters themselves do not have printable characters, that is, not in ASCII [32, 126] appears.

But characters can only write characters between [32, 126], so in this case you need to define a new escape, to not add escape metacharacters, escape characters to \,

The escape rule is \x = = y, x in [+, 126], y in [0, +] or 127

Description: If the use of characters in non-3 and 6 between [32, 126] is escaped, that is, if the rule (\x) is applied, the resulting or X-compliant escape rule.

Summarized as:

Demo Code:

Console.log ('----\\x present x (x is printable character)----'); Console.log (' Slash + slash= ' + "\ \");//\ is part of transfer encoding syntaxConsole.log (' slash + ' = ' + ' \ ');//"is collision with a string syntax double quotation, eg" XX "Wrapped by"Console.log ('----\\x present control character----'); Console.log (' Slash + n= ' + ' \ n ');//\ Present line breakConsole.log ('----\\x equal x when X was not needed transfer concoding----'); Console.log (' slash + 8 = ' + ' \8 ');//\8 = = 8Console.log (' slash + o= ' + "\o");//\o = = OConsole.log (' slash +: = ' + ' \: ');// \: == :

jquery execution Sequence tracking

After analyzing the jquery source code, the call order of $ ("")

1, $ = = = JQuery.fn.init

2. Go to JQuery.fn.init return (context | | rootjquery). FIND (selector);

3, find = = Jquery.find = = Sizzle

4. Sizzle call Newcontext.queryselectorall (Newselector)

Queryselectorall is a selector query interface implemented for the latest browsers,

This interface is implemented on each DOM, see http://www.cnblogs.com/snandy/archive/2011/03/30/1999388.html for details.

So looking here, it shows that jquery and sizzle do not handle selectors. The Queryselectorall interface behavior is entirely browser-implemented.

CSS Selector Rules

There is a set of specifications for the selector:

http://www.w3.org/TR/css3-selectors/#selectors

There is a description of the ID selector, in the visible selector: the meta-character of the selector, that is, reserved characters, do pseudo-class use, other circumstances can not conflict with it.

So read here, crossing understand $ ("#a \\:b"); Why do you want to add escape to the colon?

For this selector is "#a \\:b" because it is a JS string, \ \ means \, then this string is stored in memory as

Can guess the implementation of Queryselectorall, first with JS to selector string parsing, first analysis: The front without the colon, before and after the contents of the split, before the selector body part, followed by Pseudo-class part,

Then to the previous topic section, perform the JS string escape parsing, similar to the Eval interface execution behavior:

Eval ("var evalselector = ' #a \\:b ';")
Console.log (Evalselector); Output #a: b

Restores the escaped table write to

Run the following JS:

Console.log ("#a: B") Console.log ("#a \:b")Console.log (Document.queryselectorall ("#a \\:b"). Length) Console.log ("[id^= ' a:b ']") Console.log (Document.queryselectorall ("[id^= ' a:b ']"). Length)

Print as follows:

Conclusion:

1, the colon (:) is not escaped in JS ordinary visible characters, "#a: b" = = = "#a \:b"

2, "#a \\:b" to avoid the CSS selector pseudo-Class identification symbol conflict solution, after the JS string escaped, need two backslash \, finally in the Queryselectorall interface, the \: converted to:

3, for the case that the ID contains a colon, you can use "[id^= ' a:b ']" of the table write, this does not need to escape the colon, because there is no conflict in this format is possible.

If the recommended ID is variable, use "[id^= ' a:b ']" mode.

Demo Code

<HTML><Head>         <Scripttype= "Text/javascript"src= "./jquery.js"></Script>        <style>        </style></Head> <Body>        <inputtype= "text"value= "DDD"ID= "A:b">        <Script>Console.log ('----\\x present x (x is printable character)----'); Console.log ('Slash + slash='+"\\"); //\ is part of transfer encoding syntaxConsole.log ('slash + "='+"\""); //"is collision with a string syntax double quotation, eg" XX "Wrapped by"Console.log ('----\\x Present control character----'); Console.log ('Slash + n='+"\ n"); //\ Present line breakConsole.log ('----\\x equal x when X was not needed transfer concoding----'); Console.log ('Slash + 8='+"\8"); //\8 = = 8Console.log ('Slash + o='+"\o"); //\o = = OConsole.log ('slash +: ='+"\:"); // \: == :Console.log ('#a +slash+slash+:b='+"#a \\:b"); //#a \\:b = = #a \:bConsole.log ('jquery length='+$("#a \\:b"). length); //length = = 1 with selector #a \\:bConsole.log ('jquery length='+$("[id^= ' a:b ']"). length); //length = = 1 with selector [id^= ' a:b ']Console.log ("#a: b") //output #a: b  Console.log ("#a \:b") //output #a: b  Console.log (Document.queryselectorall ("#a \\:b"). Length)//output 1 Console.log ("[id^= ' a:b ']") //: Do not need transfer coding Console.log (Document.queryselectorall ("[id^= ' a:b ']"). Length) //output 1         </Script></Body></HTML>

Analysis of differences in ID handling of colons in jquery selectors