Ein umfassender Blick auf JQuery Dom Traversal

jQuery DOM Traversal: Leichte Kontrolle von Webelementen

In diesem Artikel wird die JQuery DOM -Traversal -Methode eingehend untersucht, in der angezeigt wird, wie JQuery verwendet wird, um Webseitenelemente einfach auszuwählen und basierend auf ihrer Beziehung zu anderen Elementen auf der Seite zu arbeiten.

Kernpunkte:

• jQuery DOM Traversal ermöglicht es Entwicklern, Webseitenelemente einfach zu navigieren und zu manipulieren und relativ zur anfänglichen Auswahl zu arbeiten, einschließlich des Ersetzens der ursprünglichen Auswahl oder dem Hinzufügen und Entfernen von Elementen.
• jQuery bietet mehrere Methoden zum Filtern von Elementen basierend auf der Position von Elementen im Vergleich zu anderen Elementen und der Frage, ob sie bestimmte Klassen haben usw. Zu den Methoden gehören eq, first, last, slice, filter, map und
.
• children jQuery bietet auch DOM -Traversal -Methoden für den Zugriff auf Eltern-, Kind- oder Geschwisterelemente. Diese Methoden umfassen find, parent, parents, closest, siblings, prev, prevAll, next, nextAll,
,
• , add , addBack und end. contents not Andere JQuery -Methoden, die sich auf DOM -Traversal beziehen, umfassen
,

,

,

,

und

. Diese Methoden tragen dazu bei, die Auswahl mehr Elemente hinzuzufügen, den vorherigen Elementenmenge wiederherzustellen oder bestimmte Elemente aus der Auswahl auszuschließen.

Elementfilterung Beginnen wir mit dem Filtern der Auswahl in ein spezifischeres Element. Sie können Elemente basierend auf vielen Bedingungen filtern, z. B. ihre Position im Verhältnis zu anderen Elementen und ob sie bestimmte Klassen haben. In den meisten Fällen werden Sie am Ende weniger Elemente auswählen, als Sie mit der Auswahl beginnen. Folgendes ist eine Liste verschiedener Filtermethoden:

• eq - Diese Methode reduziert das Matching -Element auf Elemente, die sich am angegebenen Index befinden. Der Index beginnt von vorne. Um das erste Element auszuwählen, müssen Sie $("selector").eq(0) verwenden. Beginnend mit Version 1.4 können Sie eine negative Ganzzahl bereitstellen, die Elemente vom Ende und nicht vom Anfang zählt.
• first und last - first Methoden geben nur das erste Element im Matching -Element -Set zurück, während last das letzte Element im Matching -Element -Set zurückgibt. Keine der beiden Methoden akzeptiert Parameter.
• slice - Wenn Sie nach allen Elementen in einer Sammlung suchen, deren Index innerhalb eines bestimmten Bereichs liegt, können Sie slice() verwenden. Diese Methode akzeptiert zwei Parameter. Der erste Parameter gibt den Startindex an, wo die Methode das Slice starten soll, und der zweite Parameter gibt den Index an, für den die Auswahl enden soll. Der zweite Parameter ist optional, und wenn alle Elemente ausgelassen werden, deren Index größer oder gleich dem Startindex ist, werden ausgewählt.
• filter - Diese Methode reduziert Ihr Element auf Elemente, die mit dem Selektor übereinstimmen, oder durch die in der Funktion, die Sie an diese Methode übergebene, festgelegte Bedingungen. Hier ist ein Beispiel für die Verwendung eines Selektors:

<code class="language-javascript">$("li").filter(":even").css( "font-weight", "bold" );</code>

Sie können auch die Funktion verwenden, um dasselbe Element auszuwählen:

<code class="language-javascript">$("li")
.filter(function( index ) {
   return index % 2 === 0;
})
.css( "font-weight", "bold" );</code>

Sie können diese Funktion auch verwenden, um komplexere Auswahlen auszuführen, wie z. B.

<code class="language-javascript">.filter(function( index ) {
 return $( "span", this ).length >= 2;
})</code>

Dies wird nur Elemente mit mindestens zwei <span></span> Tags ausgewählt.

• map - Mit dieser Methode können Sie jedes Element in der aktuellen Auswahl über eine Funktion übergeben und schließlich ein neues JQuery -Objekt mit dem Rückgabewert erstellen. Das zurückgegebene JQuery -Objekt selbst enthält ein Array, mit dem Sie die get -Methode verwenden können, um das Basisarray zu verarbeiten.

DOM Traversal

Betrachten Sie eine Situation, in der Sie den Selektor kennen, mit dem Sie auf verschiedene Elemente zugreifen können. Sie müssen jedoch das übergeordnete Element aller von ihnen verwenden. Darüber hinaus hat das übergeordnete Element keine spezifische Klasse oder Tags, die ihnen gemeinsam sind. Das einzige, was sie gemeinsam haben, ist, dass sie beide Elternelemente von Elementen sind, auf die Sie zugreifen können. Ich habe viele Male ähnliche Situationen begegnet.

jQuery bietet viele nützliche Methoden, um auf Eltern-, Kind- oder Geschwisterelemente zuzugreifen. Lassen Sie uns sie nacheinander vorstellen:

• children - Mit dieser Methode können wir untergeordnete Elemente jedes Elements in das Element -Set abrufen. Diese untergeordneten Elemente können optional von Selektoren filtriert werden.
• find - Diese Methode erhält alle Nachkommen jedes Elements in das Matching -Element -Set, die von Selektoren oder Elementen gefiltert werden. In diesem Fall ist der an find() übergebene Selektorparameter nicht optional. Wenn Sie alle Nachkommen erhalten möchten, können Sie den universellen Selektor (*) als Parameter für diese Methode übergeben.
• parent - Diese Methode erhält das übergeordnete Element jedes Elements im aktuellen Satz. Das übergeordnete Element kann optional mit Selektoren filtriert werden.
• parents - Diese Methode erhält alle Vorfahren jedes Elements in der Sammlung. Es akzeptiert auch einen optionalen Selektorparameter, um Vorfahren zu filtern. Der Unterschied zwischen parent() und parents() besteht darin, dass Ersteres nur eine Stufe nach oben durchquert, während parents() nach oben zum Stammelement des Dokuments durchquert.
• closest - Diese Methode erhält das erste Element, das dem angegebenen Selektor entspricht, indem das Element selbst getestet und dann den DOM -Baum nach oben durchquert. Es gibt zwei signifikante Unterschiede zwischen parents() und closest(). parents() beginnt mit dem Übergang vom übergeordneten Element des Elements und closest() beginnt die Überquerung des Elements selbst. Ein weiterer Unterschied besteht darin, dass closest() nur durch den DOM -Baum geht, bis eine Übereinstimmung gefunden wird, während sich parents() nach oben bewegt, bis es das Wurzelelement des Dokuments erreicht.
• siblings - Diese Methode erhält die Geschwisterelemente jedes Elements in das Matching -Element -Set. Sie können optional einen Selektor als Parameter bereitstellen, um nur Geschwisterelemente mit passenden Selektoren zu erhalten.
• prev - Diese Methode erhält genau das gleiche Element jedes Elements in unserer Sammlung. Wenn Sie einen Selektor angeben, wählt die Methode das Element nur aus, wenn es mit dem Selektor übereinstimmt.
• prevAll - Diese Methode erhält alle Präzedenzfallelemente jedes Elements in unserer Sammlung. Wie bei anderen Methoden können Sie Selektoren zum Filtern zurückgegebene Elemente zur Verfügung stellen.
• next - Diese Methode erhält das gleiche Element nur unmittelbar nach dem Übereinstimmungselement. Wenn ein Selektor bereitgestellt wird, wird nur passende Selektoren angezeigt.
• nextAll - Diese Methode erhält alle nachfolgenden Geschwisterelemente jedes Elements in der Sammlung. Die Geschwisterelemente können durch Bereitstellung eines Selektors selektiv filtriert werden.

Weitere Funktionen im Zusammenhang mit DOM -Traversal

Wenn Sie das DOM durchqueren, können Sie auf Situationen stoßen, in denen Sie mehr Elemente hinzufügen müssen, die der ursprünglichen Sammlung zur Auswahl nicht zu tun haben, oder Sie müssen den vorherigen Elementensatz wiederherstellen. JQuery bietet einige Funktionen, mit denen Sie alle diese Aufgaben ausführen können.

• add - Diese Methode erstellt ein neues JQuery -Objekt, das neue Elemente enthält, die der Liste der vorhandenen Elemente hinzugefügt werden. Denken Sie daran, dass es keine Garantie gibt, dass die vorhandene Sammlung in der Reihenfolge, in der sie an die add -Methode übergeben werden, neue Elemente hinzugefügt werden.
• addBack - JQuery behält einen internen Stapel bei, der Änderungen an Element -Sätzen verfolgt. Wenn Sie jede Traversal -Methode aufrufen, wird eine neue Reihe von Elementen auf den Stapel geschoben. Wenn Sie sowohl vorherige als auch neue Element -Sets verwenden möchten, können Sie die addBack -Methode verwenden.
• end - Diese Methode beendet den neuesten Filterbetrieb und stellt Ihr Element wieder auf ihren vorherigen Zustand. Es ist nützlich in Situationen, in denen Sie bestimmte Elemente im Zusammenhang mit den aktuellen Elementenmengen beziehen, die ursprüngliche Menge wiederherstellen und dann verschiedene Elementsätze manipulieren.
• contents - Wenn Sie alle Elemente aller untergeordneten Elemente, einschließlich Text- und Kommentarknoten, erhalten möchten, können Sie die Methode contents verwenden. Sie können diese Methode auch verwenden, um den Inhalt von <iframe></iframe> zu erhalten (wenn <iframe></iframe> in derselben Domäne wie Ihre Seite befindet).
• not - Wenn Sie einen großen Satz von Elementen haben und nur die Teilmengen von Elementen auswählen möchten, die nicht mit einem bestimmten Selektor übereinstimmen, können Sie verwenden. Ab Version 1.4 kann die Methode auch eine Funktion als Argument akzeptieren, um jedes Element basierend auf bestimmten Bedingungen zu testen. Jedes Element, das diesen Bedingungen erfüllt, wird vom gefilterten Satz ausgeschlossen. not()

Schlussfolgerung

Alle diese Methoden in JQuery bieten uns eine einfache Möglichkeit, von einer Reihe von Elementen zu einem anderen zu wandern. Da einige dieser Methoden einander sehr ähnlich sind, schlage ich vor, dass Sie ihnen besondere Aufmerksamkeit schenken. Wenn Sie den Unterschied zwischen

und parents() oder closest() und next("selector") verstehen, können Sie in einigen Fällen Stunden Probleme sparen. nextAll("selector").eq(0)

Ich hoffe, Sie haben diesen Artikel genossen. Wenn Sie Tipps haben, die Sie mit anderen Lesern teilen möchten, kommentieren Sie bitte unten!

JQuery DOM Traversal FAQ

Was bedeutet JQuery DOM -Traversal?

jQuery DOM Traversal ist ein wesentlicher Aspekt der Webentwicklung, mit dem Entwickler DOMS -Modelle (Dokumentobjektmodelle) problemlos navigieren und manipulieren können. Es bietet eine Reihe von Methoden, mit denen Elemente auf einer Webseite durchquert werden können, um bestimmte Elemente auszuwählen und verschiedene Vorgänge auszuführen. Dies kann das Ändern des Inhalts, des Stils und der sogar der Struktur einer Webseite beinhalten. Die Fähigkeit, das DOM zu durchqueren, macht JQuery zu einem leistungsstarken Tool für die dynamische Webentwicklung.

Wie unterscheidet sich JQuery DOM von traditionellen JavaScript -Dom -Operationen?

Während JavaScript eine eigene DOM -Betriebsmethode liefert, vereinfacht JQuery DOM -Traversal den Prozess und macht es effizienter. Es bietet eine intuitivere und prägnantere Syntax, mit der der Code einfacher zu schreiben und zu verstehen ist. Darüber hinaus behandelt JQuery viele JavaScript-bezogene Cross-Browser-Kompatibilitätsprobleme, wodurch Ihr Code robuster und zuverlässiger wird.

Können Sie die Methoden .parent() und .children() in jQuery DOM -Durchqueren erklären?

Die

-Methode in jQuery wird verwendet, um das direkte übergeordnete Element eines Elements auszuwählen. Wenn Sie beispielsweise ein .parent() Element im -Element haben, wird <div> on <code><div> <code>.parent() verwendet. Andererseits wird die -Methode verwendet, um alle direkten untergeordneten Elemente eines Elements auszuwählen. Wenn Sie .children() für das Element im vorherigen Beispiel verwendet haben, wird .children() ausgewählt. <div> Was ist der Unterschied zwischen und <h3> Methoden in <code>.find() jQuery? .children() Obwohl sowohl

als auch .find() Methoden verwendet werden, um Nachkommenselemente auszuwählen, funktionieren sie etwas unterschiedlich. Die .children() -Methode durchquert nur eine Ebene nach unten, was bedeutet, dass sie nur direkte untergeordnete Elemente auswählt. Die .children() -Methode kann jedoch mehrere Ebenen des DOM -Baums nach unten durchqueren, was bedeutet, dass alle Nachkommen des Elements und nicht nur direkte untergeordnete Elemente ausgewählt werden können. .find()

Wie verwende ich die

-Methode in jQuery DOM -Traversal? .siblings() Die

-Methode in JQuery wird verwendet, um alle Geschwisterelemente des ausgewählten Elements auszuwählen. Ein gleichzeitiges Element bezieht sich auf ein Element, das das gleiche übergeordnete Element teilt. Wenn Sie beispielsweise mehrere

Elemente in einem .siblings() -Element haben, wählen Sie mit auf einem alle anderen <div> Elemente aus. <code><div> <code>.siblings() Was ist der Zweck der <div> -Methode in jQuery DOM -Durchqueren? <h3> Die <code>.eq() -Methode in jQuery wird verwendet, um Elemente mit einer bestimmten Indexnummer auszuwählen. Es ist besonders nützlich, wenn Sie mehrere Elemente desselben Typs haben und eine davon basierend auf ihrer Position in der DOM auswählen möchten. Die Indexnummer startet bei 0, wählt das erste Element,

das zweite Element usw. .eq() .eq(0) Können Sie die Methoden .eq(1) und

in jQuery DOM -Durchqueren erklären?

Mit den .first() und .last() -Methoden in

jQuery werden die ersten und letzten Elemente der Gruppe ausgewählt. Wenn Sie beispielsweise eine Reihe von

Elementen haben, wählen Sie .first() die erste .last() in der Gruppe und <div> die letzte <code>.first() aus. <div> <code>.last() Wie verwende ich die <div> -Methode in jQuery DOM -Traversal? <h3> Die <code>.filter() -Methode in jQuery wird verwendet, um Elemente auszuwählen, die bestimmte Bedingungen erfüllen. Sie können eine Funktion an die -Methode übergeben, mit der nur die Elemente ausgewählt werden, die die Funktion

zurückgibt. Auf diese Weise können Sie komplexere Auswahlkriterien erstellen und Elemente basierend auf den Attributen oder dem Inhalt des Elements auswählen. .filter()

Was ist der Zweck der .not() -Methode in jQuery DOM -Durchqueren?

Die .not() -Methode in jQuery wird zum Löschen von Elementen aus einer Sammlung verwendet. Es ist das Gegenteil der .filter() -Methode. Sie können einen Selektor-, Funktions- oder JQuery -Objekt an die .not() -Methode übergeben, mit der alle Elemente, die den Parametern aus der Sammlung übereinstimmen, entfernen.

Können Sie die .has() -Methode in jQuery DOM -Traversal erklären?

Die

-Methode in JQuery wird verwendet, um Elemente mit bestimmten Nachkommen auszuwählen. Sie können ein Selektor- oder JQuery -Objekt an die .has() -Methode übergeben, mit der alle Elemente ausgewählt werden, die mindestens ein Element enthalten, das dem Parameter entspricht. Dies ist nützlich, wenn Sie Elemente basierend auf den Elementen auswählen möchten. .has()

Die Bild -URLs sind in der Ausgabe erhalten.