Detailed description of jquery selector-hierarchical filter selector _ jquery

This article mainly introduces the hierarchical filter selector of jquery selector. If you need a friend, please refer to it and hope to help you. The Code is as follows:

$ ("Ancestor descendant"): select the child element after the parent Element
$ ("Parent> child"): select the child element directly following the parent element. What is "directly", that is, the meaning of the first level?
$ ("Prev + next"): prev and next are two elements of the same level. Select the next element after the prev element.
$ ("Prev ~ Siblings "): select the elements filtered by siblings after prev. Note: siblings is a filter.

The last two are used less often and are generally replaced by other selectors.

The Code is as follows:

$ ("Prev + next") is equivalent to next ()
$ ("Prev ~ Siblings ") is equivalent to nextAll ()

Instance:

The Code is as follows:

The Code is as follows:

The P element in the first DIV.

The first single P element.

The SPAN element in the DIV.

The P element in the second DIV.

The P element in the SPAN in the DIV.

A	B	C
1	2	3

The second single P element.

A single SPAN element.

The Code is as follows:

Var s = $ ("p"). addClass ("highlight"); // select all p elements after p and the result is: p1, p3, p4

The Code is as follows:

Var s = $ ("p> p"). addClass ("highlight"); // after p is selected, all the first-level p elements are p1 and p3. P4 is not selected, because p4 is not a direct element of p.

The Code is as follows:

Var s = $ ("p + p"). addClass ("highlight"); // select p next to p and the result is p2. P5 is not selected because p5 is not close to p

The Code is as follows:

Var s = $ ("p ~ P "). addClass (" highlight "); // select all p elements next to p and the result is p2, p5