Welche hierarchischen Selektoren gibt es in jquery?

Die hierarchischen Selektoren in jquery sind: 1. Nachkommenselektor, Syntax „$(„M N“)“ 2. Nachkommenselektor, Syntax „$(“M>N“)“; "M~N")"; 4. Angrenzender Selektor, Syntax "$("M+N")".

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Der hierarchische Selektor ist ein grundlegender Selektor, der Elemente anhand der hierarchischen Beziehung zwischen Elementen auswählt. Hierarchische Selektoren sind auch in der tatsächlichen Entwicklung sehr wichtig. Zu den üblichen hierarchischen Beziehungen gehören: Vater und Sohn, Nachkommen, Brüder und Nachbarn.

In jQuery gibt es 4 Arten hierarchischer Selektoren, wie in der folgenden Tabelle gezeigt.层jquery hierarchischer Selektor

Selektor M N Nachkommenauswahlgerät, wählen Sie die N-Elemente der Nachkommen aus (alle N-Elemente) m & gt; n Kind im Inneren M-Element-Generierungsselektor, wählt die nachkommenden N-Elemente (alle N-Elemente der ersten Ebene) innerhalb des M-Elements aus M~N Geschwisterselektor, wählt alle gleichgeschwisterlichen N-Elemente nach dem M-Element aus M + N Angrenzender Selektor, wählt das (nächste) Element neben dem M-Element aus (M und N sind Geschwisterelemente) 🎜 Darüber hinaus müssen wir auch auf die folgenden 4 Punkte achten:

$("M N") Sie können stattdessen $(M).find(N) verwenden $("M N") 可以使用 $(M).find(N) 代替；

$("M>N") 可以使用 $(M).children(N) 代替；

$("M~N") 可以使用 $(M).nextAll(N) 代替；

$("M+N") 可以使用 $(M).next(N) 代替。

对于 find( )、children( )、nextAll( )、next( ) 这 4 种方法，我们之后会详细介绍，这里简单了解一下即可。

后代选择器

后代选择器，用于选择元素内部的所有某一种元素，包括子元素和其他后代元素。

语法：

$("M N") “M元素”和“N元素”之间用空格隔开，表示选中 M 元素内部的后代 N 元素（即所有 N 元素）。

举例：

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

子元素

子元素的子元素

子元素

程序运行效果如图 1 所示：

$("#first p") 表示选取 id="first" 的元素内部的所有 p 元素。因此，不管是子元素，还是其他后代元素，全部都会被选中。

子代选择器

子代选择器，用于选中元素内部的某一种子元素。子代选择器与后代选择器虽然很相似，但是也有着明显的区别。

后代选择器，选取的是元素内部所有的元素（包括子元素、孙元素等）；

子代选择器，选取的是元素内部的某一种子元素（只限子元素）。

语法：

$("M>N") “M 元素”和“N 元素”之间使用 > 选择符，表示选中 M 元素内部的子元素 N。

举例：

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

子元素

子元素的子元素

子元素

预览效果如图 2 所示：

$("#first>p") 表示选中 id="first" 的元素下的子元素 p。我们将这个例子与后代选择器的例子对比一下，就可以很清楚地知道：子代选择器只选取子元素，不包括其他后代元素。

兄弟选择器

兄弟选择器，用于选中元素后面（不包括前面）的某一类兄弟元素。

语法：

$("M~N") “M 元素”和“N 元素”之间使用 ~ 选择符，表示选中 M 元素后面所有的兄弟元素 N。

举例：

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

子元素

子元素的子元素

子元素

程序执行结果如图 3 所示：

$("#second~p") 表示选取 id="second" 的元素后面所有的兄弟元素 p。记住，兄弟选择器只选取后面所有的兄弟元素，不包括前面的所有兄弟元素。

相邻选择器

相邻选择器，用于选中元素后面（不包括前面）的某一个“相邻”的兄弟元素。相邻选择器与兄弟选择器也非常相似，不过也有明显的区别。

兄弟选择器选取元素后面“所有”的某一类元素；

相邻选择器选取元素后面“相邻”的某一个元素。

语法：

$("M+N") “M 元素”和“N 元素”之间使用 + 选择符，表示选中 M 元素后面的相邻的兄弟元素 N。

举例：

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

子元素

子元素的子元素

子元素

程序运行效果如图 4 所示：

$("#second+p") 表示选取 id="second" 的元素后面的“相邻”的兄弟元素 p。

举例：

$(function() { $("li+li").css("border-top", "2px solid red"); }) 第1个元素 第2个元素 第3个元素 第4个元素 第5个元素 程序执行效果如图 5 所示。

$("li+li") 使用的是相邻选择器，表示“选择 li 元素后面相邻的（下一个）li 元素”。由于最后一个 li 元素没有下一个 li 元素，所以对于最后一个 li 元素，它是没有下一个 li 元素可以选取的。 $("li+li").css("border-top","2px solid red") ; li>

🎜 $("M>N") Sie können stattdessen $(M).children(N) verwenden 🎜🎜🎜 $("M~N" ) Sie können stattdessen $(M).nextAll(N) verwenden; 🎜🎜🎜 $("M+N") Sie können $(M).next verwenden (N) stattdessen. 🎜🎜Für die vier Methoden find( ), children( ), nextAll( ) und next( ) werden wir sie später im Detail vorstellen. 🎜🎜 Nachkommenselektor 🎜🎜Nachkommenselektor, der zum Auswählen aller Elemente eines bestimmten Typs innerhalb des Elements verwendet wird, einschließlich untergeordneter Elemente und andere Nachkommenelemente. 🎜🎜Syntax: 🎜rrreee🎜„M-Element“ und „N-Element“ werden durch Leerzeichen getrennt, was darauf hinweist, dass die untergeordneten N-Elemente innerhalb des M-Elements ausgewählt sind (d. h. alle N-Elemente). 🎜🎜Beispiel: 🎜rrreee🎜Der Programmlaufeffekt ist in Abbildung 1 dargestellt: 🎜🎜 🎜🎜 $("#first p") bedeutet die Auswahl des Elements mit id="first" Code> Alle p-Elemente darin. Daher werden sowohl untergeordnete Elemente als auch andere untergeordnete Elemente ausgewählt. 🎜🎜 Untergeordnete Auswahl 🎜🎜Untergeordnete Auswahl, wird verwendet, um ein untergeordnetes Element innerhalb des Elements auszuwählen. Obwohl Nachkommenselektoren und Nachkommenselektoren sehr ähnlich sind, weisen sie auch offensichtliche Unterschiede auf. 🎜🎜🎜🎜Der Nachkommenselektor wählt alle Elemente innerhalb des Elements aus (einschließlich untergeordneter Elemente, Enkelelemente usw.); 🎜🎜🎜Der Nachkommenselektor wählt ein bestimmtes Unterelement innerhalb des Elements aus (nur begrenzte Unterelemente). ). 🎜🎜Syntax: 🎜rrreee🎜 Verwenden Sie den > -Selektor zwischen „M-Element“ und „N-Element“, um das Unterelement N innerhalb des M-Elements auszuwählen. 🎜🎜Beispiel: 🎜rrreee🎜Der Vorschaueffekt ist in Abbildung 2 dargestellt: 🎜🎜 🎜🎜 $("#first>p") stellt das untergeordnete Element unter dem Element mit dem ausgewählten id="first" dar Code> S. Wenn wir dieses Beispiel mit dem Beispiel des Nachkommenselektors vergleichen, können wir deutlich erkennen, dass der Nachkommenselektor nur untergeordnete Elemente auswählt und keine anderen Nachkommenelemente einschließt. 🎜🎜 Geschwisterselektor 🎜🎜Geschwisterselektor, der zum Auswählen eines bestimmten Geschwistertyps hinter dem Element (mit Ausnahme des vorderen Elements) verwendet wird . 🎜🎜Syntax: 🎜rrreee🎜 Verwenden Sie den Selektor ~ zwischen „M-Element“ und „N-Element“, um alle Geschwisterelemente N nach dem M-Element auszuwählen. 🎜🎜Beispiel: 🎜rrreee🎜Das Ergebnis der Programmausführung ist in Abbildung 3 dargestellt: 🎜🎜 🎜🎜 $("#second~p") bedeutet die Auswahl aller Elemente nach dem Element mit id="second" Code> Brother-Element p. Denken Sie daran, dass der Geschwisterselektor nur alle nachfolgenden Geschwisterelemente auswählt, nicht alle vorhergehenden Geschwisterelemente. 🎜🎜 Angrenzender Selektor 🎜🎜Angrenzender Selektor, wird verwendet, um ein Element hinter (mit Ausnahme der Vorderseite) „benachbarten“ Geschwisterelementen auszuwählen. Benachbarte Selektoren sind den Geschwisterselektoren ebenfalls sehr ähnlich, es gibt jedoch erhebliche Unterschiede. 🎜🎜🎜🎜Der Geschwisterselektor wählt „alle“ Elemente eines bestimmten Typs hinter dem Element aus. 🎜🎜🎜Der Nachbarselektor wählt ein bestimmtes Element „benachbart“ hinter dem Element aus. 🎜🎜Syntax: 🎜rrreee🎜 Verwenden Sie den Selektor + zwischen „M-Element“ und „N-Element“, um das benachbarte Geschwisterelement N nach dem M-Element auszuwählen. 🎜🎜Beispiel: 🎜rrreee🎜Der Programmlaufeffekt ist in Abbildung 4 dargestellt: 🎜🎜 🎜🎜 $("#second+p") bedeutet die Auswahl des „benachbarten“ Geschwisterelements p hinter dem Element mit id="second" . 🎜🎜Beispiel: 🎜rrreee🎜Der Programmausführungseffekt ist in Abbildung 5 dargestellt. 🎜🎜 🎜🎜$("li+li") verwendet den benachbarten Selektor, was bedeutet: „Wähle das benachbarte (nächste) li-Element nach dem li-Element aus“. Da das letzte Li-Element kein nächstes Li-Element hat, gibt es kein nächstes Li-Element, das für das letzte Li-Element ausgewählt werden kann. $("li+li").css("border-top","2px solid red") kann einen Rahmen zwischen zwei li-Elementen hinzufügen. 🎜 【Empfohlenes Lernen: jQuery-Video-Tutorial , Web-Front-End-Entwicklungsvideo 】

Welche hierarchischen Selektoren gibt es in jquery?

In Verbindung stehende Artikel