jQuery-Tutorial: Grundlagen zu Selektoren, Syntax und Co.

jQuery ist eine JavaScript-Bibliothek, die vom amerikanischen Software-Entwickler John Resig entwickelt und 2006 unter der freien MIT-Lizenz veröffentlicht wurde. Die Bibliothek stellt umfangreiche Optionen zur HTML- und CSS-Manipulation, zur Steuerung von Events sowie zur Beschleunigung von Ajax-Funktionalitäten bereit. Diese lassen sich unkompliziert nutzen, indem jQuery in den HTML-Quelltext des jeweiligen Webprojekts eingebunden und mithilfe von Funktionen gesteuert wird. jQuery ist in vielen Content-Management-Systemen und Webframeworks wie Joomla, WordPress oder MediaWiki bereits integriert und besticht nicht nur durch den gewaltigen Funktionsumfang, sondern auch durch die große Community und die stetige Weiterentwicklung, die mittlerweile in der Verantwortung des jQuery-Teams liegt.

Das steckt hinter jQuery: Einführung in die Möglichkeiten der Bibliothek

jQuery vereinfacht die Programmierung mit der dynamischen Skriptsprache JavaScript erheblich. Die gesamte jQuery-Bibliothek besteht dabei aus einer einzigen JavaScript-Datei, die die grundlegenden DOM-, Ajax-, Ereignis- und Effekt-Funktionen enthält. Damit stellt die Bibliothek eine umfangreiche Sammlung von Programmteilen dar, mit deren Hilfe die Elemente von Webprojekten bearbeitet werden können. So wählen Sie beispielsweise Objekte aus und verändern deren Aussehen (Farbe, Position etc.), was zwar prinzipiell auch mit JavaScript möglich, aber deutlich aufwändiger zu realisieren ist.

Ferner können Sie mit jQuery noch gezielter auf Aktionen Ihrer Nutzer reagieren – dank ereignisgesteuerter Programmierung der Seitenelemente. Die User lösen zuvor definierte Ereignisse per Mauszeiger oder durch Texteingabe aus und bekommen die jeweiligen Inhalte oder Animationen präsentiert. Auch grafische Effekte wie Texteinblendungen etc. sind schnell und mit nur einer einzigen Codezeile eingefügt. jQuery vereinfacht darüber hinaus die Arbeit mit Ajax. Die Bibliothek optimiert die Technologie, die im Hintergrund aktuelle Seiteninhalte nachlädt, vor allem dahingehend, dass sie eine browserübergreifende Schnittstelle aufweist. Mit deren Hilfe lässt sich die Ajax-Technik schnell für die verschiedensten Browser nutzen und einrichten – selbst veraltete Browser-Versionen sind so abgedeckt. Generell schließt jQuery diverse Lücken zwischen den JavaScript-Implementierungen der einzelnen Browser.

jQuery: Grundlagen-Gerüst mit Plug-ins erweitern

Dass der Einsatz von jQuery stets für aktuelle Webprojekte von Interesse ist, liegt hauptsächlich an der einfachen Erweiterbarkeit der JavaScript-Bibliothek. Tausende Plug-ins, die die Programmierung weiter vereinfachen und jQuery noch mächtiger machen, stehen auf der offiziellen jQuery-Homepage – größtenteils kostenfrei – zum Download bereit. An dieser Stelle machen sich die große Verbreitung und die breitgefächerte Community der Bibliothek bezahlt, die einen entscheidenden Anteil an der Entwicklung dieser Erweiterungen haben. Ist die gewünschte Funktion weder im Standardumfang noch als Plug-in verfügbar, können sich erprobte Entwickler auch daran versuchen, eine eigene Erweiterung zu gestalten.

So binden Sie die JavaScript-Bibliothek ein

Um jQuery für Ihr Projekt nutzen zu können, müssen Sie die Bibliothek zunächst einbinden. Dabei haben Sie entweder die Möglichkeit, die JavaScript-Datei auf dem eigenen Webspace zu hosten oder einen Link zu einem externen Webspace zu setzen. Sind Sie an ersterer Variante interessiert, finden Sie die Datei im Download-Center der jQuery-Homepage. Dort können Sie zwischen der komprimierten Version für den Live-Einsatz (compressed, production jQuery) und der unkomprimierten Entwickler-Edition (uncompressed, development jQuery) wählen. Um die jeweilige Datei lokal zu speichern, klicken Sie einfach mit der rechten Maustaste auf den betreffenden Link, wählen „Ziel speichern unter …“ aus und geben das gewünschte Zielverzeichnis an. Anschließend setzen Sie im <head>-Bereich Ihrer Webpräsenz den entsprechenden Link: 

<head>
    <script type="text/javascript" src="pfad_zur_jquery_datei/jquery.js"></script>
</head>

Entscheiden Sie sich hingegen dafür, die Datei extern zu beziehen, müssen Sie die Referenz im Header entsprechend anpassen. Um z. B. die jQuery-Datei aus den Google Hosted Libraries zu nutzen, geben Sie die folgende Webadresse inklusive der jeweiligen Version – im folgenden Link 3.0.0 – als Source-Element (src) an:

http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js

So ist die jQuery-Syntax aufgebaut

Mit jQuery-Code können Sie auf die HTML-Elemente Ihres Webprojekts zugreifen. Diese Elemente wählen Sie über einen Selektor aus, der sich syntaktisch an CSS-Selektoren orientiert. Darauf folgt in der Regel eine Aktion, die beschreibt, auf welche Art und Weise das ausgewählte Element verändert werden soll. Selektor und Aktion wird zusätzlich ein Dollarzeichen ($) vorangestellt, um den Code als jQuery-Funktion auszuzeichnen. Dies geschieht, um Verwechslungen bei der Verwendung verschiedener Bibliotheken zu vermeiden. $() dient dabei als Abkürzung für die jQuery()-Funktion. Die Basis-Syntax lautet also:

$(Selektor).Aktion()

Eine unverzichtbare Codezeile, die jeglichen jQuery-Auszeichnungen in Ihrem HTML-Dokument voranstehen sollte, ist das Document-Ready-Event. Dieser Code stellt sicher, dass alle darin enthaltenen jQuery-Kommandos erst ausgeführt werden, nachdem sämtliche HTML-Elemente geladen worden sind. Einerseits werden so Fehlermeldungen vermieden, wenn z. B. ein Element versteckt werden soll, das bisher noch gar nicht angezeigt wird. Andererseits ermöglicht das Document-Ready-Event auch, den Code in den <head>-Bereich einzufügen. Der syntaktische Aufbau der angesprochenen Codezeile entspricht dem folgenden Muster:

<script type="text/javascript">
    $(document).ready(function(){
        //weiterer jQuery-Code
    });
</script>

Die wichtigsten Selektoren

Die jQuery-Selektoren sind die wohl wichtigsten Bestandteile der JavaScript-Bibliothek. Mit ihnen passen Sie die verschiedenen Elemente Ihrer Website an. Dabei gibt es unterschiedliche Selektorenarten, die HTML-Einheiten nach verschiedenen Kriterien wie ID, Klasse, Typ etc. finden und auswählen. Der häufig verwendete Element-Selektor ordnet HTML-Elementen die jeweiligen Aktionen anhand ihres Namens zu. So können Sie mit dem folgenden jQuery-Code z. B. definieren, dass alle <p>-Elemente – also alle Textblöcke – ausgeblendet werden, wenn der Website-Besucher auf einen Button klickt:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide();
        });
    });
</script>

Ein weiterer wichtiger jQuery-Selektor ist der #id-Selektor. Mit ihm zeichnen Sie im HTML-Dokument ein einzelnes Element aus, das danach, beispielsweise mit JavaScript, ganz gezielt verändert werden kann, ähnlich wie es auch bei CSS-Manipulationen der Fall ist. Sollen nicht alle Textblöcke bei einem Buttonklick des Users ausgeblendet werden, sondern nur ein ganz bestimmter, fügen Sie diesem <p>-Element einen id-Wert hinzu (<p id="testblock">) und ergänzen den Element-Selektor im oberen Codebeispiel durch den #id-Selektor: 

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("#testblock").hide();
        });
    });
</script>

Ein dritter einfacher Selektor ist der .class-Selektor, der zuvor definierte Klassen auswählt und ebenfalls nach der bekannten Methode eingesetzt wird. Weitere nützliche Selektoren sind:

Selektor Beschreibung
$("*") wählt alle Elemente aus
$(this) wählt das gegenwärtige Element aus
$("p:first") wählt das erste <p>-Element aus
$("ul li:first-child") wählt jeweils die erste Listenelemente <li> aller vorhandenen <ul>-Auflistungen
$("[href]") wählt alle Elemente mit einem href-Attribut aus
$("tr:even") wählt alle geraden Tabellenzeilen aus
$("tr:odd") wählt alle ungeraden Tabellenzeilen aus
$("p.intro") wählt alle <p>-Elemente mit der Klasse class="intro" aus

Auf diese User-Ereignisse können Sie mit jQuery reagieren

Die Besucher Ihrer Website bzw. Nutzer Ihrer Webanwendung interagieren auf ganz unterschiedliche Weise mit Ihrem Webprojekt – ob per Mausklick, Tastatureingabe, durch Ausfüllen eines Formulars oder das Vergrößern eines Fensters. Diese Ereignisse sind auch als DOM-Events bekannt und können in jQuery als Auslöser für Aktionen definiert werden.

Beispielsweise können Sie die Bewegung des Mauszeigers zum Auslöser für eine Aktion machen. Das erreicht man mit mouseenter() bzw. mouseleave(). Die erste Funktion reagiert darauf, dass der Nutzer mit dem Mauszeiger über das ausgewählte HTML-Element fährt, die zweite darauf, dass der Mauszeiger das Element wieder verlässt. Der folgende jQuery-Code bewirkt, dass der User über ein Dialogfenster benachrichtigt wird, wenn er einen Textblock mit dem Mauszeiger anvisiert:

<script type="text/javascript">
    $(document).ready(function(){
        $("p").mouseenter(function(){
            alert("Sie haben einen Textblock ausgewählt!");
        });
    });
</script>

Andere wichtige Auslöser sind:

Auslöser Beschreibung
focus() wird ausgelöst, wenn ein Element in den Fokus genommen wird (per Mausklick oder Tab)
blur() wird ausgelöst, wenn ein Element aus dem Fokus genommen wird
keydown() wird ausgelöst, wenn eine Taste gedrückt und gehalten wird
keyup() wird ausgelöst, wenn eine Taste losgelassen wird
change() wird ausgelöst, wenn eine Tastatureingabe getätigt wurde oder eine Auswahl getroffen wurde
scroll() wird ausgelöst, wenn in dem ausgewählten Element gescrollt wird
select() wird ausgelöst, wenn Text in dem ausgewählten Formular-Eingabefeld markiert wird

Mithilfe von on() können Sie außerdem mehrere Auslöser zu einem ausgewählten Element hinzufügen und so problemlos verschiedene Ereignisse kombinieren. Mit dem folgenden jQuery-Code erreichen Sie z. B., dass die Hintergrundfarbe von <p>-Elementen sich sowohl ändert, wenn die Besucher diese auswählen (blue), als auch wenn sie diese wieder abwählen (red) oder darauf klicken (yellow):

<script type="text/javascript">
    $("p").on({
        mouseenter: function(){
            $(this).css("background-color", "blue");
         }, 
        mouseleave: function(){
             $(this).css("background-color", "red");
        }, 
        click: function(){
            $(this).css("background-color", "yellow");
        } 
    }); 
</script>

Für einen ausführlichen Einblick in die vollständige Funktionspalette der JavaScript-Bibliothek – auch in Verknüpfung mit der Ajax-Technologie – empfehlen wir Ihnen das englischsprachige jQuery-Tutorial auf w3schools.com, das eine große Anzahl an Codebeispielen für jQuery bereithält.

War dieser Artikel hilfreich?