Das Problem in der Vergangenheit bestand darin, dass es nicht möglich war, eine einfache Tour durch den DOM-Baum in Echtzeit durchzuführen, da Sie umständliche Routinen und Funktionen in Javascript erstellen mussten, was sich jedoch mit dem Erscheinen von jQuery änderte. Dieses Framework hat dazu beigetragen, den Nicht-Experten einen Ansatz für die Verwendung von Javascript zu bieten, der dazu führte, dass seine Popularität wieder zunahm.
Wählen Sie die untergeordneten Knoten aus
Eines der interessantesten Dinge, die als sehr kompliziert erscheinen können, ist die Auswahl der Kinder eines Elements . Wenn wir von einer hierarchischen Struktur sprechen, können wir von einer Familie sprechen, in der der Vater das höchste Element ist und seine Kinder Elemente sind, die es sind unter seinem Mantel oder Schutz regiert.
Angenommen, wir haben beispielsweise eine ungeordnete Liste oder ein Element <ul> . Es ist logisch, dass Ihre untergeordneten Elemente die enthaltenen <li> -Elemente sind. Wenn wir ein <li> -Element aus einer bestimmten Liste auswählen möchten, kann dies eine sehr komplexe Aufgabe sein , aber mit jQuery können wir es auf sehr einfache und saubere Weise erreichen.
Sehen wir uns im folgenden Code ein kleines Beispiel an, worüber wir sprechen:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <title> DOM-Manipulation mit JQuery </ title> <script> $ (function () { $ ("# start"). click (function () { $ ("# parent"). children (). each (function () { alert ($ (this) .text ()); }); }); }); </ script> </ head> <body> <ul id = "father"> <li> Sohn 1 </ li> <li> Sohn 2 </ li> <li> Sohn 3 </ li> </ ul> <button id = "start"> Test </ button> </ body> </ html>
Zunächst nehmen wir jQuery aus dem offiziellen CDN auf . Damit müssen wir die Datei nicht mit dem Quellcode auf unserem Computer speichern. Mit einem Browser und einer Internetverbindung können wir dieses Beispiel verwenden.
Dann erstellen wir ein kleines Skript, in dem wir darauf hinweisen, dass Sie, wenn Sie auf das Element mit der ID start klicken, den darin enthaltenen Code ausführen.
Der auszuführende Code gibt einfach an, dass das Element mit der übergeordneten ID und diesem Selektor durchsucht werden muss. Wir wenden die Methode children () an, um ihre untergeordneten Elemente zu lokalisieren, und schließlich mit der Methode each (), die wir im Fall des Codes durchlaufen Es gibt drei von ihnen, die es uns ermöglichen, die Reise zu machen, und dies sollte uns den Text zeigen, den jeder enthält. Sehen wir uns an, wie der vorherige Code in unserem Browser funktioniert:
Nach einem Klick auf den Test- Button sehen wir den ersten Alert :
Wenn wir die Warnungen weiterhin schließen, werden alle untergeordneten Elemente in der hierarchischen Struktur angezeigt:
Wie wir sehen konnten, ist nicht kompliziert in der Handhabung der Elemente in der Struktur unserer Seite. Dies ist nur ein kleines Beispiel, das uns einen offenen Mund darüber gibt, was wir in diesem Tutorial weiterhin sehen werden.
Die find () Methode
Obwohl es sehr nützlich ist, untergeordnete Elemente zu finden, gibt es eine Methode, mit der wir direkter nach IDs oder Klassen suchen können. Wir verweisen auf die find () -Methode. Diese Methode findet alle Übereinstimmungen der untergeordneten Elemente des Selektors, der sie aufruft.
Hiermit können wir ein großes <div> haben und ein find () aufrufen, um Klassen oder IDs zu lokalisieren, was uns zum nächsten Punkt bringt.
Ein praktisches Beispiel
Sehen wir uns im folgenden Code an, wie wir die Verwendung der find () -Methode und dann die Einfügung von Stilen in die gefundenen Elemente in die Praxis umsetzen. Auf diese Weise können wir uns etwas nähern, das wir im wirklichen Leben nützlich machen können:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <title> DOM-Manipulation mit JQuery </ title> <script> $ (function () { $ ("# start"). click (function () { $ ("# father"). find (". highlight"). css ("background-color", "network"); }); }); </ script> </ head> <body> <ul id = "father"> <li> Sohn 1 </ li> <li class = "highlight"> Sohn 2 </ li> <li> Sohn 3 </ li> </ ul> <button id = "start"> Test </ button> </ body> </ html>
Wenn wir in diesem Code so aussehen, als hätten wir etwas, das dem vorherigen Trick sehr ähnlich ist, haben wir geändert, dass zuerst der Inhalt des <script> -Tags hier, anstatt die untergeordneten Elemente eines Elements zu durchlaufen, mit der find () -Methode gesucht wird In ein Element mit der Klassenhervorhebung und in dieses Element mit der css () -Methode werden Stile eingefügt. In diesem Fall wird eine rote Farbe als Hintergrundfarbe eingefügt.
Mal sehen, wie es in unserem Browser aussieht, wenn wir auf den Test- Button klicken:
Suchen Sie das übergeordnete Element eines Elements
So wie wir ein Kind eines Elements lokalisieren können, können wir den gegenteiligen Effekt der Hierarchie erzielen, dh von einem Kind aus können wir den Vater lokalisieren . Dies ist sehr nützlich bei langen Listen, die dynamisch generiert werden, da wir auf diese Weise die übergeordneten Elemente entsprechend unseren Anforderungen hervorheben oder verwenden können.
Im folgenden Code sehen wir, wie wir mit jQuery ein Skript erstellen können, mit dem wir das Ziel erreichen, alle Eltern des ausgewählten Elements anzuzeigen:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <title> DOM-Manipulation mit JQuery </ title> <script> $ (function () { $ ("# start"). click (function () { $ (". highlight"). parent (). each (function () { alert ($ (this) .prop ("tagName")); }); }); }); </ script> </ head> <body> <ul id = "father"> <li> Sohn 1 </ li> <li class = "highlight"> Sohn 2 </ li> <li> Sohn 3 </ li> </ ul> <button id = "start"> Test </ button> </ body> </ html>
Die Struktur ist den vorherigen Beispielen sehr ähnlich, jedoch nehmen wir hier eine Änderung vor. Diesmal verwenden wir die Highlight- Klasse als Selektor und wenden die parent () -Methode an, sodass wir mit jedem () die Hierarchie von innen nach außen durchlaufen können .
Mal sehen, wie der vorherige Code aussieht, wenn wir ihn in unserem Browser ausführen:
Wie im vorherigen Beispiel werden beim Schließen der Warnungen alle übergeordneten Elemente des Elements angezeigt, bis HTML aufgerufen wird.
Erreiche einen bestimmten Vater
Der vorherige Trick hilft uns, den Stammbaum eines Elements zu erstellen, vielleicht hilft es uns, unser HTML zu debuggen, aber was passiert, wenn wir einen bestimmten Vater erhalten möchten, zum Beispiel, wenn wir mehrere Einträge haben, aber den Vater eines bestimmten haben möchten hervorgehoben werden.
Wir sollten uns keine Sorgen machen, für diesen Fall haben wir die Methode parentsUntil () , mit der wir einen Ankunftspunkt angeben und HTML- Code einfügen können, um den gesamten Block hervorzuheben. Sehen wir uns den folgenden Code an, in dem wir dieses Wissen angewendet haben:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <title> DOM-Manipulation mit JQuery </ title> <script> $ (function () { $ ("# start"). click (function () { $ (". highlight"). parentsUntil ("div"). css ("Hintergrundfarbe", "Netzwerk"); }); }); </ script> </ head> <body> <div> <section> <ul id = "father"> <li> Sohn 1 </ li> <li class = "highlight"> Sohn 2 </ li> <li> Sohn 3 </ li> </ ul> </ section> </ div> <button id = "start"> Test </ button> </ body> </ html>
Wenn wir feststellen, dass dieser Code eine geringfügige Abweichung vom vorherigen Code darstellt, erfolgt die primäre Änderung im Aufruf der soeben erläuterten parentUntil () -Methode, an die wir div übergeben haben. Dort befindet sich die Suche nach übergeordneten Elementen des Selektors, der wir sind beeinflussen.
Um zu demonstrieren, dass alles funktioniert, haben wir ein bisschen HTML eingefügt, um den markierten Bereich rot zu färben. Sehen wir uns an , wie es in unserem Browser aussieht, wenn wir auf try klicken:
Wir sehen dann, dass nur der Abschnitt mit dem div rot gefärbt ist, was zeigt, dass wir die Suche nach dem Vater in dem bestimmten Element gestoppt haben, sogar einen direkten Vater, wie das Element <section>, das uns die Kraft von <section> zeigt die Suche durch den DOM-Baum .
Damit haben wir unser Tutorial beendet. Es ist nur eine kleine Demonstration der ganzen Kraft von jQuery , das DOM unseres HTML zu manipulieren. Wichtig ist, dass wir viel üben und die Dokumentation sehr gut lesen, da wir damit zusätzliches Wissen und Ressourcen erhalten können in der Lage sein, unser Entwicklungsniveau zu steigern.
