Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

jQuery für Webdesigner

DOM-Selektoren traversieren mit jQuery

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
So gelangen Sie mit Hilfe der Traversing-Funktionen und dem Einsatz von Selektoren über jQuery an mehrere HTML-Objekte, um die Unterpunkte des Menüs ausblenden zu können.

Transkript

Ich möchte Ihnen in diesem Video zeigen, wie Sie mithilfe von speziellen jQuery-Methoden bequem durch die Objekt-Hierarchie einer HTML-Seite surfen können beziehungsweise gleiten können. Und im Wesentlichen handelt es sich bei solch einer Hierarchie um eine Baumstruktur. Und bei einer Baumstruktur spricht man von Traversierung, wenn man die einzelnen Pfade dieses Baumes entlanggeht. Und jQuery bietet dort ganz hervorragende Befehle an, um solch eine Traversierung durchzuführen. Im Übrigen finden Sie die dazugehörigen Informationen selbstverständlich unter jQuery.com und dort unter API Documentation. Ich gebe jetzt einfach mal traversing ein und schauen wir mal, was wir da bekommen. Ja, okay, ich klicke einen Punkt an und das ist wichtig, eigentlich hier dieser Befehl Traversing. Wenn ich den jetzt auswähle, also diesen Menüpunkt, dann habe ich alle Methoden und Funktionen zu dem Thema Traversing. Und da fällt schon auf: Da haben wir solche Begriffe wie .children(). Etwas weiter unten müsste auch irgendwo .parent() auftauchen, wo haben wir das, da ist schon einer. Also das heißt: Hier spricht man von einem Eltern-Objekt, von einem Kind-Objekt und dazu gucken wir uns jetzt nochmal die Struktur in unserer Konsole an. Wir haben also hier das erste, Bed & Breakfast, dann das komplette zweite Objekt, was aus dem Hauptmenüpunkt Edinburgh plus der weiteren nicht nummerierten Liste castle, royal mile und parlament besteht. Wir brauchen aber für das Ausblenden der Unterpunkte nur diesen Block. Edinburgh möchte ich gar nicht mehr mit drin haben. Wie schaff ich das jetzt? Weil: Ich kann über die Cascading Style Sheets in dieser Weise, wie wir das in dem Skript bisher gelöst haben, ja nur auf die gesamten Listenelemente zugreifen. Die Kunst ist eben hier in dem Falle, die Traversing-Methoden einzusetzen. Und die helfen uns dann tatsächlich weiter, an die entsprechenden Positionen zu kommen. So, und das leite ich jetzt einfach mal ein. Gehen wir ruhig hier in der Konsole weiter und zwar der erste Traversing-Befehl ist der .children()-Befehl. Ich gehe nochmals kurz hier zurück .children(), und rufe das hier in jQuery auf. Dann bekommen Sie auch die Erklärung: Also liefert das Kind-Objekt von allen Elementen in einer Liste und so weiter und so fort. Dann gibt's auch noch die Beispiele darunter, also man sieht: man kann dort durchaus mit ein bisschen Übung auch durchblicken. Aber ich möchte Ihnen das zeigen und zwar möchte ich jetzt also auf die Elemente zugreifen, die hier innerhalb dieser Unterblöcke sich befinden und das kann ich eben mit dem Traversing-Befehl .children() hervorragend durchführen. Würde ich das jetzt machen, children(), habe ich im Grunde nichts anderes wie bis jetzt auch schon mal, das kann man sich schon mal ruhig anschauen, achten Sie hier unten drauf. So, Sie sehen, jetzt habe ich Kind-Objekte und zwar das Ganze schon mal komplett außen. Das ist etwas anders jetzt von der Struktur her. Ich habe jetzt jedes einzelne Objekt, also jeden None-Bereich plus jeden None-Bereich und das Ganze dann nochmal hier als blockweise Konstruktion. Das bringt uns schon Stück weiter, weil, wie wir sehen, ist das ein Block und das ein Block. Diese hier brauche ich gar nicht. Wie bekomme ich die nur raus aus dieser ganzen Szenerie? Auch das ist relativ einfach, denn diese Traversing-Befehle oder Methoden können Selektoren bekommen. Das heißt, ich möchte also nur die Kind-Objekte vom Typ None und das schreibe ich nun einfach in die runde Klammer in Anführungsstriche. So, speicher ab. Gehe wieder in die Konsole, und achten Sie hier unten drauf: Also diese ganzen Objekte, die brauchen wir gar nicht. Und wenn ich das Ganze aktualisiere, dann wird die Liste schon erheblich kleiner und jetzt habe ich nur noch die Kind-Objekte meiner äußeren Liste und davon auch nur noch die None-Selektoren. Und das ist genau der Block, der Block und der Block und den brauchen wir für die weitere Vorgehensweise. Schauen wir uns das nochmal ganz kurz im HTML-Dokument an. Wir haben also diese Elemente und bisher alles angezeigt bekommen, was sich hier drunter befindet, also die Listenelemente plus diese Elemente. Ich brauche aber von den Listenelementen nicht die Hauptelemente, also die Eltern, sondern ich brauche die Kinder und das ist das Kind in dem Falle von dem äußeren Listenelement und somit kann ich über die Traversing-Methoden sehr schön auf diese Blöcke zugreifen und das sehen wir halt hier an dieser Stelle und das ist gute Voraussetzung für die weitere Vorgehensweise. Ja, und was muss ich jetzt machen? Diese Blöcke, die ich jetzt hier schon aufgegriffen habe, die sollen einfach ausgeblendet werden, und zwar auch beim Start des Dokumentes, und entsprechend brauche ich jetzt nur noch hinzugehen und hier hinter entsprechend den CSS-Befehl setzen, der dort heißt "display", und dann folgt "none" und wenn ich das Ganze jetzt ebenfalls wieder ausführe – achten Sie hier auf die Unterpunkte, auf die Blöcke –, dann verschwinden diese Blöcke. So, jetzt kann ich natürlich hier draufklicken, ich seh die nicht mehr, weil die sind mit display: none ausgeschaltet. Dann hilft mir auch die Konsole nichts mehr. Aber Sie sehen, wie Sie sich schrittweise gerade mit der Konsole diesen richtigen Elementen über die DOM-Spezifikatoren und die Traversing-Methoden von jQuery nähern können. So, ich gehe jetzt einfach mal hin und kopiere mir diesen ganzen Block aus der Konsole, hier drunter an diese Stelle und beende das mit einem Semikolon. Und damit wäre dieser Befehl schon erledigt, das heißt, zum Start des Dokumentes habe ich alle unteren Punkte wie im Vorfeld vorgenommen ausgeblendet.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Ideal für Jqeury Anfänger
Michael D.
Das Video ist sehr gut um das Grundwissen von Jquery im Web zu erhalten.
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!