Detaillierte Erläuterung der jQuery-Traversierung von DOM-Elementen und Knotenmethoden_jquery

Das Beispiel in diesem Artikel beschreibt die jQuery-Methode zum Durchlaufen von DOM-Elementen und -Knoten. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Traverse nach oben – Vorfahrenelemente

① $(selector).parent([filter]): Gibt das direkte übergeordnete Element des mit dem Selektor übereinstimmenden Elements zurück. Die Methode kann einen Filterselektor akzeptieren, um das zurückgegebene übergeordnete Element zu filtern.

② $(selector).parents([filter]): Gibt alle Vorfahrenknoten des übereinstimmenden Elements zurück, bis hin zum Dokumentstammelement-HTML. Die Methode kann einen Filterselektor akzeptieren, um die zurückgegebenen Vorfahrenknoten zu filtern.

Bemerkungen: Der Unterschied zwischen Eltern und Eltern besteht darin, dass Eltern den direkten übergeordneten Knoten zurückgeben, Eltern alle Vorfahrenknoten zurückgeben und $("html").parent() den Dokumentknoten zurückgibt, während $("html"). parent() Gibt leer zurück.

③ $(selector).parentUntil([ancestorSelector][,filter]): Gibt alle Ancestor-Knoten zwischen dem passenden Knoten und ancestorSelector zurück. Die Methode kann keinen Filterselektor akzeptieren Filtern Sie den zurückgegebenen Ancestor-Knoten. Wenn ancestorSelector leer ist oder in seinem Ancestor-Knoten kein mit ancestorSelector übereinstimmendes Element gefunden wird, werden alle Ancestor-Knoten zurückgegeben, was der Methode parent() entspricht.

$(selector).parentUtil(element[,ancestorSelector]): Die Verwendung und Bedeutung sind die gleichen wie oben.

④ $(selector).offsetParent(): Gibt das zuletzt positionierte Vorfahrenelement des passenden Elements zurück. Das sogenannte positionierte Vorfahrenelement bedeutet, dass sein CSS-Positionsattribut auf relativ, absolut, fest eingestellt ist, was hauptsächlich der Fall ist Während des Animationsdemonstrationsvorgangs berechnet, spielen der Versatz und die Position von Elementen eine große Rolle.

⑤ $(selector).closest(ancestorSelector[,context]): Ruft das nächste Vorfahrenelement ab, das mit ancestorSelector übereinstimmt. Die Methode kann einen Parameterkontext akzeptieren, um den Suchbereich zu steuern. Die Unterschiede zur Elternmethode sind wie folgt:

a.closest sucht ausgehend vom aktuellen Element selbst nach oben
parent beginnt beim übergeordneten Knotenelement.

b.closest durchläuft den DOM-Baum, bis es eine Elementposition findet, die mit dem ancestorSelector
übereinstimmt parent durchläuft den DOM-Baum bis zum Stammelement des Dokuments und fügt jedes Vorfahrenelement einer temporären Sammlung hinzu. Wenn ein Selektor angewendet wird, wird diese Sammlung basierend auf dem Selektor gefiltert

c.closest gibt ein jQuery-Objekt zurück, das 0 oder ein Element enthält
parent gibt ein jQuery-Objekt zurück, das 0, ein oder mehrere Elemente

enthält

Andere Transformationsverwendung:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. Abwärtsdurchlauf – Nachkommenelemente

① .children([childrenSelector]): Gibt die direkten untergeordneten Elemente des Elements zurück. Die Methode kann einen Parameter akzeptieren, um die zurückgegebenen untergeordneten Elemente zu filtern.

② .find(descendantSelector): Gibt alle Nachkommenelemente des Elements zurück, die mit DescendantSelector übereinstimmen, bis hinunter zum letzten Nachkommen.

Andere Transformationsverwendung:

.find(jQuery object);
.find(element);

③ .contents(): Gibt alle untergeordneten Elemente des Elements zurück. Der Unterschied zu untergeordneten Elementen besteht darin, dass der Inhalt Textknoten und Kommentarknoten enthält.

3. Geschwisterdurchquerung – Bruderelemente

① .siblings([selector]): Gibt alle Geschwisterelemente des aktuellen Elements zurück. Die Methode kann einen optionalen Parameter erhalten, um die zurückgegebenen Geschwisterelemente zu filtern.

② .next([selector]): Gibt das nächste Geschwisterelement des aktuellen Elements zurück. Die Methode kann einen optionalen Parameter akzeptieren, um die zurückgegebenen Geschwisterelemente zu filtern.

③ .nextAll([selector]): Gibt alle Geschwisterelemente nach dem aktuellen Element zurück. Die Methode kann einen optionalen Parameter akzeptieren, um die zurückgegebenen Geschwisterelemente zu filtern.

④ .nextUntil([selector][,filter]): Gibt alle Geschwisterelemente des aktuellen Elements zurück, bis ein Geschwisterelement gefunden wird, das der Selektorbedingung entspricht. Die Methode kann einen optionalen Parameterfilter akzeptieren, um die zurückgegebenen Geschwisterelemente zu filtern.

⑤ .prev/prevAll/prevUntil hat die gleiche Verwendung und ähnliche Funktionen wie next/nextAll/nextUntil, aber die Suchrichtung ist entgegengesetzt.

4. Filtern

① .filter(selector): Filtern Sie die Teilmenge aus dem aktuellen Satz übereinstimmender Elemente, die die Auswahlbedingungen erfüllt, um den Übereinstimmungsbereich zu reduzieren.

.filter(function(index)): Filtern Sie den aktuell übereinstimmenden Satz von Elementen gemäß der Rückruffunktion. Der an die Rückruffunktion übergebene Parameterindex bezieht sich auf den Index des Elements im Satz Stellen Sie das Element im Funktionskörper dar und die Funktion gibt true / false zurück. Wenn true zurückgegeben wird, bleiben die untergeordneten Elemente erhalten, andernfalls werden die untergeordneten Elemente ausgeschlossen.

Andere Transformationsverwendung:

.filter(element|jQueryObject)

② .first(): Gibt das erste Element im aktuellen Satz übereinstimmender Elemente zurück.

③ .last(): Gibt das letzte Element im aktuellen Satz übereinstimmender Elemente zurück.

④ .eq(index/-index): Gibt das Element an der angegebenen Position im aktuell übereinstimmenden Elementsatz zurück. Der Index beginnt bei 0, und eine negative Zahl bedeutet eine Sortierung vom Ende zum Anfang.

⑤ .has(selector/element): Gibt einen Elementsatz mit bestimmten Unterelementen aus dem aktuellen Elementsatz zurück, mit Ausnahme von Elementen, die keine entsprechenden Unterelemente haben. Untergeordnete Elemente können mithilfe des Parameterselektors oder des Elementobjekts abgeglichen werden.

⑥ .is(selector|function(index)|element|jQueryObject): Überprüfen Sie die Elementsammlung basierend auf einem Selektor oder einer Rückruffunktion oder einem Element oder einem jQuery-Objekt und geben Sie zurück, wenn sie mindestens ein Element enthält, das dem angegebenen Ausdruck entspricht true, andernfalls wird false zurückgegeben, wenn die aktuelle Elementsammlung leer ist oder der Ausdruck leer ist. Diese Methode wird im Allgemeinen in Rückruffunktionen wie Ereignishandlern verwendet, um festzustellen, ob es sich um ein bestimmtes Element

handelt

⑦ .map(callback(index,domElement)): Konvertieren Sie das aktuell übereinstimmende Elementarray über den Rückgabewert der Rückruffunktion in ein anderes Objektarray (unabhängig davon, ob es sich um ein Dom-Element handelt). Array können Sie mit der Methode jQuery.map(array,callback(objectOfArray,indexOfArray)) erreichen.

⑧ .not(selector|elements|function(index)|jQuery-Objekt): Löschen Sie Elemente, die der Parameteranpassung entsprechen, aus dem aktuell übereinstimmenden Elementarray. Die Parameter können Selektor, DOM-Element, gewöhnliches jQuery-Objekt und ein boolescher Rückgabewert sein Rückruffunktion der Variablen.

⑨ .slice(start[,end]): Ruft eine Teilmenge des angegebenen Bereichs aus dem aktuell übereinstimmenden Elementsatz ab. Wenn Start und Ende negative Zahlen sind, wird die Elementrichtung vom Ende zum Anfang ermittelt.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „JQuery-Traversalalgorithmus und Zusammenfassung der Fähigkeiten“, „Zusammenfassung der jQuery-Tabellenoperationsfähigkeiten.“ ", "Zusammenfassung der jQuery-Drag-Effekte und -Techniken", "Zusammenfassung der jQuery-Erweiterungstechniken", "Zusammenfassung der gängigen klassischen jQuery-Spezialeffekte" , „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung von jQuery-Selektoren“ und „Zusammenfassung allgemeiner jQuery-Plugins und Verwendung“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.