The difference between the space in the jquery selector and the greater than sign >, plus + and wave number ~

Concept

Space: $ (' parent childchild ') means to get all the childchild nodes under the parent

Greater than sign: $ (' parent > childchild') means get all next-level Childchild under Parent

Plus: $ (' pre + Nextbrother ') represents the next sibling node to get the pre node, equivalent to the next () method

Tilde: $ (' 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= " Imgs_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_child" ><li ></li><li></li><li></li><li></li></uL></li></ul> </div> 

Use of spaces

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

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

The effect, as you can see, gets all the elements

use of greater than signif you want to imgs_box all the UL elements in the middle and lower level, and do not include elements of the class Test_first_child, you can use the following code

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

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

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

use of wave numbersIf you want to get the class asImgs_source elements of all siblings, you can use the tilde ~. The code is as follows

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

The difference between the space in the jquery selector and the greater than sign >, plus + and wave number ~