Sie können jQuery wahlweise herunterladen und dann wieder auf Ihren eigenen Web-Space hochladen, damit Ihre Webseiten es von dort aus lokal laden. Die Alternative ist, jQuery direkt über einen hochverfügbaren Google-Server einzubinden.

Eine lokale Einbindung ist dann vorzuziehen, wenn Ihre Website oder Webanwendung ohne jQuery schlichtweg nicht funktioniert oder gar problematische Fehler produziert. Denn wenn Sie jQuery lokal einbinden, ist es nur dann nicht verfügbar, wenn auch der Rest vom Webserver nicht verfügbar ist.

In den meisten anderen Fällen empfiehlt sich jedoch die direkte Einbindung über einen hochverfügbaren Online-Server. Denn in diesem Fall ist die Chance groß, dass der Browser des Anwenders die jQuery-Ressourcen gar nicht mehr neu laden muss, weil auch andere Websites die gleiche Technik nutzen und die Ressourcen deshalb schon im Browser-Cache sind.

Die aktuelle jQuery-Bibliothek hat in white-space-komprimierter Form (Dateiendung .min.js statt .js) knapp unter 100 KiloByte. Dieses Download-Volumen ist selbst bei schwächeren Breitbandverbindungen innerhalb von ein, zwei Sekunde geladen. Jedes weitere jQuery-Plugin, das Sie nutzen, schlägt allerdings extra zu Buche. Viele Plugins kommen jedoch mit wenigen oder wenigen Dutzend KiloByte Umfang aus.

jQuery downloaden und lokal einbinden

Rufen Sie http://jquery.com/ auf und klicken Sie auf den Link zum Download. Wenn Sie nicht vorhaben, im Quelltext der jQuery-Bibliothek etwas zu ändern, wählen Sie die Version “compressed, production jQuery”. Der Link führt direkt zur js-Datei der jQuery-Bibliothek. Es kann sein, dass Browser diese Ressource gar nicht zum Download anbieten, sondern den Quelltext anzeigen. Klicken Sie in diesem Fall mit der rechten Maustaste in den Inhalt und wählen Sie aus dem Kontextmenü den Befehl zum lokalen Speichern der Datei.

Legen Sie die Bibliotheksdatei von jQuery bei Ihren Websites in einem geeigneten Verzeichnis ab. In HTTP-Umgebungen muss sich die Datei innerhalb des Verzeichnisbaums der „Document Root“ befinden, also dem Verzeichnis, unterhalb dessen Dateien abgelegt werden, die über URLs aufrufbar sein sollen.

Binden Sie die js-Datei mit der jQuery-Bibliothek in Ihren HTML-Dokumenten wie in Kapitel Externe Scripts einbinden beschrieben ein – üblicherweise im HTML-Kopfbereich zwischen <head> und </head>.

Beispiel

<script src="/scripts/jquery/jquery-1.11.0.min.js" 
type="text/javascript"></script>

Erläuterung

In diesem Fall wird die zum Redaktionszeitpunkt aktuelle Version 1.11.0 aus der 1er-Entwicklungsreihe von jQuery eingebunden. Damit steht die Bibliothek für weiteren JavaScript-Code zur Verfügung, der innerhalb des HTML-Dokuments oder in anderen, separaten JavaScript-Dateien notiert sein kann.

jQuery über Hochverfügbarkeitsserver einbinden

Seit Jahren kann jQuery über Hochverfügbarkeitsserver von Google eingebunden werden. In diesem Fall brauchen Sie nichts herunterzuladen. Stattdessen binden Sie die js-Datei der jQuery-Bibliothek in Ihren HTML-Dokumenten wie in Kapitel Externe Scripts einbinden beschrieben ein. Verwenden Sie dabei folgendes URL-Schema:

http://ajax.googleapis.com/ajax/libs/jquery/[VERSION]/jquery.min.js

Ersetzen Sie [VERSION] durch die aktuelle oder gewünschte jQuery-Version. Welche Version aktuell ist, erfahren Sie auf der Website http://jquery.com/.

Beispiel

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" 
  type="text/javascript"></script>

Erläuterung

In diesem Fall wird die zum Redaktionszeitpunkt aktuelle Version 1.11.0 über die Google-Server direkt eingebunden.

jQuery 1.x.x und jQuery 2.x.x

Es gibt gegenwärtig zwei Entwicklungsstränge von jQuery. Der Entwicklungsstrang mit Versionsnummern 1.x.x hat den Anspruch, dass alle von jQuery bereit gestellten Funktionen auch mit den technisch veralteten, aber immer noch bis zu einem gewissen Grad verbreiteten Browsern MS Internet Explorer 6, 7 und 8 funktionieren.

Beim Entwicklungsstrang 2.x.x entfällt diese Garantie, und vieles wird in den älteren Versionen des MS IE zu Fehlern führen. Dafür ist der 2.x.x-Strang schlanker und performanter, weil sie nicht mehr so viele zusätzliche Abfragen und Workarounds benötigt.

Die weiteren Beispiele in diesem Kapitel funktionieren nur, wenn jQuery mit einer der hier beschriebenen Möglichkeiten korrekt in das HTML-Dokument eingebunden ist.