391
Kapitel 22
Einführung in jQuery
In diesem Kapitel:
Grundlagen zu jQuery 392
jQuery verwenden 392
Selektoren verwenden 395
Funktionen 401
Ereignisse 408
AJAX und jQuery 411
Mehr jQuery 416
Übungen 416
392
Kapitel 22: Einführung in jQuery
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
jQuery in Ihr HTML einzubinden
wichtige Konzepte und die Syntax von jQuery zu verstehen
jQuery mit Ihren Webseiten einzusetzen
Grundlagen zu jQuery
jQuery ist ein bekanntes und leicht einzusetzendes JavaScript-Framework. Es erleichtert schwierige JavaScript-
Aufgaben und beseitigt oftmals auch Probleme bei browserübergreifendem JavaScript.
Die gesamte jQuery-Bibliothek besteht aus nur einer einzigen JavaScript-Datei und lässt sich somit ganz
einfach in Ihr JavaScript einbinden. Die jQuery-Syntax ist ebenfalls leicht zu erlernen; sie verwendet einen
einfachen Namespace und einheitliche Funktionalität. Zusammen mit dem Add-On jQuery User Interface
(mit dem sich Kapitel 23 befasst) können Sie leistungsfähige und höchst interaktive Webanwendungen
herstellen.
Dieses Kapitel erläutert im Rahmen einer Einführung in jQuery unter anderem, wie Sie die Bibliothek
herunterladen und in Ihrem JavaScript verwenden.
jQuery verwenden
jQuery ist unter http://www.jquery.com/ erhältlich. In diesem Abschnitt erfahren Sie, wie Sie jQuery herun-
terladen und in eine Webseite integrieren.
Die beiden jQuery-Downloads
Auf der Homepage von jQuery sind zwei Downloads verfügbar: eine Produktionsversion und eine Entwick-
lungsversion. Sofern Sie nicht vorhaben, jQuery-Plug-Ins zu entwickeln oder sich die Interna von jQuery
anzusehen, sollten Sie die verkleinerte Produktionsversion verwenden.
Insbesondere für das Durcharbeiten dieses Kapitels können Sie alternativ auch über ein Netzwerk für
Inhaltsübermittlung (Content Delivery Network, CDN) auf eine gehostete Version von jQuery zugreifen.
Unter anderem fungiert die API-Website von Google als Host für jQuery und andere Bibliotheken. Das
heißt, dass Sie jQuery in Ihre Webseiten und JavaScript-Programme einbinden können, ohne die Datei lokal
auf Ihrem Server hosten zu müssen. Weitere Informationen hierzu finden Sie unter http://code.google.com/
apis/libraries/devguide.html.
HINWEIS
Für fast alle Szenarios, in denen Sie mit jQuery arbeiten, empfehle ich, die jQuery-Datei herunterzuladen und
lokal zu hosten. Mit der lokalen Version lässt sich möglicherweise schneller und zuverlässiger arbeiten als mit der CDN-Version.
Wenn Sie zum Beispiel eine CDN-gehostete Version verwenden und der CDN-Server ausfällt, funktioniert auf Ihrer Site nichts
mehr, was sich auf diese Bibliothek stützt! Allerdings ist eine CDN-gehostete Datei für die Entwicklungsaufgaben in diesem
Kapitel durchaus akzeptabel.
Für die Übungen in diesem Kapitel ist es erforderlich, dass Sie jQuery auf Ihren lokalen Entwicklungscom-
puter heruntergeladen haben oder über ein CDN damit verbunden sind.
jQuery verwenden
393
jQuery einbinden
In eine Webseite binden Sie jQuery auf die gleiche Weise ein wie jede andere externe JavaScript-Datei – mit
einem <script>-Tag, das auf die Quelldatei verweist. Sehen Sie sich dazu den Code in Listing 22.1 an.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>jQuery einbinden</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>
<body>
</body>
</html>
Listing 22.1 jQuery in eine Webseite einbinden
Nachdem Sie jQuery heruntergeladen oder über eine CDN-Site referenziert haben und anhand des obigen
Beispielcodes wissen, wie Sie jQuery in eine Datei einbinden, ist es an der Zeit, sich mit der jQuery-Syntax
zu befassen.
WICHTIG
Zum Zeitpunkt der Übersetzung war die Version 1.5.1 aktuell. Es ist davon auszugehen, dass sich die Version
geändert hat, wenn Sie dieses Kapitel lesen, sodass Sie das src-Attribut entsprechend an die Version Ihres heruntergeladenen
jQuery-Skripts anpassen müssen.
Grundlegende jQuery-Syntax
Wenn Sie die jQuery-Bibliothek in eine Seite einbinden, fügt jQuery eine Funktion jquery() hinzu. Man
könnte nun annehmen, dass sämtliche Aufrufe von jQuery-Funktionen über diese jquery()-Funktions-
schnittstelle erfolgen müssen, doch es gibt einen Shortcut für die jquery()-Funktion: $(). Anstatt jedes Mal
jquery eintippen zu müssen, greifen Sie auf die jQuery-Bibliothek mit einem Dollarzeichen gefolgt von
Klammern zu, wie es die Beispiele in Tabelle 22.1 zeigen.
Syntax Beschreibung
$("a") Alle <a>-Elemente im Dokument
$(document) Das gesamte Dokument; häufig verwendet, um auf die später in diesem Kapitel gezeigte Funktion
ready() zuzugreifen
$("#elementID") Das Element, das durch die ID elementID identifiziert wird
$(".className") Die Elemente, die zur Klasse className gehören
Tabelle 22.1 Einige jQuery-Selektoren
Weitere Selektoren und einschlägige Funktionen lernen Sie später in diesem Kapitel kennen.
Get JavaScript - Schritt für Schritt now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
