DOM-Manipulation mit jQuery

DOM-BaumDas DOM-Baum ist die hierarchische Organisation des Inhalts unseres Dokuments HTMLDies ist sehr nützlich bei der Identifizierung der verschiedenen Elemente, die in diesem Dokument enthalten sind, da wir mit eindeutigen Identifikatoren Strukturen unterschiedliche Namen zuordnen können, die trotz ähnlicher Labels ein anderes Ziel haben.
Das Problem in der Vergangenheit war, dass es nicht möglich war, einfach durch die DOM-Baum in Echtzeit, da umständliche Routinen und Funktionen in Javascript, jedoch änderte sich dies mit dem Erscheinen von jQuery. Dieser Rahmen hat dazu beigetragen, einen Ansatz für die Verwendung von Javascript für Nicht-Experten ließ es seine Popularität wieder in die Höhe schnellen.
Eines der interessantesten Dinge, die sehr kompliziert erscheinen können, ist die Auswahl der Kinder eines ElementsDa 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 unter seinem Mantel oder Schutz regiert werden.
Nehmen wir zum Beispiel an, wir haben eine ungeordnete Liste oder ein Element , ist es logisch zu denken, dass ihre Kinder die Elemente sind die es enthalten kann, wenn wir ein Element auswählen wollen Eine bestimmte Liste mag wie eine sehr komplexe Aufgabe erscheinen, aber mit jQuery Wir können dies auf sehr einfache und saubere Weise erreichen.
MethodenDazu müssen wir unserem Elternelement nur einen eindeutigen Bezeichner zuweisen und dann die Methode auf seinem Selektor aufrufen Kinder (), damit erhalten wir die Position, auf die wir mit der Methode gehen können jeder () jedes seiner Kinder.
Sehen wir uns im folgenden Code ein kleines Beispiel dafür an, worüber wir sprechen:

 DOM-Manipulation mit JQuery

Sohn 1
Sohn 2
Sohn 3

Ausprobieren 

Zuerst beginnen wir mit der Aufnahme jQuery aus CDN offiziell, damit müssen wir die Datei mit dem Quellcode nicht auf unserem Computer speichern, also mit einem Browser und einer Verbindung zu Internet wir können dieses Beispiel verwenden.
Dann erstellen wir ein kleines Skript, in dem wir angeben, dass beim Klicken auf das Element mit der ID Start der darin enthaltene Code wird ausgeführt.
Der auszuführende Code drückt einfach aus, dass das Element mit der ID gesucht werden muss Vati und auf diesen Selektor wenden wir die Methode an Kinder () seine Kinder ausfindig zu machen und schließlich mit der Methode jeder () Wir gehen jeden von ihnen durch, im Fall des Codes gibt es drei, 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 obige Code in unserem Browser funktioniert:

Nach Klick auf den Button ausprobieren wir können das erste sehen Alarm:

VERGRÖSSERN

Wenn wir die Warnungen weiterhin schließen, sehen wir alle untergeordneten Elemente, die in der hierarchischen Struktur enthalten sind:

VERGRÖSSERN

Wie wir sehen konnten, ist der Umgang mit den Elementen in der Struktur unserer Seite überhaupt nicht kompliziert, dies ist nur ein kleines Beispiel, das uns einen offenen Mund auf das lässt, was wir in diesem Tutorial weiterhin sehen werden.
Obwohl es sehr nützlich ist, untergeordnete Elemente zu finden, gibt es eine Methode, mit der wir eine direktere Suche durch die gehen, Wellen Lektionen. Wir verweisen auf die Methode finden (), findet diese Methode alle Übereinstimmungen der untergeordneten Elemente des Selektors, der sie aufruft.
Damit können wir ein tolles und ruf an finden () darauf, um insbesondere klassen oder ids zu finden, womit wir zum nächsten Punkt kommen.
InjektionsstileSobald wir den gewünschten Artikel in der SONNE, oft möchten wir seinen Inhalt nicht drucken, wenn wir ihn nicht in irgendeiner Weise hervorheben CSS unserer Seite indirekt und um wichtige Elemente darin hervorheben zu können und somit etwas dynamischeres in unserem Dokument zu sehen HTML.
Sehen wir uns im folgenden Code an, wie wir die Verwendung der Methode implementieren werden finden () und dann die Stilspritze auf die gefundenen Elemente, auf diese Weise können wir etwas näher kommen, das wir im wirklichen Leben nützlich geben können:

 DOM-Manipulation mit JQuery

Sohn 1
Sohn 2
Sohn 3

Ausprobieren 

Wenn wir in diesem Code nachsehen, haben wir etwas, das dem vorherigen Trick sehr ähnlich ist. Was wir geändert haben, ist, dass wir hier in erster Linie den Inhalt des Labels verwenden, anstatt die Kinder eines Elements zu durchlaufen, sondern die Methode finden () um ein Element mit der Klasse zu finden Markieren und zu diesem Element mit der Methode css() Wir werden Stile einfügen, in diesem Fall werden wir es als rote Hintergrundfarbe festlegen.
Mal sehen, wie es in unserem Browser aussieht, wenn wir auf die Schaltfläche klicken ausprobieren:

So wie wir ein untergeordnetes Element eines Elements lokalisieren konnten, können wir die Wirkung im umgekehrten Sinne der Hierarchie erzielen, also von a Sohn, wir können den Vater finden. Dies ist bei langen Listen, die dynamisch generiert werden, sehr nützlich, da wir auf diese Weise die Eltern entsprechend unseren Bedürfnissen hervorheben oder verwenden können.
Eltern () MethodeDafür haben wir die Methode Eltern () das in ähnlicher Weise wie Kinder () sucht das übergeordnete Element des aufgerufenen Selektors. Wenn wir die Methode each() hinzufügen, bringen wir die gesamte Vererbung des Elements, zum Beispiel wenn es a . ist Wir bringen das Element und wenn wir in der Hierarchie weiter nach oben zu dem Element gehen und so weiter, bis wir das Element erreichen, da durch die Hierarchie alle von ihnen durch die Art und Weise, wie sie enthalten sind, Eltern sind.
Sehen wir uns im folgenden Code an, wie wir ein Skript mit erstellen können jQuery Dies ermöglicht es uns, dieses Ziel zu erreichen, alle Eltern unseres gewählten Elements zu zeigen:

 DOM-Manipulation mit JQuery

Sohn 1
Sohn 2
Sohn 3

Ausprobieren 

Die Struktur ist den vorherigen Beispielen sehr ähnlich, jedoch nehmen wir hier eine Änderung vor, diesmal verwenden wir die Klasse Markieren als Selektor und wir wenden die Methode an Eltern () und dann können wir mit jedem () die Hierarchie von innen nach außen durchgehen.
Sehen wir uns an, wie der obige Code aussieht, wenn wir ihn in unserem Browser ausführen:

VERGRÖSSERN

Wie im vorherigen Beispiel, solange wir das schließen Benachrichtigungen wir werden alle Eltern des Elements sehen, bis wir dazu kommen HTML.
Der vorherige Trick hilft uns, den Stammbaum eines Elements zu erstellen, vielleicht hilft er uns, unsere Fehler zu beheben HTML, aber was passiert, wenn wir ein bestimmtes Elternteil erhalten möchten, zum Beispiel wenn wir mehrere Einträge haben, aber das Elternteil eines bestimmten hervorgehoben werden soll.
Wir sollten uns keine Sorgen machen, für diesen Fall haben wir die Methode ElternBis (), damit können wir einen Ankunftspunkt angeben und wir können eine HTML-Injection Um den gesamten Block hervorzuheben, sehen wir uns den folgenden Code an, in dem wir dieses Wissen angewendet haben:

 DOM-Manipulation mit JQuery

Sohn 1
Sohn 2
Sohn 3

Ausprobieren 

Wenn wir feststellen, dass dieser Code eine leichte Variation des vorherigen ist, erfolgt die Hauptänderung im Aufruf der gerade erläuterten Methode ElternBis () an dem wir vorbeigekommen sind div, wo die Suche nach übergeordneten Elementen des Selektors, den wir betreffen, beendet wird.
Um zu zeigen, dass alles funktioniert, haben wir ein wenig gespritzt HTML Um den markierten Abschnitt rot einzufärben, sehen wir uns an, wie dieser in unserem Browser aussieht, wenn wir auf klicken ausprobieren:

Wir sehen dann, dass nur der Abschnitt mit dem div rot eingefärbt ist, was zeigt, dass wir die Suche nach dem übergeordneten Element im spezifischen Element gestoppt haben, selbst wenn es ein direktes übergeordnetes Element wie das element was uns die Macht der Suche zeigt DOM-Baum.
Damit haben wir unser Tutorial beendet, es ist nur eine kleine Demonstration der ganzen Kraft von jQuery die manipulieren SONNE von unserer HTML, das Wichtigste ist, dass wir viel üben und die Dokumentation sehr gut lesen müssen, da wir damit zusätzliches Wissen und Ressourcen erwerben können, um unseren Entwicklungsstand zu erhöhen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben