jQuery Schnellstart – Syntax & Selektoren

Da du jetzt weißt was jQuery ist, wofür es eingesetzt wird und wie du es in deine Website einbindest, schauen wir uns nun die Syntax eine jQuery-Codes an.

Die Syntax von jQuery einfach verstehen

Eine jQuery-Anweisung beginnt normalerweise mit:

dem Dollar-Zeichen ($) und
endet mit einem Semikolon (;).

In jQuery ist das Dollarzeichen ($) nur eine Abkürzung (ein Alias) für "jQuery". Wir sind also faul und benutzen für den Aufruf von jQuery nur das Dollarzeichen ($)

Code-Beispiel - Schauen wir uns einmal deinen ersten jQuery Code an:

&lt;script&gt;
  $(document).ready(function() {
     alert("Hallo LerneProgrammieren"); 
  }); 
&lt;/script&gt;

Probiere den Code selbst aus indem du auf "Code testen" klickst.

Das oben gezeigte Code-Beispiel zeigt dem User eine einfache Alert-Meldung mit dem Text "Hallo LerneProgrammieren!" an.

Der Code erklärt - Schritt für Schritt...

Wenn Du völlig neu in der Welt von jQuery bist, fragst du dich vielleicht wie der oben gezeigte Code funktioniert. Gehen wir das Skript daher Schritt für Schritt durch.

<script>-Element - Da jQuery eine einfache JavaScript-Bibliothek ist, kann der jQuery-Code innerhalb des <script>-Elements platziert werden. Wenn du deinen jQuery-Code lieber in einer externen JavaScript-Datei speichern möchtest, kannst du hier mit src="" auf die externe Datei verweisen, um den Code zu laden.
$(document).ready(handler); - Diese Anweisung wird typischerweise als ready-Ereignis bezeichnet. Dabei ist der Handler im Grunde eine Funktion, die an die Methode ready() übergeben wird. Dadurch wird sichergestellt, dass der weitere Code erst ausgeführt wird, wenn das Dokument (unsere Website) bereit ist. Bereit bedeutet in diesem Fall, dass die DOM-Hierarchie (mit allen DOM-Elementen) vollständig geladen wurde.
Die jQuery ready()-Methode wird normalerweise zusammen mit einer Funktion function() verwendet. Sobald das Dokument geladen ist soll hier durch den Aufruf der Funktion also etwas passieren.
Was soll denn passieren? In unserem Beispiel sollte ein Alert (Hinweis) mit dem Text "Hallo LerneProgrammieren" aufgerufen werden. Dafür haben wir den Code alert("Hallo LerneProgrammieren"); aufgerufen. Anstelle der alert()-Funktion kannst du hier auch jeden anderen beliebigen jQuery-Code einfügen.

jQuery Selektoren - Wie manipuliere ich Elemente?

Du hast jetzt gelernt, wie die jQuery Syntax aufgebaut ist. So weit war das ganz leicht, oder?

Im Folgenden schauen wir uns jQuery Selektoren an. Einfachgesagt, wählen wir mit einem "Selektor" etwas auf deiner Website aus. Meistens sind das ein oder mehrere DOM-Elemente, die wir auswählen und im Anschluss manipulieren wollen.

Der jQuery-Selektor ermöglicht es dir, DOM-Elemente auf deiner Webseite zu finden. In den meisten Fällen wirst du mit der Selektorfunktion $() beginnen:

$(Selektor)

Mit dem Selektor spezifizieren wir ein Muster, das unserem DOM-Element entspricht. jQuery verwendet sowohl CSS-Selektoren als auch ein eigene Muster, um Elemente in einem Dokument zu finden.

Zum besseren Verständnis schauen wir uns ein paar der bekanntesten Selektoren an.

Elemente nach einer ID auswählen

Du kannst den ID-Selektor verwenden, um ein einzelnes Element mit einer eindeutigen ID auf der Seite auszuwählen.

Das folgende Code-Beispiel wählt beispielsweise ein Element mit dem ID-Attribut id="geheim" aus und hebt es hervor, wenn das Dokument für die Bearbeitung bereit ist (ready-Ereignis).

&lt;script&gt;
  $(document).ready(function(){ 
    // Wähle die ID "geheim" aus 
    $("#geheim").css("background", "green");
 });
&lt;/script&gt;

Elemente nach Klassennamen auswählen

Mit dem Selektor für Klassen können die Elemente mit einer bestimmten CSS-Klasse ausgewählt werden.

Zum Beispiel wird der folgende jQuery-Code die Elemente mit dem Klassenattribut class="markieren" auswählen und markieren, wenn das Dokument geladen ist.

&lt;script&gt;
  $(document).ready(function() { 
    // Wähle die CSS-Klasse "markieren" aus 
    $(".markieren").css("background", "blue"); 
  }); 
&lt;/script&gt;

Elemente nach Namen auswählen

Der Element-Selektor kann verwendet werden, um Elemente auf der Grundlage des Elementnamens auszuwählen.

Zum Beispiel wird der folgende jQuery-Code alle Paragrafen, d.h. die <p> Elemente des Dokuments auswählen und den Hintergrund ändern.

&lt;script&gt;
  $(document).ready(function() {
    // Wähle alle &lt;p&gt; Elemente aus
    $("p").css("background", "red"); 
  });
&lt;/script&gt;

Elemente nach Attributen auswählen

Du kannst den Attribut-Selektor benutzen, um ein Element anhand von HTML-Attributen zu selektieren. Ein Beispiel dafür ist das "target"-Attribut eines Links oder das Attribut "type" eines Formular-Inputs usw.

Zum Beispiel wird der folgende jQuery-Code alle Texteingabefelder, d.h. <input> Elemente mit dem Typ="text", auswählen und hervorheben sobald das Dokument geladen wurde.

&lt;script&gt;
  $(document).ready(function(){
    // Inputfelder auswählen und hervorheben
    $('input[type="text"]').css("background", "pink");
  });
&lt;/script&gt;

Weitere jQuery-Selektoren

Du kannst CSS Selektoren mit jQuery auch kombinieren, um eine präzisere Auswahl der Elemente vorzunehmen.

Beispielsweise können wir den Klassen-Selektor mit dem Element-Selektor kombinieren.

Welche Kombinationen kannst du dir noch vorstellen? Probiere im Code-Editor ein paar Selektor-Kombinationen aus. Durch das selbständig ausprobieren lernst du am schnellsten.

Ein paar Tipps für möglich Kombinationen:

ID und Element
Element (<ul>) und Element (<li>)
Elemente mit target=_blank Attribut

Deine Code-Aufgabe - Jetzt bist du gefragt:

(Die Aufgabenbeschreibung findest du unter dem Code-Editor)

[lp_spoiler title="Komplettlösung anzeigen" class="da"]

Das ist die Komplettlösung beider Aufgaben:

&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://lerneprogrammieren.de/csss/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 id="geheim"&gt;Ich lerne jQuery auf LerneProgrammieren.de&lt;/h1&gt;
    
    &lt;!-- Aufgabe 1: Füge das jQuery-CDN-Skript in Zeile 10 ein--&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;

    &lt;!-- Aufgabe 2: Füge den jQuery-Code zum Einfärben des Hintergrunds ab Zeile 13 ein --&gt;
    &lt;script&gt;
        $(document).ready(function() {
          $("#geheim").css("background", "yellowgreen");
        });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

[/lp_spoiler]

Puh, jetzt hast du viel über die Syntax und Selektoren gelernt. In der nächsten Lektion geht es um Events. Die Kombination aus Selektoren und Events macht jQuery so richtig spannend. Wir sehen uns gleich!