Considerations for jquery selectors that contain spaces and special symbols

Article Introduction: issues to be aware of using the jquery selector.

First, the selector contains special symbols of considerations

1. The selector contains special characters such as ".", "#", "(" or "]".
It is not possible to include these special characters in a property value according to the rules of the world, but occasionally in an actual project, the expression contains "#" and "." Such special characters, if the normal way to deal with the words will be wrong. The way to resolve this type of error is to escape with an escape character.

<div id= "id#b" >bb</div>
< div id= "id[1]" >cc</div>

Can't write like this:
$ (' #id #b ');
$ (' #id [1] ');

You should use the escape symbol:
$ (' #id \ #b '); Escape special Character "#"
$ (' #id \\[1\\] '); Escape special Characters "[]"

2. Question of quotation marks for the property selector
1.3.1 version completely abandoned the 1.1.0 Legacy of the @ symbol, if you use more than 1.3.1 version, then you can not add the @ symbol before the attribute, such as:
$ (' div[@title = ' test '];

The correct wording is:
$ (' div[title= ' test '];

Second, the selector contains space considerations

The space in the selector is also not to be ignored, one more space or one less space may get very different results. Look at the following example, its HTML code is as follows:

<div class= "Test" >
<div style= "Display:none;" >aa</div>
<div style= "Display:none;" >bb</div>
<div style= "Display:none;" >cc</div>
<div class= "test" style= "Display:none;" >dd</div>
</div>
< div class= "test" style= "Display:none;" >ee</div>
< div class= "test" style= "Display:none;" >ff</div>


Use the followingJQuerySelectors to get them individually.

Note that a selector like this is distinguished
Although a space, but a very different effect.
var $t _a = $ ('. Test:hidden ');
var $t _b = $ ('. Test:hidden ');
var len_a = $t _a.length;
var len_b = $t _b.length;
Alert ("$ ('. Test:hidden ') =" +len_a); Output 4
Alert ("$ ('. Test:hidden ') =" +len_b); Output 3

Different results occur because the descendant selector differs from the filter selector.
var $t _a = $ ('. Test:hidden '); A space is a hidden element in the element that selects the class "Test".

var $t _b = $ ('. Test:hidden '); The absence of a space is the element that selects the hidden class "test".
This is the same as the CSS CSS if there is a DIV has two class attributes. Top and. Right <div class= the "top right" &GT;&LT;/DIV&GT; in CSS we have to select it to define styles that can only be written. top.right{} and cannot be written as. Top right{}