HTML-Inhalt und -Attribute mit jQuery abfragen (Tutorial)

Daniel - LerneProgrammieren
April 18, 2020

jQuery ist mit etwas Erfahrung in HTML und CSS sehr leicht zu lernen. Ich möchte dir in diesem kurzen Anfänger-Tutorial zeigen, wie Du ein einfaches jQuery-Skript programmieren kannst, um hilfreiche Interaktionen für deine Besucher zu erstellen. In unserem Fall werden wir zwei Buttons bauen. Wenn diese angeklickt werden, soll unser Beispielsatz in einer Dialogbox (Alert) auf dem Bildschirm angezeigt werden.

Dieses jQuery-Tutorial nachzubauen dauert ca. 10 Minuten, je nachdem, ob du mit der JavaScript-Bibliothek schon Erfahrung hast oder nicht. Wir starten Schritt-für-Schritt:

1. Voraussetzungen - jQuery einbinden

Zunächst benötigen wir eine einfache HTML-Datei. Öffne dafür einen Texteditor deiner Wahl (N++, Notepad, VSCode usw.) und füge folgendes HTML-Template ein.

HTML-Template in deine Datei kopieren/einfügen:

Jetzt Coden lernen

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Speichere deine Textdatei unter einem beliebigen Namen und mit der Dateiendung .html ab z.B. mein-jquery.html

Damit wir jQuery benutzen können, müssen wir es nun in unsere HTML-Datei einbinden. Du kannst dafür jQuery downloaden oder es über einen CDN einbinden. In diesem Tutorial wählen wir den einfachen Weg und fügen es über den CDN ein. Das hört sich zunächst komplizierter an als es ist. Du musst dafür nur folgenden Code in den <head>-Bereich deiner HTML-Datei einfügen.

Wenn du das zuvor beschriebene HTML-Template benutzt hast, kommt der folgende Code in Zeile 4 (zwischen <head> und </head>):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Wenn du diesen Schritt ausgeführt und deine Datei erneut gespeichert hast, hast du jQuery bereits erfolgreich eingebunden.

Das war einfach, oder?

Kostenloser Crashkurs für Anfänger

Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)

2. HTML vorbereiten

2.1 Text einfügen

In diesem Schritt werden wir unseren HTML-Inhalt einfügen, mit dem wir später interagieren wollen. Ich habe dazu einen kurzen Beispielsatz geschrieben: "Das ist ein fett-markierter Text in einem Satz".

(Danke für dein Lob. Ich bin heute sehr kreativ beim Schreiben von Beispielsätzen) ;)

Diesen Text habe ich über ein <p>-Tag als Paragraph formatiert. Um den Beispielsatz im nächsten Schritt einfacher zu selektieren, vergeben wir noch eine einzigartige ID z.B. id="meintext".

In HTML sieht der Beispielsatz dann so aus:

<p id="meintext">Das ist ein <strong>fett-markierter Text</strong> in einem Satz.</p>

2.2 Schaltflächen einfügen

Jetzt benötigen wir noch eine Schaltfläche. Unser Ziel in diesem Tutorial ist es, den oben gezeigten Beispielsatz mit jQuery auszulesen und in einer Dialogbox (auch Alert oder Popup genannt) darzustellen.

Da das wirklich simpel ist, bauen wir gleich zwei Schaltflächen. Die zweite Schaltfläche soll nicht nur den Beispielsatz darstellen, sondern auch den HTML-Code auslesen.

Die Buttons bekommen jeweils eine einzigartige ID, damit wir diese später mit jQuery selektieren können. z.B. id="button1" und id="button2"

In HTML-Code sieht der erste Button dann so aus:

<button id="button1">Text anzeigen</button>

Als kurze Zusammenfassung findest du hier das gesamte HTML-Dokument. Deine Datei sollte jetzt wie folgt aussehen:

Jetzt Coden lernen

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
   <p id="meintext">Das ist ein  <strong>fett-markierter Text</strong> in einem Satz.</p>

   <button id="button1">Text anzeigen</button>
   <button id="button2">HTML anzeigen</button>
</body>
</html>

Sehr gut! Wir haben jetzt jQuery eingebunden, einen Beispieltext sowie zwei Schaltflächen eingefügt. Jetzt kommt endlich das jQuery-Skript.

Wenn du deine HTML-Datei aufrufst, sieht das in etwa so aus:

3. jQuery Skript: Daten und HTML auslesen

Endlich ist es soweit. Wir können nun unser jQuery-Skript programmieren.

3.1 Script-Tag setzen

Ein jQuery-Skript, wird wie bei JavaScript mit einem <script>-Tag aufgerufen. Du kannst das Script-Tag entweder in den <head>-Bereich oder vor dem schließenden </body>-Tag einfügen.

So fügst du JavaScript- bzw. jQuery-Code in ein HTML-Dokument ein:

Jetzt Coden lernen

<script>
  // Hier kommt dein jQuery Skript rein
</script>

Sobald du die <script>-Tags gesetzt hast, müssen wir diesen Code erweitern.

3.2 Document Ready - jQuery erst ausführen, wenn Website geladen ist

Unser Skript soll erst ausgeführt werden, wenn die Webseite komplett geladen ist. Dafür benutzt man in jQuery die document.ready Funktion.

Die Funktion sieht so aus: $(document).ready(function(){ // jQuery Code hier einfügen });

Die folgenden jQuery-Funktionen gehören in die geschweiften Klammern { } der Document-Ready Funktion.

3.3 Schaltflächen mit Funktionalität versehen

Zeit unseren Schaltflächen (Buttons) mit jQuery frisches Leben einzuhauchen.

Mini-Exkurs zur jQuery-Syntax:

Die jQuery-Syntax sieht wie folgt aus: $(Selektor).Aktion()

$: Das $-Zeichen definieren wir, um jQuery aufzurufen
Selektor: Den Selektor benutzen wir zum suchen bzw. auswählen von HTML-Elementen
Aktion: Die jQuery-Aktion gibt an, was mit dem selektierten Element (bzw. Elementen) passieren soll

Mit diesem Wissen wollen wir jetzt unseren ersten Button selektieren.

Dafür rufen wir jQuery auf ($) und suchen mit dem Selektor nach unserem Button-Element. Durch die gute Vorarbeit, die wir schon geleistet haben, können wir den ersten Button über die ID "button1" auswählen.

In jQuery sieht der Selektor von Button1 so aus:

$("#button1")

Im Anschluss definieren wir, wann wir Button1 selektieren wollen. Hierfür benötigen wir die Aktion. Diese wird auch oft "Trigger" (Auslöser) genannt. Wir wollen, dass etwas passiert, wenn ein Besucher auf den Button1 klickt. Dafür gibt es in jQuery das click()-Event.

in jQuery sieht der Selektor mit unserem Klick-Event, dann so aus:

$("#button1").click();

Jetzt müssen wir jQuery nur noch erklären, dass wir unseren Beispielsatz (Das ist ein fett-markierter Text ... usw.) in einer Dialogbox (Alert) darstellen wolle, sobald Button1 angeklickt wird.

Dafür definieren wir einen allgemeinen Funktionsaufruf innerhalb des click()-Events.

Dein Skript sieht dann ungefähr so aus:

Jetzt Coden lernen

<script>
$(document).ready(function(){
  $("#button1").click(function(){
     // Hier kommt der Code rein, was Button1 machen soll, wenn er angeklickt wird
  });
});
</script>

Siehst du den Kommentar im o.g. Beispiel? Das ist die Zeile mit den zwei Schrägstrichen //

Hier rufen wir die Dialogbox, mit der alert()-Funktion auf, z.B: alert("Hallo LerneProgrammieren");

Doch Moment mal! Wir wollen doch gar nicht den Text "Hallo LerneProgrammieren" darstellen, sondern den Text aus unserem Beispielsatz dynamisch auslesen & anzeigen.

Wie gut, dass wir hierfür auch schon bestens vorbereitet sind. Wie du dich aus einem vorherigen Schritt erinnerst, haben wir unserem Beispielsatz die ID "meintext" gegeben. Jetzt können wir den Beispielsatz bequem über den jQuery-Selektor aufrufen.

$("#meintext")

Mit dem Event .text() kannst du ganz leicht den Text eines HTML-Element auslesen. Das sieht dann so aus:

$("#meintext").text();

Ist das wirklich so einfach? Ja!

Wenn wir unseren selektierten Text nun in der Dialogbox darstellen wollen, müssen wir diesen in die alert()-Funktion kopieren & einfügen.

Der Code unserer fertigen Dialogbox sieht so aus:

alert("Der Text: " + $("#meintext").text());

(Ich habe den Code noch um ein Präfix "Der Text:" erweitert. Das ist aber optional.)

Füge diese letzte Code-Zeile jetzt in das click()-Event ein. Hier ist einmal der gesamte Code deiner HTML-Datei:

Jetzt Coden lernen

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    alert("Der Text: " + $("#meintext").text());
  });
});
</script>
</head>
<body>

  <p id="meintext">Das ist ein  <strong>fett-markierter Text</strong> in einem Satz.</p>

  <button id="button1">Text anzeigen</button>
  <button id="button2">HTML anzeigen</button>

</body>
</html>

Wenn du diesen Code in deiner HTML-Datei einfügst sowie speicherst und die Datei dann über einen beliebigen Browser aufrufst, hast du einen funktionierenden Button1, der den Beispielsatz selektiert und dann in der Dialogbox anzeigt.

Das Ganze sieht so aus:

Unser Ziel für die zweite Schaltfläche ist, dass wir den gesamten HTML-Code des Beispielsatzes anzeigen. Anstatt das Event text() zu benutzen, wählst du hierfür das html()-Event. Damit liest du den HTML-Code eines Elementes aus.

Wenn du den jQuery-Code von Button1 duplizierst (kopieren/einfügen), musst du nur noch die Button ID ändern (von #button1 in #button2). Im nächsten und letzten Schritt, tauschst du das text()-Event gegen das html()-Event aus.

Abspeichern, ausprobieren, fertig!

Das passiert, wenn du auf Button2 klickst:

Hier ist der Code des kompletten Tutorials:


    
    
    
    
    
    Jetzt Coden lernen

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    alert("Der Text: " + $("#meintext").text());
  });
  $("#button2").click(function(){
    alert("Der HTML-Code: " + $("#meintext").html());
  });
});
</script>
</head>
<body>

  <p id="meintext">Das ist ein  <strong>fett-markierter Text</strong> in einem Satz.</p>

  <button id="button1">Text anzeigen</button>
  <button id="button2">HTML anzeigen</button>

</body>
</html>

Fazit

Ich hoffe, dass dir dieses anfängerfreundliche jQuery-Tutorial gefallen hat. Wenn deine Neugier auf "mehr jQuery" geweckt wurde findest du in unserem Blog viele weitere Tutorials. Möchtest du noch weiter in die Tiefe der beliebten JavaScript-Bibliothek gehen, empfehle ich dir den LerneProgrammieren jQuery-Schnellstart. In diesem Kurs lernst du jQuery in unserem bequemen Online-Editor, ohne deinen Browser verlassen zu müssen. Das Framework lernst du dort ohne Vorwissen sofort in der Praxis, mit vielen spannenden Übungen.

Wir sehen uns im nächsten Tutorial!

Programmierer-Crashkurs für Anfänger...kostenlos!

Baue echte Apps, ohne Vorwissen, ohne Installation!