What hierarchical selectors are there in jquery?

The hierarchical selectors in jquery are: 1. Descendant selector, syntax "$("M N")"; 2. Descendant selector, syntax "$("M>N")"; 3 , Sibling selectors, the syntax is "$("M~N")"; 4. Adjacent selectors, the syntax is "$("M N")".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The hierarchical selector is a basic selector that selects elements through the hierarchical relationship between elements. Hierarchical selectors are also very important in actual development. Common hierarchical relationships include: father and son, descendants, brothers, and neighbors.

In jQuery, there are 4 types of hierarchical selectors, as shown in the table below.

jQuery Hierarchical Selector Selector Description M N Descendant selector, selects the descendant N elements (all N elements) inside the M element M>N Descendant selector, selects the inside of the M element The descendant N elements (all first-level N elements) M~N Sibling selector selects all sibling N elements after the M element M N Adjacent selector, selects the adjacent (next) element to M element (M and N are sibling elements) In addition, we also need to pay attention to the following 4 points:

$("M N") You can use $(M).find(N) instead;

$("M>N") You can use $(M).children(N) instead;

$("M~N") You can use $(M).nextAll(N) instead;

$("M N") You can use $(M).next(N) instead.

We will introduce the four methods of find( ), children( ), nextAll( ), and next( ) in detail later, but you can take a brief look here.

Descendant selector

Descendant selector is used to select all elements of a certain type inside the element, including child elements and other descendant elements. .

Syntax:

$("M N") "M element" and "N element" are separated by spaces, indicating that the descendant N elements inside the M element are selected (that is, all N elements).

Example:

$(function () { $("#first p").css("color","red"); }) 子元素

子元素

子元素的子元素

子元素

The program running effect is shown in Figure 1:

$("#first p") means selecting all p elements inside the element with id="first" . Therefore, both child elements and other descendant elements will be selected.

Children selector

Children selector is used to select a certain sub-element inside the element. Although descendant selectors and descendant selectors are very similar, they also have obvious differences.

Descendant selector selects all elements inside the element (including child elements, grandchild elements, etc.);

Descendant selector , selects a certain sub-element within the element (only sub-elements).

Syntax:

$("M>N") Use the > selector between "M element" and "N element" to select the elements inside the M element Child element N.

Example:

$(function () { $("#first>p").css("color","red"); }) 子元素

子元素

子元素的子元素

子元素

The preview effect is shown in Figure 2:

##$("#first>p") means selecting the sub-element p under the element with id="first" . If we compare this example with the descendant selector example, we can clearly see that the descendant selector only selects child elements and does not include other descendant elements.

Sibling selector

Sibling selector is used to select a certain type of sibling elements behind the element (excluding the front).

Syntax: $("M~N")

Use the ~ selector between "M element" and "N element" to select all sibling elements N after the M element.

Example: $(function() { $("#second~p").css("color", "red"); }) 子元素

子元素

子元素的子元素

子元素

The program execution result is shown in Figure 3:

##$("#second~p" ) means selecting all sibling elements p after the element with id="second" . Remember, the sibling selector only selects all subsequent sibling elements, not all preceding sibling elements.

Adjacent selector Adjacent selector is used to select an "adjacent" element behind (excluding the front) sibling elements. Adjacent selectors are also very similar to sibling selectors, but there are significant differences.

The sibling selector selects "all" elements of a certain type behind the element;

The adjacent selector selects "adjacent" elements behind the element. an element of .

Syntax: $("M+N") Use the

selector between "M element" and "N element" to select the adjacent element behind the M element The sibling element N. Example:

$(function() { $("#second+p").css("color", "red"); }) 子元素

子元素

子元素的子元素

子元素

The program running effect is shown in Figure 4:

##$("#second p")

means selecting the "adjacent" sibling element p behind the element with id="second". Example: $(function() { $("li+li").css("border-top", "2px solid red"); }) 第1个元素 第2个元素 第3个元素 第4个元素 第5个元素

The program execution effect is shown in Figure 5.

$("li li")

uses the adjacent selector, which means "select the adjacent (next) li after the li element element". Since the last li element has no next li element, there is no next li element to select for the last li element. $("li li").css("border-top","2px solid red") can achieve the effect of adding a border between two li elements.

[Recommended learning: jQuery video tutorial , web front-end development video ]

What hierarchical selectors are there in jquery?

Related articles