Analyse der Verwendung hierarchischer jQuery-Selektoren_jquery

In einem HTML-Dokument befindet sich jedes Element immer an einer bestimmten Position im DOM-Knotenbaum und es besteht immer eine bestimmte hierarchische Beziehung zwischen Elementen in der Dokumenthierarchie, beispielsweise die Beziehung zwischen übergeordnetem und untergeordnetem Element.

1. Auswahl für untergeordnete Elemente

wird verwendet, um alle untergeordneten Elemente unter einem bestimmten übergeordneten Element zu finden. Das Syntaxformat ist:

Code kopieren Code wie folgt:

$("parent->chilid");

2. Nachkommenelementauswahl

wird verwendet, um alle Nachkommenelemente unter einem bestimmten Vorgängerelement abzugleichen. Das Syntaxformat ist:

Kopieren Sie den Code Der Code lautet wie folgt :

$("Vorfahren Nachkomme");

3. Direkte Auswahl von Geschwisterelementen

wird verwendet, um alle nächsten Elemente unmittelbar nach dem vorherigen Element abzugleichen. Das Syntaxformat ist:

Code kopieren Der Code lautet wie folgt:

$("prev next")

4. Auswahl für benachbarte Geschwisterelemente

wird verwendet, um alle Geschwisterelemente hinter einem Element auszuwählen. Das Syntaxformat ist wie folgt:

Code kopieren Der Code lautet wie folgt:

$("prev~siblings")

Umfassendes Beispiel:

Code kopieren Der Code lautet wie folgt:

Die abgeleiteten Eingabeelemente des Formularelements sind: input1, input2, input3                                                                                                 Out Out Out Out Out, & lt; div id = "div1" & gt; Kinderelemente von MainDIV: ID kann div1 & lt;/div & gt; & Lt; div id = "div2" & gt; maindiv sub -element: ID ist div2 & lt;/div & gt;                                                                                                                                                                                                                                                                           ;                                                                                                                                                                                                                                                        

Das Rendering ist unten dargestellt:




Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.