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:

$("li").filter(":even").css( "font-weight", "bold" );

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

$("li")
.filter(function( index ) {
   return index % 2 === 0;
})
.css( "font-weight", "bold" );

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

.filter(function( index ) {
 return $( "span", this ).length >= 2;
})

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 id="Die-code-eq-code-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-w?hlt"> 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 id="Die-code-filter-code-Methode-in-jQuery-wird-verwendet-um-Elemente-auszuw?hlen-die-bestimmte-Bedingungen-erfüllen-Sie-k?nnen-eine-Funktion-an-die"> 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.