Eine Einführung in die häufig verwendeten Selektortypen von jquery und ihre Verwendungsprinzipien

JQuery-Selektor, CSS3-Selektor, verschiedene Selektoren, als sehr flexibler JQuery-Selektor, wie verwende ich ihn?

1. Grundlegende Verwendung des jQuery-Selektors

Markieren Sie den CSS3-Selektor, den jQuery unterstützt ziemlich vollständige Teilmenge der im Entwurf definierten Selektorsyntax und fügt außerdem einige nicht standardmäßige, aber nützliche Pseudoklassen hinzu. Hinweis: In diesem Abschnitt geht es um jQuery-Selektoren. Viele dieser Selektoren (aber nicht alle) können in CSS-Stylesheets verwendet werden. Die Selektorsyntax hat eine dreistufige Struktur. Sie haben zweifellos Selektoren in ihrer einfachsten Form gesehen. „#te st“ wählt das Element mit dem ID-Attribut „test“ aus. „blockquote“ wählt alle

-Elemente im Dokument aus, während „p.note“ alle

-Elemente auswählt. Einfache Selektoren können zu „kombinierten Selektoren“ wie „p.note>p“ und „blockquote i“ kombiniert werden, sofern die kombinierenden Zeichen als Trennzeichen verwendet werden. Einfache und kombinierte Selektoren können auch in durch Kommas getrennte Listen gruppiert werden. Diese Art von Selektorgruppe ist die häufigste Form der Auswahl, die an die Funktion $() übergeben wird. Bevor wir kombinierte Selektoren und Selektorgruppen erklären, müssen wir zunächst die Syntax einfacher Selektoren verstehen.

1. Einfache Selektorverwendung

-Elementen interessiert sind, kann ein einfacher Selektor mit „P“ beginnen. Wenn das ausgewählte Element nichts mit dem Tag-Namen zu tun hat, können Sie stattdessen den Platzhalter „*“ verwenden. Wenn der Selektor nicht mit einem Tag-Namen oder einem Platzhalter beginnt, wird implizit ein Platzhalter eingefügt.

Der Tag-Name oder Platzhalter gibt einen anfänglichen Satz alternativer Dokumentelemente an. In einem einfachen Selektor besteht der Teil nach der Tag-Typ-Deklaration aus null oder mehr Filtern. Filter werden von links nach rechts in der Reihenfolge angewendet, in der sie geschrieben werden, und jeder von ihnen schränkt die Menge der ausgewählten Elemente ein. In der folgenden Tabelle sind die von jQuery unterstützten Filter aufgeführt.

jQuery-Auswahlfilter

Filter Bedeutung

# id stimmt mit Elementen überein, deren ID-Attribut id ist. In einem gültigen ITML-Dokument wird es niemals mehrere Elemente mit derselben ID geben, daher wird dieser Filter normalerweise als eigenständiger Selektor verwendet.

.class Entspricht der Klasse Das Attribut (das eine Zeichenfolge ist, die in eine durch Leerzeichen getrennte Liste von Wörtern analysiert wird) enthält alle Elemente mit der Klasse Wort

[attr] entspricht dem attr-Attribut ( Alle Elemente

[attr=val] entsprechen allen Elementen

, die das Attribut attr und den Wert val haben, unabhängig vom Wert)

[attr!=val] Entspricht allen Elementen, die kein attr-Attribut haben, oder der Wert des attr-Attributs ist nicht val ((jQuery-Erweiterung)

[ attr^=val] Elemente abgleichen, deren attr-Attributwert mit val beginnt

[attr$=val] Attr-Attributwert abgleichen beginnt mit val Das Endelement

[attr*=val] entspricht dem Element, dessen attr-Attributwert val

[attr~ =val]

Entspricht Elementen, die das Wort val enthalten, wenn ihr attr-Attribut als durch Leerzeichen getrennte Liste von Wörtern interpretiert wird, sodass der Selektor „p.note“ derselbe ist wie „p [class ~=note]". Dasselbe wie

[attr|=val]

Entspricht Elementen, deren attr-Attributwert mit val beginnt und keine weiteren Zeichen dahinter hat, oder die anderen Zeichen beginnen mit einem Bindestrich

:animated

entspricht dem animierten Element, die Animation wird von jQuery generiert

:button entspricht - und -Elementen (jQuery-Erweiterung)

:checkbox entspricht -Elementen (eine Erweiterung von jQuery). Dieser Filter ist effizienter, wenn dem Eingabe-Tag explizit „input:checkbox“

:checked stimmt mit dem ausgewählten Eingabeelement überein

:contains(text) matches enthält Gibt an Textelement (jQuery-Erweiterung). Die Klammern in diesem Filter beschränken den Text – es sind keine Anführungszeichen erforderlich. Der Text des gefilterten Elements wird durch das Attribut textContent oder innerText bestimmt – dies ist der ursprüngliche Dokumenttext, ohne Tags und Kommentare

:disabled entspricht dem deaktivierten Element

:empty übereinstimmt mit Elementen ohne untergeordnete Knoten und ohne Textinhalt

:enabled Übereinstimmungen keine deaktivierten Elemente

:eq(n) Entspricht dem n-ten Element in der ausgewählten Liste basierend auf der Dokumentreihenfolge, wobei die Seriennummer bei 0 beginnt (jQuery-Erweiterung)

:even stimmt mit geraden Elementen in der Liste überein. Da die Sequenznummer des ersten Elements 0 ist, werden tatsächlich das 1., 3., 5. usw. Element ausgewählt (jQuery-Erweiterung)

:file Übereinstimmungen < ;input type="file"> elements (jQuery-Erweiterung)

:first Entspricht dem ersten Element in der Liste. Identisch mit „:eq(0)“ (jQuery-Erweiterung)

:first-child Das übereinstimmende Element ist das erste untergeordnete Element seines übergeordneten Knotens. Hinweis: Dies unterscheidet sich von „:first“

:gt(n) sucht nach Elementen, die größer als n in einer ausgewählten Liste sind, basierend auf der Dokumentreihenfolge und beginnend bei 0 (jQuery-Erweiterung)

:has(sel) Das übereinstimmende Element hat ein untergeordnetes Element, das mit dem eingebetteten Selektor sel übereinstimmt

:header Entspricht allen Header-Elementen:

,

,

,

(jQuery-Erweiterung)

:hidden Entspricht allen Elementen, die nicht auf dem Bildschirm sichtbar sind: Im Allgemeinen können offsetWidth und offsetHeight dieser Elemente als 0 betrachtet werden

:image entspricht dem -Element. Beachten Sie, dass dieser Filter nicht mit -Elementen (jQuery-Erweiterung) übereinstimmt.

: input entspricht Benutzereingabeelementen: , und <button> (jQuery-Erweiterung) </button>

:last entspricht dem letzten Element in der ausgewählten Liste ((jQuery-Erweiterung)

:last-child entspricht dem Element, das das letzte untergeordnete Element seines übergeordneten Knotens ist. Hinweis: Dies unterscheidet sich von „:last“ 🎜>

:lt(n)

Entspricht Elementen mit einer Sequenznummer kleiner als n in der ausgewählten Liste basierend auf der Dokumentreihenfolge und beginnend bei 0 (jQuery-Erweiterung)

:not(sel) Das übereinstimmende Element stimmt nicht mit dem Inline-Selektor sel überein

:nth(n) Identisch mit „:eq(n)“ (eine Erweiterung von jQuery)

:nth-child(n) Entspricht einem Element, das das n-te Kind davon ist übergeordnetes Element. . Dabei kann es sich um einen Zahlenwert, das Wort gerade, das Wort ungerade oder eine Berechnungsformel handeln. Verwenden Sie „:nth-child(even)“, um Elemente auszuwählen, die unter den untergeordneten Elementen ihres übergeordneten Knotens an zweiter oder vierter Stelle stehen. Verwenden Sie „:nth-child(odd)“, um Elemente auszuwählen, die unter den untergeordneten Elementen ihres übergeordneten Knotens an erster, dritter usw. Stelle stehen.

Die häufigere Situation ist, dass n eine Berechnungsformel wie xn oder x n+y ist, wobei x und y ganze Zahlen sind und n ein Literal n ist. Daher können Sie nth-child(3n+1) verwenden, um das 1., 4., 7. usw. Element auszuwählen.

Beachten Sie, dass die Sequenznummer dieses Filters bei 1 beginnt. Wenn ein Element also das erste untergeordnete Element seines übergeordneten Knotens ist, wird es als ungerades Element betrachtet und die Übereinstimmung erfolgt 3n +1 statt 3n. Zur Unterscheidung von den Filtern „:even“ und „:odd“ beginnt die passende Sequenznummer der letzteren bei 0.

:odd in der Matching-Liste Elemente mit ungeraden Zahlen (beginnend mit 0). Beachten Sie, dass Elemente mit den Zahlen 1 und 3 das 2. bzw. 4. übereinstimmende Element sind (jQuery-Erweiterung)

:only-child Entspricht Elementen, die die einzigen untergeordneten Elemente des übergeordneten Knotens sind

:parent Entspricht Elementen, die den übergeordneten Knoten bilden, was dasselbe ist wie „:empty“ Im Gegenteil (jQuery-Erweiterung)

: Passwort entspricht dem -Element (jQuery-Erweiterung)

:radio Entspricht dem -Element (Erweiterung der j-Abfrage)

:reset Entspricht und (jQuery-Erweiterung)

: selected entspricht Das ausgewählte -Element verwendet „:checked“, um ausgewählte Kontrollkästchen und Optionsfelder auszuwählen (jQuery-Erweiterung)

:submit entspricht und Elemente (jQuery-Erweiterung)

:text entspricht ;-Element (jQuery-Erweiterung)

:visible entspricht allen aktuell sichtbaren Elementen: Im Allgemeinen sind offsetWidth und offsetHeight nicht 0, was das Gegenteil bedeutet von „:hidden“

Hinweis: Einige der in der Tabelle aufgeführten Selektoren akzeptieren Parameter in Klammern. Der Selektor unten wählt beispielsweise Elemente auf Platz 1 oder 2 unter den untergeordneten Elementen aus Elternknoten enthalten, solange sie das Wort „JavaScript“ enthalten, keine Elemente

p:nth-child(3n+ 1): text (JavaScript):not(:). has(a))

Im Allgemeinen kann die Angabe des Tag-Typ-Präfixes dazu führen, dass der Filter effizienter ausgeführt wird. Verwenden Sie beispielsweise „:radio“, um Radio auszuwählen Tasten, „input:radio“ wäre besser. Die Ausnahme bildet der ID-Filter, der ohne das Hinzufügen eines Tag-Präfixes effizienter ist. Beispielsweise ist der Selektor „#address“ oft effizienter als der explizitere „form#address“.

2. Verwendung des Kombinationsselektors

Verwenden Sie spezielle Operatoren oder „Kombinatoren“ ” Einfach Selektoren können kombiniert werden, um Beziehungen zwischen Elementen im Dokumentbaum auszudrücken. In der folgenden Tabelle sind die von jQuery unterstützten kombinierten Selektoren aufgeführt. Diese Kombinationsselektoren sind die gleichen wie die von CSS3 unterstützten.

Hier sind einige Beispiele für kombinierte Selektoren:

"Blockquote I" // Matching & lt; lt; von & gt; direktes Unterelement

„#Output+*“ // ID = „Output“-Element hinter dem Element

"" "" "" p.note > h1+p" //Folgen Sie dem

-Element von

, innerhalb von

> Achten Sie auf die Kombination. Selektoren sind nicht auf die Kombination von zwei Selektoren beschränkt: Die Kombination von drei oder sogar mehr Selektoren ist ebenfalls zulässig. Kombinationsselektoren werden von links nach rechts abgearbeitet.

3. Die Selektorkombination

wird an die Funktion $() übergeben (oder Der in einem Stylesheet verwendete Selektor ist eine Selektorgruppe, bei der es sich um eine durch Kommas getrennte Liste eines oder mehrerer einfacher Selektoren oder kombinierter Selektoren handelt. Die von einer Selektorgruppe übereinstimmenden Elemente müssen lediglich mit einem beliebigen Selektor in der Selektorgruppe übereinstimmen. Für unsere Zwecke kann man sich einen einfachen Selektor auch als Selektorgruppe vorstellen. Hier sind einige Beispiele für Selektorgruppen: "h1, h2,h3" // Entspricht den Elementen

,

"#p1, #p2, #p3" // Ordne das Element der ID p1, p2 oder p3 zu

"p.note, p.note " // Entspricht

- und

-Elementen von class="note"

"body>p,p.note>p" // 🎜>

von

Klammern, erlaubt jedoch nicht die Verwendung von Klammern für häufigere Gruppierungen. Beispielsweise können Sie Selektorgruppen oder Selektorkombinationen nicht in Klammern setzen und sie als einfache Selektoren behandeln:

(h1, h2, h3)+p //Illegal

h1+p, h2+p, h3+p //Richtige Schreibweise

2. So wählen Sie aus

Zusätzlich zur von der $()-Funktion unterstützten Selektorsyntax definiert jQuery auch einige Auswahlmethoden . Die meisten jQuery-Methoden, die wir in diesem Kapitel gesehen haben, führen irgendeine Operation am ausgewählten Element aus. Auswahlmethoden sind unterschiedlich: Sie modifizieren den Satz ausgewählter Elemente, extrahieren, erweitern oder dienen einfach als Ausgangspunkt für neue Auswahlvorgänge. In diesem Abschnitt werden diese Auswahlmethoden beschrieben. Sie werden feststellen, dass die meisten dieser Auswahlmethoden dieselben Funktionen wie die Selektorsyntax bieten.

Der einfachste Weg, ausgewählte Elemente zu extrahieren, besteht darin, sie nach Position zu extrahieren. Das von first() zurückgegebene jQuery-Objekt enthält nur das erste ausgewählte Element, und das von last() zurückgegebene jQuery-Objekt enthält nur das letzte Element. Im Allgemeinen enthält das von der eq()-Methode zurückgegebene Query-Objekt nur ein einzelnes ausgewähltes Element mit der angegebenen Sequenznummer. (In jQuery 1.4 sind auch negative Zahlen zulässig, beginnend mit dem Ende der Auswahl.) Beachten Sie, dass das von diesen Methoden zurückgegebene jQuery-Objekt nur ein Element enthält. Dies unterscheidet sich von der allgemeinen Array-Seriennummer. Das von der Array-Seriennummer zurückgegebene einzelne Element wird von jQuery nicht gepackt:

var paras=$("p");

Paras.firs () // Wählen Sie nur das erste & lt; p & gt;

paras.last () // Nur das letzte & lt; p & gt;

paras.eq(1)                                                                                                                                                                                                                                                                                                         

Eine allgemeinere Methode zum Extrahieren einer Auswahl nach Position ist Slice(). Die Slice()-Methode von jQuery ähnelt der Array.slice()-Methode: Erstere akzeptiert die Start- und Endzahlen (negative Zahlen werden). vom Ende berechnet), Das zurückgegebene jQuery-Objekt enthält den Satz von Elementen von der Start- bis zur Endsequenznummer (aber nicht einschließlich der Endsequenznummer). Wenn die Endsequenznummer weggelassen wird, enthält das zurückgegebene Objekt alle Elemente ab der Startsequenznummer:

$("p").slice(2,5) //Wählen Sie die aus 3., Das 4. und 5.

-Element

$("p").slice(-3) //Wählen Sie die letzten 3

-Elemente aus

filter() ist eine allgemeine Auswahlfiltermethode. Es gibt drei Aufrufmethoden:

Übergeben Sie die Auswahlzeichenfolge an filter() und es wird eine jQuery zurückgegeben Objekt, das nur ausgewählte Elemente enthält, die auch mit diesem Selektor übereinstimmen.

Übergeben Sie ein weiteres jQuery-Objekt an filter(), das ein neues jQuery-Objekt zurückgibt, das die Schnittmenge dieser beiden Query-Objekte enthält. Sie können filter() auch ein Array von Elementen oder sogar ein einzelnes Dokumentelement übergeben.

Durch die Übergabe der Beurteilungsfunktion an filter() wird die Funktion für jedes passende Element aufgerufen. filter() gibt ein jQuery-Objekt zurück, das die Beurteilungsfunktion nur enthält, wenn sie wahr ist (oder wahr ist). Wert)-Element. Beim Aufruf der Beurteilungsfunktion ist dieser Wert das aktuelle Element und der Parameter ist die Elementnummer.

$("p").filter(".note") //Gleiches wie $("p.note")

$("p").filter($(".note")) //Gleiches wie $("p.note")

$("p") .filter(function(idx){return idx%2 == 0}) //Gleich wie $("p:even")

not()-Methode ist dasselbe wie filter () , außer dass die Bedeutung entgegengesetzt zu filter() ist. Wenn Sie eine Selektorzeichenfolge an not() übergeben, wird ein neues jQuery-Objekt zurückgegeben, das nur Elemente enthält, die nicht mit dem Selektor übereinstimmen. Wenn Sie ein jQuery-Objekt, ein Array von Elementen oder ein einzelnes Element an not() übergeben, werden alle ausgewählten Elemente zurückgegeben, mit Ausnahme der explizit ausgeschlossenen. Wenn Sie eine Beurteilungsfunktion an not() übergeben, wird die Beurteilungsfunktion genau wie in filter() aufgerufen, mit der Ausnahme, dass das zurückgegebene jQuery-Objekt nur die Elemente enthält, die dazu führen, dass die Beurteilungsfunktion falsche oder andere falsche Werte zurückgibt:

$("p").not("#header, #footer"); //Alle Elemente außer zwei speziellen Elementen

in jQuery 1.4 , Eine andere Möglichkeit, eine Auswahl zu extrahieren, ist die Methode has(). Wenn ein Selektor übergeben wird, gibt has() ein neues jQuery-Objekt zurück, das nur ausgewählte Elemente enthält, deren Nachkommen mit dem Selektor übereinstimmen. Wenn Sie ein Dokumentelement an has() übergeben, wird der Satz ausgewählter Elemente an die ausgewählten Elemente angepasst, die Vorgängerknoten des angegebenen Elements sind:

$("p") .has(" a[href]") // Absätze mit Links

Die Methode add() erweitert die Auswahl, anstatt sie zu filtern oder zu extrahieren. Alle an die Funktion $() übergebenen Parameter (außer Funktionen) können auch an die Methode add() übergeben werden. Die Methode add() gibt die ursprünglich ausgewählten Elemente sowie die Elemente zurück, die durch die an die Funktion $() übergebenen Parameter ausgewählt (oder erstellt) wurden. add() entfernt doppelte Elemente und sortiert die kombinierte Auswahl so, dass die Elemente in der folgenden Reihenfolge im Dokument vorliegen:

//Alle

auswählen Äquivalente Art der Elemente

$("p, p") //Selektorgruppe verwenden

$("p") .add(p) //Selektor an add() übergeben

$("p").add($("p")) / /jQuery-Objekt an add() übergeben

var paras = document.getElementsByTagName("p"); //Array-ähnliches Objekt

$("p").add (Absätze); //Übergeben Sie das Elementarray an add()

1. Wiederherstellen des zuvor ausgewählten Elementsatzes

Um den Kettenaufruf von Methoden zu realisieren, geben viele jQuery-Objektmethoden schließlich das aufrufende Objekt zurück. Die in diesem Abschnitt beschriebenen Methoden geben jedoch alle neue jQuery-Objekte zurück. Sie können weiterhin eine Kette aufrufen, müssen sich jedoch darüber im Klaren sein, dass die nach dem Kettenaufruf bearbeitete Elementmenge möglicherweise nicht mehr die Elementmenge am Anfang des Kettenaufrufs ist.

Die tatsächliche Situation ist komplizierter. Wenn die hier beschriebenen Auswahlmethoden ein neues ejQuery-Objekt erstellen oder zurückgeben, fügen sie einen internen Verweis auf das alte jQuery-Objekt hinzu, von dem es abgeleitet wurde. Dadurch wird eine verknüpfte Liste oder ein Stapel von jQuery-Objekten erstellt. Die Methode end() wird verwendet, um den Stapel zu öffnen und das gespeicherte jQuery-Objekt zurückzugeben. Durch den Aufruf von end() in einer Aufrufkette wird der Satz übereinstimmender Elemente in seinen vorherigen Zustand zurückversetzt. Betrachten Sie den folgenden Code:

//Suchen Sie alle

-Elemente und suchen Sie dann nach

-Elementen darin

/ /High Markieren Sie das

-Element und fügen Sie dann einen Rahmen zum

-Element hinzu

//Verwenden Sie zunächst keine Kettenaufrufe

var ps = $("p");

var paras = p.find("p");

paras.addClass ("highlight");

ps.css("border", "solid black 1px");

//Im Folgenden wird gezeigt, wie Kettenaufrufe zum Implementieren von

$("p").find("p").addClass("highlight") verwendet werden. end().css ("border", "solid black 1px");

//Sie können die Reihenfolge der Operationen auch umkehren, um den Aufruf von end()

$("p").css("border", "solid block 1px").find("p").addClass("highlight");

Wenn Sie es manuell definieren möchten, um einen Satz von Elementen auszuwählen und gleichzeitig die Kompatibilität mit der Methode end() aufrechtzuerhalten, können Sie den neuen Satz von Elementen als Array oder arrayähnliches Objekt an die Methode push5tack() übergeben. Das angegebene Element wird zum neuen ausgewählten Element und der zuvor ausgewählte Elementsatz wird auf den Stapel verschoben. Sie können dann mit der end()-Methode wiederhergestellt werden:

var sel = $(" p");                                                                                                                                    using using use with using using ’ sel ... Es gibt eine letzte Methode, die im Auswahlstapel erklärt werden muss. andSelf() gibt ein neues jQuery-Objekt zurück, das alle aktuell ausgewählten Elemente sowie alle zuvor ausgewählten Elemente enthält (Duplikate werden entfernt). andSelf() ist dasselbe wie die Methode add(), vielleicht ist „addPrev“ ein aussagekräftigerer Name. Betrachten Sie als Beispiel die folgende Variante des obigen Codes: Hervorheben des

-Elements in seinem übergeordneten Knoten und anschließendes Hinzufügen eines Rahmens zu diesen

>$("p").find("p").andSelf().                                 //Suchen Sie

in

addclass ("highlight"). // Gao Liang

End () // Verschließt den Stapel zweimal und gibt $ ("p") zurück

🎜>

css("border", "solid black 1px"); // Einen Rahmen zu ps hinzufügen

2. Wählen Sie das Element aus. Die Menge wird als Kontext verwendet.

Die Methoden filter(), add() und not() Die oben beschriebene Methode führt Schnitt-, Mengen- und Differenzoperationen durch. jQuery definiert auch einige andere Auswahlmethoden, die den aktuell ausgewählten Satz von Elementen als Kontext verwenden können. Für jedes ausgewählte Element verwenden diese Methoden das ausgewählte Element als Kontext oder Ausgangspunkt, um einen neuen Satz ausgewählter Elemente abzurufen, und geben dann ein neues jQuery-Objekt zurück, das die Vereinigung aller neu ausgewählten Elemente enthält. Ähnlich wie bei der Methode add() werden doppelte Elemente entfernt und sortiert, sodass die Elemente in der Reihenfolge angeordnet werden, in der sie im Dokument erscheinen.

Die gebräuchlichste Methode zur Auswahl dieser Kategorie ist find(). Es sucht unter den Nachkommen jedes aktuell ausgewählten Elements nach Elementen, die mit der angegebenen Selektorzeichenfolge übereinstimmen, und gibt dann ein neues jQuery-Objekt zurück, das den Satz übereinstimmender Nachkommen darstellt. Beachten Sie, dass diese neu ausgewählten Elemente nicht mit dem vorhandenen Satz ausgewählter Elemente zusammengeführt werden. Beachten Sie auch, dass find() sich von filter() unterscheidet. filter() wählt keine neuen Elemente aus, sondern reduziert lediglich den aktuell ausgewählten Elementsatz:

$("p").find("p") //Elemente suchen in, genau wie $("p p")

In dieser Kategorie Andere Methoden Gibt neue jQuery-Objekte zurück, die die untergeordneten Elemente, Geschwister oder übergeordneten Elemente jedes Elements im aktuell ausgewählten Elementsatz darstellen. Die meisten akzeptieren eine optionale Selektorzeichenfolge als Argument. Wenn kein Selektor übergeben wird, geben sie alle untergeordneten Elemente, Geschwister oder übergeordneten Elemente zurück. Wenn Selektoren übergeben werden, filtern sie die Menge der Elemente und geben nur diejenigen zurück, die übereinstimmen.

Die Methode children() gibt die direkten untergeordneten Elemente jedes ausgewählten Elements zurück, die mit optionalen Selektorparametern gefiltert werden können:

/ / Finden Sie alle -Elemente

in den untergeordneten Knotenelementen mit den IDs der Elemente „header“ und „footer“ //Mit $("#header>span, #footer> span ") ist dasselbe wie die Methode children(), außer dass sie alle untergeordneten Knoten jedes Elements zurückgibt, einschließlich Textknoten. Wenn im ausgewählten Elementsatz ein

Die Methoden next() und prev() geben die nächsten und vorherigen Geschwisterelemente (falls vorhanden) jedes ausgewählten Elements zurück. Wenn ein Selektor übergeben wird, werden nur Geschwisterelemente ausgewählt, die mit dem Selektor übereinstimmen:

$("h1").next("p") //With $("h1 + p") Gleich wie

$("h1").prev() //

Das Geschwisterelement vor dem Element

nextAll() und prevAll() geben alle Geschwisterelemente vor oder nach jedem ausgewählten Element (falls vorhanden) zurück. Die Methode siblings() gibt alle Geschwisterelemente jedes ausgewählten Elements zurück (das ausgewählte Element selbst ist kein eigenes Geschwisterelement). Wenn Sie einen Selektor an diese Methoden übergeben, werden nur passende Geschwisterelemente zurückgegeben:

$("#footer").nextAll("p") //Folgen Sie dem #footer-Element Alle

Geschwisterelemente

$("#footer").prevAll() //Alle Geschwisterelemente vor dem #footer-Element

Ab jQuery 1.4 akzeptieren die Methoden nextUntil() und prevUntil() einen Selektorparameter und wählen alle Geschwisterelemente hinter oder vor dem ausgewählten Element aus, bis ein Geschwisterelement gefunden wird, das zum Selektor passt. Wenn der Selektor weggelassen wird, verhalten sich diese beiden Methoden genauso wie nextAll() und prevAll() ohne Selektor.

parent()-Methode gibt den übergeordneten Knoten jedes ausgewählten Elements zurück:

$("li").parent() //List Der übergeordnete Knoten des Elements, z. B. die Methode und

, gibt den Vorgängerknoten jedes ausgewählten Elements zurück (bis zum Element). Sowohl parent() als auch parent() akzeptieren einen optionalen Selektor-String-Parameter:

$("a[href]").parents("p") //Contains Linked

parentsUntil() gibt die Vorfahrenelemente jedes ausgewählten Elements zurück, bis das erste Vorfahrenelement erscheint, das mit dem angegebenen Selektor übereinstimmt. Die Methode „nest()“ muss eine Selektorzeichenfolge übergeben und gibt unter den Vorfahrenelementen jedes ausgewählten Elements (falls vorhanden) das nächste Vorfahrenelement zurück, das mit dem Selektor übereinstimmt. Bei dieser Methode werden Elemente als ihre eigenen Vorfahren betrachtet. In jQuery 1.4 können Sie auch ein Vorfahrenelement als zweiten Parameter an close() übergeben, um zu verhindern, dass jQuery bei der Suche nach oben über das angegebene Element hinausgeht:

$(" a[href ]").closest("p") //Die innerste Ebene, die den Link enthält

$("a[href]").parentsUntil(" :not(p )") //Alle

-Elemente, die umschließen

Das Obige ist die vollständige Einführung in JQuery-Selektoren und -Prinzipien. Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonEine Einführung in die häufig verwendeten Selektortypen von jquery und ihre Verwendungsprinzipien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!