jQuery hierarchical selector usage analysis_jquery

In an HTML document, each element is always at a certain position on the DOM node tree, and there is always a certain hierarchical relationship between elements in the document hierarchy, such as the relationship between parent and child.

1. Child element selector

is used to find all child elements under a given parent element. The syntax format is:

Copy code Code As follows:

$("parent->chilid");

2. Descendant element selector

is used to match all descendant elements under a given ancestor element. The syntax format is:

Copy the code The code is as follows:

$("ancestor descendant");

3. Immediate sibling element selector

is used to match all next elements immediately after the prev element. The syntax format is:

Copy code The code is as follows:

$("prev next")

4. Adjacent sibling element selector

is used to select all sibling elements behind an element. The syntax format is as follows:

Copy code The code is as follows:

$("prev~siblings")

Comprehensive example:

Copy code The code is as follows:

The descendant input elements of the form element are: input1, input2, input3
         
                                                                                        & Lt; div id = "div1" & gt; maindiv sub -element: ID is div1 & lt;/div & gt;
& Lt; div id = "div2" & gt; maindiv sub -element: ID is div2 & lt;/div & gt;
                                                                                               
                                                                                                                                                                                       ; & Lt; label & gt; all's sub -elements of maindiv are: div1, div2 & lt;/label & gt;

The rendering is shown below:

I hope this article will be helpful to everyone’s jQuery programming.