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

jQuery, Eventhandler, HTML-Text und CSS-Dynamik

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video beschreibt die Veränderung von HTML-Objekten über ein externes Skript mit Hilfe dynamisch erzeugter CSS-Eigenschaften und Textzuweisungen, die durch spezielle Event-Behandlung statischen HTML-Objekten zugewiesen werden.

Transkript

Die nächsten Schritte in diesem Video zeigen auf, welche Möglichkeiten über die Effektbehandlung und Eventbehandlung in jQuery bestehen und wie Sie in einem externen Skript diese Änderungen vornehmen und das in Ihrem HTML-Dokument einbinden. Dieses Skriptelement habe ich erzeugt, also ganz einfache Zuweisungen, Cascading Stylesheet-Zuweisungen auf ein Dokument, wo auch hier die ID- oder die Klassenangaben drin vorkommen. Dieses Dokument sieht so aus. Wenn ich nun dieses externe Skript und stellvertretend für zum Beispiel ein Skript aus dem Internet einbinden möchte, dann verwende ich den Befehl st-006-script.js und gefolgt von dem < /script-Tag. So das abgespeichert und kontrolliert wird dieses Dokument verändern. Damit weiß ich: Das funktioniert. So, und jetzt komme ich an die Position, wo ich quasi dieses Dokument ein Stück weit verändern möchte. Also wechsle ich in das eigentliche Skriptdokument. Jetzt muss man natürlich aufpassen: Ich habe ein Beispiel, ein vorheriges Beispiel, wo sich dieses Skriptelement drauf bezieht, und ich habe das aktuelle Beispiel. In dem Fall bedeutet das natürlich, dass jetzt beide HTML-Daten oder HTML-Dateien verändert werden. Also, ich denke, das ist klar, aber ich möchte nur noch mal darauf hinweisen. Da hier unten, ich geh nochmal zurück, da steht "Klick auf das Logo". Da ist eine Aktion, die jetzt gefordert wird, und genau die möchte ich auch anbieten. Und Sie kennen die Funktion eigentlich schon: Das ist die click()-Funktion. Aber sprechen wir nun das richtige Objekt in dem HTML-Dokument an. Und auch hier kann ich, wie bei der Cascading Stylesheet-Angabe, hier oben, über den #mainheader direkt auf dieses Objekt zugreifen. Und dann kommt das Übliche: die function() und die geschweifte Klammer. So, und jetzt kann ich, wenn dieser Event ausgelöst wird, dort drunter eben entsprechend was unternehmen. Und das ist auch schon bekannt: Wenn ich nun auf das Schlüsselwörtchen $(this) zurückgreife, dann meine ich damit genau diese ID, die ich hier oben eingetragen habe. Ja, und dann kann ich auch hier zum Beispiel wieder Cascading Stylesheet- Angaben hinterlegen. Machen wir mal einen Rahmen um die Grafik. Also es geht hier um den #mainheader. Und dieser Rahmen soll fünf Pixel groß sein, durchgezogen, und die gleiche Farbe haben wie oben schon auch der Text, also #0769AA. So, und damit habe ich also diese Stylesheetangabe zugewiesen und gleichzeitig, schauen wir uns das mal kurz an, so, wenn ich jetzt auf das Logo klicke, dann, sieht man, wird ein Rahmen um das Logo herum gesetzt. Gleichzeitig hätte ich aber ganz gerne, dass also der Text, der hier unten steht, größer wird. Und wenn ich mir das im Skript hier anschaue, dann arbeite ich ja gerade mit dem #mainheader. Wie komme ich also an der Stelle jetzt da dran? Über $(this) geht es nicht, weil es meint den #mainheader, aber es steht Ihnen vollkommen frei, hier auch wieder wie hier oben im normalen Hauptbereich des Dokumentes auch wieder zum Beispiel p.maintext zu verwenden oder direkt die Klasse .maintext. Auch hier, bleiben wir einfach mal nur bei den CSS-Anweisungen, können wir font-size verwenden und das Ganze mal doppelt so groß darstellen. So, speichern wir das ab, kontrollieren das. Also, jetzt klicke ich auf die Grafik: Ja, und genau das hab ich mir vorgestellt. Also, Sie sehen: Da funktioniert schon in der Hinsicht etwas, das man das entsprechend so mit Effekten versehen kann, also das klappt. Und was ich jetzt noch zeigen möchte, ist, wie man ein Objekt sogar innerhalb des HTML-Dokumentes inhaltlich verändert. Also, es macht ja keinen Sinn, wenn hier steht "Klick auf das Logo", und ich tue das und danach dann noch mal drauf zu klicken, weil: Da würde nichts mehr geschehen. Denn der Klick auf das Logo erzeugt einen Rahmen. Und das möchte ich anders hinterher handhaben. Aber entsprechend signalisiere ich, und auch hier kann ich wie oben, #footer nur für p wieder drin stehen, jetzt eine Anweisung vergeben und die Anweisung nennt sich .text(). Und da weise ich jetzt einfach eine neue Zeichenkette zu und die soll heißen: "Doppelklick verkleinert wieder ...". So, und jetzt beginnt doch langsam ein Schuh daraus zu werden, gucken wir uns das an. Also, ein Klick, und Sie sehen hier unten: "Doppelklick verkleinert wieder". Ja, und wenn ich das auch schreibe, dann müssen wir das auch umsetzen. Das ist im Grunde relativ einfach: Ich greife mir jetzt die komplette Funktion und markiere sie, kopiere sie über Strg+C oder Cmd+C in die Zwischenablage und Strg+V / Cmd+V wieder hier hinein. So, die Funktion ist genau die gleiche, nur nicht die Funktion click(), sondern hier brauchen wir dblclick(). Das ist alles. Und wir müssen das Ganze wieder ein Stück zurückmachen. Also nehmen wir hier zum Beispiel einfach, dass der Rahmen wieder verschwindet, sag ich mal transparent. So, ist jetzt nicht ganz so sauber, aber ist hier am besten. Der Text soll wieder Ursprungsgröße haben und ich brauche, auch das hol ich mir gerade hier, "Klick auf das Logo ...", also diesen alten Ursprungstext, den hole ich mir wieder und kopier den hier rein. So, und dann müsste das Ganze schon funktionieren. Was haben wir jetzt? Wir haben ein HTML-Dokument, wo wir ein externes Skript eingebunden haben, und dieses externe Skript haben wir mit CSS und wieder Eventhandlern und ein paar kleinen Effekten versehen und heraus kommt so etwas, was mit ganz, ganz wenigen Zeilen sich durchaus sehen lassen kann. Also, ich führe ein Klick auf das Logo jQuery aus. Zackbumm – alles wird größer. Hier unten wird der Text verändert. Und jetzt mache ich das Ganze mit einem Doppelklick und alles ist wieder beim Alten. Also, genauso habe ich mir das vorgestellt. Wenn Sie das mal weiterdenken, dann sind das genau auch wieder solche Prozesse, ich sag’s immer wieder, für Menüpunkte, für Slider et cetera. Auch hier führen Sie einen Doppelklick aus und zum Beispiel, es klappt so ein Menübestandteil herunter, ein Doppelklick schließt es wieder, oder umgedreht, wie auch immer. Selbstverständlich sind auch Klicks einzeln realisierbar. Also da gibt es wirklich keine Grenze in dieser Richtung, Ihre HTML-Dokumente mit Effekten auszusteuern. Und die Handhabung hier über die Stylesheets, über Klassenzuweisung et cetera sind wirklich sehr, sehr leistungsfähig. Und Sie sehen, wie leicht es ist, auf Objekte in dem HTML-Dokument selbst in externen Skripten zuzugreifen.

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)
Empfehlenswert
Christoph K.

Ich hatte schon leichte Erfahrung mit jQuery vor dem Video, weshalb mir der Einstieg etwas lang vorkam. Da sich das Videotutorial aber an Einsteiger richtet ist dies vollkommen verständlich. Alle Schritte werden besten beschrieben und werden gut und anschaulich gezeigt.

 

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!