jQuery für Webdesigner

Traversing mit Filter und Selektoren zur Textergänzung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe erweiterter Selektoren und einer Filter-Funktion von jQuery über Traversing-Methoden sind alle Menü-Hauptpunkte mit einem Doppelpfeil zu versehen.

Transkript

Mit den folgenden Schritten zeige ich Ihnen, wie Sie an vorhandene Textobjekte in einem HTML-Dokument Text anhängen können, also nicht ersetzen, sondern anhängen, und wie Sie in den Traversing-Methoden zusätzliche Selektoren dafür nutzen, nur an spezielle Objekte in Ihrem HTML-Dokument beziehungsweise in der HTML-Struktur zu gelangen. Dazu öffne ich den Browser und schauen wir uns an, was wir jetzt erreichen möchten: Ich habe die zunächst ausgeblendeten Mittelteile erstmal wieder eingeblendet zum besseren Verständnis. Und wechsel nun in den Editor zurück. Wir haben also über die Variable $expand die Möglichkeit, auf das gesamte DOM-Objekt, also mein gesamtes Menü, zuzugreifen. Über die Traversing-Methode .children() komme ich nun an alle Unterpunkte heran. Und zwar genau die, die mich jetzt besonders interessieren, sind halt eigentlich Hauptpunkte. Aber ergänzen wir erstmal vorhandenen Text durch weitere Einträge, und diese Methode oder dieser Befehl nennt sich .append(). Und mit .append() kann ich also an vorhandenen Text einfach weitere Zeichen anhängen. Und dafür muss ich in doppelten Anführungsstrichen oder einfachen Anführungsstrichen schreiben und ich nehme ein benanntes Zeichen, das ist eine Art Doppelpfeil. Das Kürzel dazu nennt sich », gefolgt von einem Semikolon. Das dürfen Sie nicht vergessen, sonst kann der Browser das nicht anzeigen. So, schauen wir uns erstmal an, was jetzt passiert: Die Konsole ist wieder aktiviert, wenn ich das aktualisiere hier, so. Und Sie sehen: Jetzt habe ich hinter jedem Element ein Zeichen angehangen. Das ist besonders praktisch genau für solche Prozesse. Jetzt sieht das immer noch nicht so aus, wie ich das eigentlich brauche. Ich möchte nur an diesen Punkten, an Edinburgh, Schottland und Schottische Küche, dieses Doppelpfeil-Symbol haben. Wie bekomme ich das nun hin? Die Antwort sind die Selektoren. Auch hier wieder gibt es Informationen über die API Documentation. Also wenn Sie in die Traversing-Methode .children() gehen, dann sehen Sie hier die Information, dass es Selektoren gibt. Und was sind das für Selektoren? Selektoren werden mit einem Doppelpunkt eingeleitet und sind ziemlich umfangreich. Also da gibt's Selektoren, die das erste Element betreffen, das letzte Element, oder man kann sogar eine Funktion anwenden, die besagt, dass es bestimmte Elemente sein sollen. Also, es ist sehr umfangreich gestaltet und somit kann man mit ein bisschen Überlegung tatsächlich auf jedes Element zurückgreifen, das ich über die DOM-Spezifikatoren auch ansprechen kann. So, und hier möchte ich jetzt vor allen Dingen eins vermeiden: Wenn ich mir hier das anschaue, sieht das noch eigentlich alles eigentlich verständlich aus. Was ist das hier für ein Selektor? Wo kommt der auf einmal her? Und wenn wir hier mit diesen Punkten drübergehen, dann stellen wir fest, dass es den auch eigentlich nicht gibt. Der springt dadrüber hinweg. Der Grund ist hier im HTML-Dokument besser zu erkennen. Und zwar liegt das darin begründet, dass dieser None einen kompletten weiteren Unterpunkt hat in Form einer nicht nummerierten Liste. Und auch wenn das jetzt ein bisschen in der Reihenfolge merkwürdig aussieht, ist es so, dass diese drei Listenelemente einen Aufzählungspunkt bekommen, aber auch dieses Kind-Element. Und das ordnet er hinten an das Objekt an. Das heißt, hier bekommt tatsächlich dieses None-Objekt einen zusätzlichen Text angehangen. Und das ist der Grund, warum das entsprechend hier bei dem Element immer an dieser Stelle auftaucht. Und das wollen wir nicht. Also, das heißt, hier ist nun mal der erste Prozess, dass nur das erste child-Element überhaupt eine Textzuweisung bekommt. Und das kann ich über besagten Selektor bestimmen. Und den leite ich mit Anführungsstrichen und einem Doppelpunkt ein. Wie gesagt: Jetzt möchte ich, dass es nur die first-child-Elemente sind. So, speicher ich ab und aktualisier das. So, und jetzt sieht man: Jetzt verschwinden schon diese Zwischenelemente. Und :first-child hat in dem Falle die Bedeutung, tatsächlich jetzt nur diese Elemente, also immer das erste Element anzusprechen, was unter einem Hauptelement gefunden wird und das sind nun mal nur die Aufzählungspunkte. So, das reicht uns aber leider immer noch nicht, denn wir brauchen ja nicht diesen ganzen Unterbereich, sondern immer nur die äußeren Bereiche. Und jetzt machen wir uns das zunutze, dass wir die Punkte herausgreifen können, und dann über :first-child das Ganze eben eine Ebene nach oben ziehen. So, und da kommt der zweite Selektor ins Spiel, den wir dann entsprechend noch drum herum setzen müssen. Und das geht jetzt leider nicht mehr, indem man das hier kombiniert, aber es gibt ein Hilfsmittel: Das ist ein sogenannter .filter(), den wir nun ansetzen können. Und diesen .filter(), dort kann ich ebenfalls wieder einen Selektor definieren. Und da sage ich nun: Bitte nur alle die, die entsprechend mit None ausgestattet sind. So, und jetzt schauen wir uns das nochmal in der Ausgabe an. Jetzt haben wir genau das erreicht, was wir wollen, nämlich nur die einzelnen -Objekte. Ja, also am besten, ich wechsel wieder zurück in den Editor, weil: Da wird's am deutlichsten in dem HTML-Dokument. So, und zwar haben wir jetzt gesagt, dass wir an die Position herankommen über den DOM-Selektor. Jetzt folgt mit der .filter()-Funktion nur die Auswahl der darin befindlichen None-Konstrukte. Also, das heißt, das sind jetzt nur diese Konstrukte. Und von diesen None-Konstrukten möchte ich immer nur das erste Kind-Element haben. Und das ist eben entsprechend der Eintrag Edinburgh und Schottland et cetera. Und an dieses Element, dort hänge ich quasi diesen Text an und hab genau den Effekt erreicht, den ich mir so vorgestellt habe. Und hier kann ich zunächst mal das Ganze wieder aus der Konsole herauskopieren, setze das hier entsprechend drunter, kommentiere zuvor auch das schon mal wieder ein, dass wir's ausblenden, so. Und damit wären wir erneut einen Schritt weiter auf unserem Weg zu einem Expand-Menü. Kontrollieren wir nochmal alles. So! Das sieht schon gut aus: Wir haben ein Expand-Menü mit den Zeichen an den richtigen Stellen, wie wir das vorgesehen haben, und jetzt geht's darum, einen Eventhandler zu entwickeln, der das Menü ein- und ausblendet.

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)
Gut erklärt!
Anonym
die Verwendung von Konsole, um richtig mit JS oder JQuery zu arbeiten, ist ganz wichtig und hier wird es genau ganz gut erklärt.
Vielen Dank!

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!