Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what level selector is there in jquery", the content is detailed, the steps are clear, and the details are handled properly. I hope this "what level selector in jquery" article can help you solve your doubts.

Jquery in the level of selector are: 1, descendant selector, syntax "$(" MN ")"; 2, child selector, syntax "$(" M > N ")"; 3, brother selector, syntax "$(" M > N ")"; 4, adjacent selector, syntax "$(" M > N ")".

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

A hierarchical selector is a basic selector that selects elements through the hierarchical relationship between elements. Hierarchical selector is also very important in practical development. Common hierarchical relationships include: father and son, offspring, brothers, neighbors.

In jQuery, there are four types of hierarchical selectors, as shown in the following table.

JQuery hierarchical selector description M N descendant selector, select descendant N element (all N elements) M > N descendant selector within M element, select descendant N element (all level 1 N elements) Maun sibling selector within M element, select all sibling N element M + N adjacent selector after M element, select M element adjacent (next) element (M, N are sibling elements)

In addition, we need to pay attention to the following four points:

$("MN") can be replaced by $(M) .find (N)

$("M > N") can be replaced by $(M) .children (N).

Instead of $(M) .nextAll (N), you can use $(M).

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

The four methods find (), children (), nextAll (), and next () will be described in detail later. Just take a brief look at them here.

Descendant selector

A descendant selector, which is used to select all elements within an element, including child elements and other descendant elements.

Syntax:

$("mn")

The "M element" and "N element" are separated by a space to indicate that the descendant N elements within the M element are selected (that is, all N elements).

For example:

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

Child element

Child element

Child elements of child elements

Child elements of child elements

Child element

Child element

The program runs as shown in figure 1:

$("# first p") represents all p elements inside the element that selects id= "first". Therefore, whether it is child elements or other descendant elements, all will be selected.

Progeny selector

A descendant selector used to select a seed element within an element. Although the offspring selector and the descendant selector are very similar, they also have obvious differences.

Descendant selector, which selects all elements within the element (including child elements, grandchildren, etc.)

The child selector selects a seed element within the element (child elements only).

Syntax:

$("M > N")

A > selector is used between "M element" and "N element" to indicate the child element N within the selected M element.

For example:

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

Child element

Child element

Child elements of child elements

Child elements of child elements

Child element

Child element

The preview effect is shown in figure 2:

$("# first > p") indicates the child element p under the element of id= "first" selected. By comparing this example with the example of a descendant selector, it is clear that the descendant selector selects only child elements and does not include other descendant elements.

Brother selector

The sibling selector, which is used to select a certain type of sibling element after the element (not including the previous one).

Syntax:

$("masking N")

The ~ selector is used between "M element" and "N element" to indicate that all sibling elements N after M element are selected.

For example:

(function () {$("# second~p") .css ("color", "red");})

Child element

Child element

Child elements of child elements

Child elements of child elements

Child element

Child element

The result of the program execution is shown in figure 3:

$("# second~p") indicates all sibling elements p after the element that selects id= "second". Remember, the sibling selector only selects all subsequent sibling elements, not all previous sibling elements.

Adjacent selector

An adjacent selector that is used to select an "adjacent" sibling element behind the element (excluding the front). Neighboring selectors are also very similar to sibling selectors, but there are obvious differences.

The sibling selector selects a class of elements that follow "all" of the element.

The adjacent selector selects an element that is "adjacent" after the element.

Syntax:

$("masking N")

A + selector is used between "M element" and "N element" to indicate that the adjacent sibling element N after the M element is selected.

For example:

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

Child element

Child element

Child elements of child elements

Child elements of child elements

Child element

Child element

The program runs as shown in figure 4:

$("# second+p") indicates the sibling element p of "adjacent" after the element that selects id= "second".

For example:

$(function () {$("li+li") .css ("border-top", "2px solid red") }) first element, second element, third element, fourth element, fifth element.

The program execution effect is shown in figure 5.

$("li+li") uses an adjacent selector, which means "Select the next (next) li element after the li element." Since the last li element does not have the next li element, there is no next li element that can be selected 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.

After reading this, the article "what level selector is there in jquery" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.