Use of jQuery hierarchical Selector

In an HTML document, each element is always in a certain position on the DOM node tree, and there is always a hierarchical relationship between elements in the hierarchical structure of the document, such as the relationship between the parent and child levels. 1: The child element selector is used to find all the child elements under the given parent element. Syntax format: $ (parent-chilid); 2: descendant element Selector

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

1: child element Selector

Searches for all child elements under a given parent element. Syntax: $ ("parent-> chilid ");

2: descendant element Selector

Used to match all descendant elements under a given ancestor element. Syntax format: $ ("ancestordescendant ");

3: Peer element Selector

Used to match all next elements next to the prev element. Syntax format: $ ("prev + next ")

4: adjacent peer element Selector

Select all peer elements after an element. The syntax format is as follows: $ ("prev ~ Siblings ")

Comprehensive instance:

Script

$ (Document). ready (function (){
$ ("Form input" ).css ("color", "red"); // set the font color for the Child input element of the form Element
$ ("Div> div" ).css ("background", "# FCF"); // set the background color for the child elements div1 and div2 under maindiv
$ ("Div ~ Input "mirror.css (" border "," 2px solid blue "); // you can specify a border for all input elements following the div element.
$ ("Div + input" ).css ("border", "2px solid red"); // set a border for the input element following the div Element
});
Script
Level Selector

: