JavaScript-Framework: Tutorial zur Beherrschung des jQuery-Selektors

Obwohl der Einstieg in jQuery im Vergleich zu anderen Bibliotheken einfacher und einfacher zu erlernen ist, ist es nicht einfach, es vollständig zu beherrschen. Da es alle Aspekte der Webentwicklung umfasst, stehen Tausende von Methoden und internen Variationen zur Verfügung. Anfänger haben oft das Gefühl, dass der Einstieg einfach ist, es aber schwierig ist, sich zu verbessern. Ziel dieses Artikels ist es, den jQuery-Selektor systematisch zu sortieren, die Designideen von jQuery zu klären und den Lernkontext herauszufinden, damit der Leser vom Einstieg in die Kompetenz übergehen kann.
　Was ist jQuery?

Einfach ausgedrückt ist jQuery ein JavaScript-Framework. Sein Zweck besteht darin, weniger Code zu schreiben und mehr Dinge zu tun. Für Webentwickler ist jQuery eine leistungsstarke JavaScript-Bibliothek, mit der verwandte Anwendungen wie AJAX-Interaktion, JavaScript-Animationseffekte usw. schneller entwickelt werden können. Für Webdesigner kapselt jQuery die Details des Javascript-Quellcodes und erreicht eine effektive Trennung von HTML-Tags, sodass sich Designer stärker auf die Designeffekte von Webseiten konzentrieren können. Auf dieser Grundlage wird das Benutzererlebnis der Webseite erheblich verbessert, einschließlich der Interaktivität, der visuellen Effekte usw. der Webseite.

Die Kerndesignidee von jQuery besteht darin, ein Webseitenelement auszuwählen und dann eine Operation daran auszuführen. Wie wählt man also ein bestimmtes Webseitenelement aus und positioniert es? Eine gängige Methode für JavaScript-Entwickler ist document.getElementById(). In der jQuery-Syntax wird das Dollarzeichen „$“ verwendet und der entsprechende Auswahlausdruck wird wie folgt geschrieben:

var someElement = $("#myId");
Der Grund, warum jQuery „jQuery“ heißt " liegt vor allem an seinem leistungsstarken Selektor, der Javascript-Abfrage bedeutet. Im Folgenden stellen wir die Designideen im Zusammenhang mit jQuery-Selektoren im Detail vor:

1. Grundlegende jQuery-Selektoren

Wie bereits erwähnt, sind Selektoren eine Funktion von jQuery. Die grundlegenden Selektoren von jQuery sind hauptsächlich in die folgenden fünf Typen unterteilt:

1. $(“#myId”) // Wählen Sie das Webelement mit der ID myId

2. $(“tag name ") // Zum Beispiel ruft $("div") die jQuery-Objektsammlung aller div-Elemente im HTML-Dokument ab

　3. $(".myClass") // Ruft die jQuery-Objektsammlung aller ab div-Elemente im HTML-Dokument Eine Sammlung aller Elemente mit der Klasse „myClass“

　4. $(„*“) // Dies ruft alle Elemente im HTML-Dokument ab

　5. $ („selector1, selector2,selector3…selectorN“) // Diese Art von Selektor wird als Gruppenselektor bezeichnet. Zum Beispiel: $(“span,#two”)

　 // Alle Span-Tag-Elemente und Elemente mit id=two auswählen.

2. Hierarchischer jQuery-Selektor

Das über den jQuery-Selektor erhaltene jQuery-Objekt ist jederzeit eine Reihe von Elementen. Die hierarchischen Selektoren von jQuery sind hauptsächlich in die folgenden zwei Typen unterteilt:

1. $("Vorfahren Nachkomme"): wählt alle untergeordneten Elemente nach dem übergeordneten Element aus. Ancestor bedeutet auf Chinesisch „Vorfahre“ und Descendant bedeutet auf Chinesisch „Nachkomme“. Beispiel:

　$("body div") wählt alle div-Elemente unter dem body-Element aus.

　$(“div#test div”) Wählen Sie alle im div enthaltenen untergeordneten Div-Elemente mit der ID „test“ aus

　2. $(“parent > child“): Wählen Sie die aus erstes untergeordnetes Element nach dem übergeordneten Element. Beispiel:

　$(“body > div”) wählt alle div-Elemente der ersten Ebene unter dem body-Element aus.

　$(“div#test > div”) Wählen Sie alle div-Unterelemente der ersten Ebene aus, die im div mit der ID „test“ enthalten sind.
3. jQuery-Filterselektor

Zu den grundlegendsten Filterselektoren von jQuery gehören:

1. :first // Das erste Element auswählen. $(“div:first”) wählt das erste div-Element unter allen div-Elementen

　2. :last // Wählt das letzte Element aus. $("div:last") wählt das letzte div-Element unter allen div-Elementen aus

　3. :even // Wählt alle Elemente aus, deren Index eine gerade Zahl ist. $("input:even") wählt das Eingabeelement aus, dessen Index gerade ist.

　4. :odd // Alle Elemente auswählen, deren Index ungerade ist. $("input:odd") wählt das Eingabeelement aus, dessen Index ungerade ist.

　5. :eq(index) // Wählen Sie das Element aus, dessen Index gleich index ist. $("input:eq(1)") wählt das Eingabeelement mit dem Index gleich 1 aus.

　6. :gt(index) // Elemente auswählen, deren Index größer als der Index ist. $("input:gt(1)") wählt Eingabeelemente mit einem Index größer als 1 aus.

　7. :lt(index) // Elemente auswählen, deren Index kleiner als index ist. $("input:lt(3)") wählt Eingabeelemente mit einem Index kleiner als 3 aus.

Der jQuery-Inhaltsfilterselektor kann den Textinhalt im DOM-Dokument einfach filtern, um die benötigten Elemente genau auszuwählen.

1. :contains(text) // Wählen Sie das „Text“-Element aus, das Textinhalt enthält. $("div:contains('you')") wählt das div-Element aus, das den Text „you“ enthält.

　2. :empty // Leere Elemente auswählen, die keine untergeordneten Elemente und keinen Text enthalten. $("div:empty") wählt leere div-Elemente aus, die keine untergeordneten Elemente (einschließlich Textelemente) enthalten.

　3. :parent // Elemente auswählen, die untergeordnete Elemente oder Text enthalten. $("div:parent") wählt div-Elemente aus, die untergeordnete Elemente haben (einschließlich Textelemente).

Wie Sie sehen, spiegeln sich die Filterregeln des jQuery-Inhaltsfilterselektors hauptsächlich in den darin enthaltenen Unterelementen oder Textinhalten wider.

Die Verwendung des jQuery-Sichtbarkeitsfilterselektors ist wie folgt:

　1. :hidden // Alle unsichtbaren Elemente auswählen. $(":hidden") wählt alle unsichtbaren Elemente auf der Webseite aus.

　2. :visible // Alle sichtbaren Elemente auswählen. $("div:visible") wählt alle sichtbaren div-Elemente aus.

Die Filterregel des jQuery-Attributfilterselektors besteht darin, das entsprechende Element über das Attribut des Elements abzurufen.

　1. [Attribut] // Elemente mit diesem Attribut auswählen. $("div[id]") wählt Elemente mit der Attribut-ID aus.

　2. [attribute=value] // Elemente auswählen, deren Attributwert value ist. $("div[name=test]") wählt das div-Element aus, dessen Attributnamenswert „test“ ist.

　3. [attribute!value] // Elemente auswählen, deren Attributwert nicht gleich value ist.

　4.[attribute^=value] //Wählen Sie das Element aus, dessen Attributwert mit value beginnt.

　5. [attribute$=value] // Wählen Sie das Element aus, dessen Attributwert mit value endet.

　6. [attribute*=value] // Wählen Sie das Element aus, dessen Attributwert value enthält.

　7. [selector1] [selector2] [selectorN] //Zusammengesetzter Attributselektor. $("div[id][name*=test]") wählt das div-Element mit der Attribut-ID aus und der Wert des Attributnamens enthält „test“

Die Filterregeln des jQuery-Unterelements Filterselektoren sind im Vergleich zu anderen Filterselektoren etwas komplexer.

　1. :nth-child(index/even/odd/equation) // Wählen Sie das untergeordnete Indexelement oder das ungerade-gerade Element unter jedem übergeordneten Element aus.

　2. :first-child // Wählen Sie das erste untergeordnete Element jedes übergeordneten Elements aus

　 3. :last-child // Wählen Sie das letzte untergeordnete Element jedes übergeordneten Elements aus

Der Filterselektor für jQuery-Formularobjektattribute wird hauptsächlich zum Filtern ausgewählter Formularelemente verwendet, z. B. zum Auswählen nicht verfügbarer Formularelemente, ausgewählter Dropdown-Felder, Mehrfachauswahlfelder usw.

　1. :enabled // Alle verfügbaren Formularelemente auswählen. $("#form1 :enabled") wählt alle verfügbaren Elemente im Formular mit der ID „form1“ aus.

　2. :disabled // Alle deaktivierten Formularelemente auswählen.

　3. :checked // Alle ausgewählten Elemente auswählen. $("input:checked") wählt alle ausgewählten Elemente aus.

　4. :selected // Alle ausgewählten Optionselemente auswählen. $("select :selected") wählt alle ausgewählten Optionselemente (Option) aus.

Der Formularselektor wurde in jQuery eingeführt, sodass wir problemlos ein bestimmtes Element oder einen bestimmten Elementtyp in einem Formular abrufen können