The difference between the space in the jquery selector and the greater-than >, plus + and wave number is introduced _jquery

Concept

Space: $ (' parent childchild ') means to get all childchild nodes under parent
Greater than: $ (' Parent > Childchild ') means to get all the next levels under parent Childchild

Plus: $ (' pre + nextbrother ') means to get the next sibling node of the pre node, equivalent to the next () method

Wave Number: $ (' Pre ~ brother ') means to get all sibling nodes behind the pre node, equivalent to the Nextall () method

Detailed description

The existing code is as follows

<meta charset= "Utf-8" > <script type= "text/javascript" src= "Js/jquery-1.7.1.min.js" ></script> < Div id= "Imgs_box" > <ul class= "play_imgs_width imgs_source" > <li><a href= "javascript:;" ></a></li> <li><a "href=" javascript:; " ></a></li> <li><a "href=" javascript:; " ></a></li> </ul> <ul class= "I Mgs_buttons play_imgs_width "> <li><a href=" "class=" Buttons_ahover ">1</a></li> <li ><a href= "" class= "Buttons_default" >2</a></li> <li><a href= "" class= "Buttons_default" >3</a></li> </ul> <ul class= "Test" > <li> <ul class= "Test_first_chil D "> <li></li> <li></li> <li></li> <li></li> </ul&gt 
    ;  </li> </ul> </div>

Use of spaces

If you want to get all the a tags in imgs_box, you can use spaces, as follows

Gets all elements under Imgs_box 
$ (function () { 
  $ (' #imgs_box a '). each (function () { 
    console.log (this); 
  }); 

The effect is as shown below, and you can see that all elements are obtained

Use of greater-than numbers

If you want to imgs_box all the UL elements at the next level, and do not include elements of the class as Test_first_child, you can use the following code

$ (function () { 
  $ (' #imgs_box > Ul '). each (function () { 
    console.log (this); 
  }); 

Use of the plus sign

You can use the plus sign if you want to get the next adjacent element of a class that is a imgs_source element. The code is as follows

$ (function () { 
  $ ('. Imgs_source + ul '). each (function () { 
    console.log (this); 
  }); 

Use of wave numbers

If you want to get all sibling elements of a class that are imgs_source elements, you can use the wave number ~. The code is as follows

$ (function () { 
  $ ('. Imgs_source ~ ul '). each (function () { 
    console.log (this); 
  }); 

The above is a small set to introduce the jquery selector of the space and greater than >, plus + and wave number of the difference introduced, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!