Mit jQuery lassen sich sämtliche Elemente wie Texte, Buttons, Bilder und viele weitere mit wenigen Zeilen Code interaktiv gestalten. In diesem Tutorial lernst du, wie du mit jQuery in wenigen Inhalte per Klick-Event (z.B. Mausklick) verschwinden lässt.
Die folgende Anleitung ist für absolute Anfänger geeignet. Lies dir die einzelnen Schritte durch und baue das Tutorial dann nach.
Hier ein kleiner Vorgeschmack zum fertigen Skript:
Voraussetzungen für dieses Tutorial
Du benötigst für dieses Tutorial keinerlei Vorwissen in jQuery oder JavaScript. Es ist jedoch immer hilfreich, wenn du schon einige Erfahrungen mitbringst und ggf. weißt, welche HTML-Elemente (<p>, <a> usw.) und was eine CSS-Klasse ist.
Schritt 1: Datei mit HTML und 2-3 Texten erstellen
Das Ziel ist, ein oder mehrere Elemente per Klick (Mausklick) zu entfernen. Bevor wir das machen können, benötigen wir zunächst ein paar HTML-Elemente (z.B. Texte)
Öffne hierfür einen Texteditor deiner Wahl und erstelle eine leere .html Datei z.B: mit dem Namen klick-event.html.
Der Inhalt von klick-event.html
In deine noch leere Datei klick-event.html fügst du nun das Standard-HTML Gerüst mit <html> und <body> Tags ein.
Füge außerdem 2-3 <p>-Tags mit etwas Text ein. z.B.:
- <p>Hallo ich lerne jQuery</p>
- <p>jQuery ist einfach mit LerneProgrammieren</p>
- usw.
(Hinweis: Wenn du noch keine Erfahrungen mit HTML hast, kannst du auch den nachfolgenden Code kopieren und in deine Datei einfügen. Hier habe ich zusätzlich noch eine <h1>-Überschrift für später eingefügt.)
Das Grundgerüst für die klick-event.html Datei:
<!DOCTYPE html>
<html>
<body>
<h1>jQuery Inhalte verschwinden lassen</h1>
<p>Hallo ich lerne jQuery</p>
<p>jQuery ist einfach mit LerneProgrammieren!</p>
<p>Klick mich an, um mich auszublenden</p>
</body>
</html>
Sehr gut. Deine Datei ist jetzt mit etwas Inhalt gefüllt. Damit können wir gleich arbeiten! Als Nächstes fügen wir jQuery ein.
Schritt 2: jQuery einbinden
Bevor wir mit jQuery coden können, müssen wir es zunächst herunterladen oder per CDN einbinden. In diesem jQuery Tutorial füge ich es über den Google CDN ein.
Füge dafür in Zeile 9 (bzw. unter dem letzten <p>-Tag) deiner HTML-Datei folgende Zeile ein:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Mit der obigen Zeile binden wir die jQuery-Bibliothek über den CDN von Google ein. Neben Google gibt es noch weitere CDN-Anbieter, die das Einbinden von jQuery kostenlos erlauben.
Alternativ kannst du jQuery auch herunterladen und dann lokal einbinden.
Gut! Du bist jetzt bereit mit dem eigentlichen jQuery Skript zu starten. Legen wir los.
Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)
Schritt 3: Das jQuery Klick-Event erstellen
Wenn du die vorherigen zwei Schritte ausgeführt hast, solltest du jetzt etwas Text-Inhalt sowie das eingebundene jQuery Skript in deiner HTML-Datei haben.
Damit dein Skript erst ausgeführt wird, wenn die Website vollständig geladen wurde, benötigen wir die $(document).ready()-Funktion. In unserem Code öffnen wir ein <script>-Tag und rufen dann die Document-Ready Funktion auf. (Hinweis: Ich zeige dir gleich, wie das im Code aussieht.)
Sobald wir die Document-Ready Funktion eingebunden haben, folgt das eigentliche Klick-Event.
Unser Ziel ist es, dass der Text bei einem Klick verschwindet. Spezifischer gesagt, wollen wir die <p>-Elemente ausblenden. Um ein Klick-Event zu erstellen, benutzt die click()-Methode.
click()-Methode erstellen
Die Syntax dafür sieht so aus:
$("Selektor").click()
In unserem Fall sollen etwas passieren, wenn ein <p>-Element angeklickt wird. Daher ist unser Selektor das <p>-Element. Das Klick-Event sieht dann so aus:
$("p").click()
Wir kommen der Sache schon näher. Jetzt reagiert unser jQuery-Skript, sobald ein <p> Element angeklickt wird.
Doch haben wir unserem Skript noch nicht gesagt, was es "machen" soll, sobald ein Klick stattfindet. Nach einem Klick soll das angeklickte <p>-Element verschwinden.
hide()-Methode erstellen
jQuery stellt zum Ausblenden von Elementen die hide()-Methode zur Verfügung.
Alles, was wir jetzt noch machen müssen, ist unser Klick-Event, um die hide() Methode zu erweitern.
Kleiner Tipp: Da wir das jeweilige <p> Element mit dem Klick-Event bereits auswählen (selektieren), können wir nachfolgend den Selektor "this" verwenden. Damit wird das aktuell ausgewählte Element selektiert.
Der gesamte jQuery Code sieht dann so aus:
(Füge diesen Code vor dem schließenden </body>-Element ein)
<script>
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
Tippe den obigen Code selbst ab oder kopiere ihn in deine HTML-Datei. Speichere die Datei und rufe sie in einem Browser deiner Wahl auf.
Beim Anklicken (antippen) eines <p> Element sollte dieses verschwinden. :-)
Das war einfach! Jetzt bist du gefragt.
Schritt 4: (Optional) Dein jQuery-Skript erweitern
Dein Skript ist bereits fertig. Damit du auch weißt, dass du dieses jQuery Tutorial verstanden hast, soll das Skript erweitert werden.
Hinweis: Wenn du das HTML-Gerüst benutzt, dass ich dir hier zur Verfügung gestellt habe, hast du bereits eine <h1>-Überschrift in deinem Code. Wenn nicht, füge bitte folgende Überschrift (z.B. über deine <p>-Tags) ein:
<h1>jQuery Inhalte verschwinden lassen</h1>
Deine Aufgabe: Erweitere das Skript so, dass auch <h1>-Elemente ausgeblendet werden.
Fazit
In diesem schnellen jQuery Tutorial hast du gelernt, wie du jQuery einbindest, ein Klick Event erstellst und selektierte HTML-Elemente ausblenden kannst. Wenn du weitere Übungen suchst, findest du in unserem Blog viele weitere jQuery Tutorials für Einsteiger.
Hast du bereits eine Idee, wo dir dein neues jQuery Wissen, rund um verschwindende Elemente helfen kann? Lass es mich in den Kommentaren wissen.
- Programmiere echte Apps als Anfänger
- Keine Installation, sofort loslegen
- Komplett praxisbezogen
- Zugriff auf Online-Editor
