Mehr Effizienz bei weniger Aufwand

Workshop Javascript-Bibliothek: Einstieg in jQuery

jQuery ist eine schlanke Javascript-Bibliothek, die genau das verspricht, was man braucht: mehr Effizienz bei weniger Aufwand. Der Workshop zeigt, wie Sie gängige Javascript-Aufgaben mit jQuery elegant lösen.

Autor: Redaktion pcmagazin • 21.8.2009 • ca. 1:45 Min

Inhalt

Do more write less - das ist das offizielle Motto von jQuery. Und Sie werden sehen, dass sich viele Aufgaben mit deutlich weniger Code erledigen lassen.Dabei ermöglicht jQuery unobtrusive, unaufdringliches Javascript: Das heißt, der Javascript- und HTML-Code wird nicht vermischt und außerdem lassen sich die grundlegenden Funktionen der Webseite auch ohne Javascript nutzen.Dieses Verhalten macht die Webseiten benutzerfreundlich, steigert die Barrierefreiheit, ist tolerant gegenüber langsamen Client-Rechnern und hilft bei der Suchmaschinenoptimierung.jQuery liefert fertige Befehle zur Bearbeitung von HTML-Inhalten, für Effekte und natürlich auch für AJAX. Zusätzlich gibt es jQuery UI für Komponenten der Benutzer-oberfläche etwa Tabs, Fortschrittsbalken, klassische Interaktionen wie Drag & Drop und vieles mehr.

Und für alle spezielleren Aufgaben stehen inzwischen Unmengen von weiteren Plug-ins zur Verfügung, die Sie bei Bedarf einsetzen können.

Gerade an der aktiven Entwicklung von immer neuen Plug-ins zeigt sich die Beliebtheit von jQuery, das inzwischen in der Version 1.3.2 vorliegt: Diese ist noch einmal schneller beim Auffinden von HTML-Elementen und bietet einige neue Features. jQuery unterstützt den Internet Explorer ab Version 6, Firefox 2+, Safari 3+, Opera 9+ und Chrome.

Schnellstart

Um mit jQuery zu programmieren, brauchen Sie zunächst die eigentliche jQuery-Bibliothek, die Sie unter zum Download erhalten.

Für den produktiven Einsatz ist die minimierte Version gedacht. Interessieren Sie sich hingegen dafür, wie jQuery selbst programmiert ist, so können Sie sich die andere, deutlich umfangreichere Version anschauen.

Fügen Sie einen Verweis auf die jQuery-Datei im head-Bereich Ihres Dokuments ein:

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

Notieren Sie darunter einen weiteren Javascript-Bereich für Ihren eigenen Code und schreiben Sie hier:

<script type="text/javascript">
$(document).ready(function() {
/* Hier steht der Code zum
Ausführen */
});</script>

Da es sich bei den meisten Javascript-Operationen um Bearbeitungen des HTML-Dokuments handelt, darf der Javascript-Code erst ausgeführt werden, wenn der HTML-Code geladen ist. Und genau das macht die Angabe

$(document).ready(function() {});

Wichtig ist, dass Ihr Javascript-Code auf jeden Fall innerhalb der geschweiften Klammern steht.

Vielleicht haben Sie in anderen Skripten window.onload=starten; verwendet. Dann wird die Funktion starten() erst ausgeführt, nachdem das Dokument vollständig geladen ist.

Javascript-Bibliotheken — Visual jQuery bietet jQuery-Befehle zum komfortablen Nachschlagen.

Die jQuery-Konstruktion macht im Prinzip dasselbe, aber etwas eleganter: Es wird nur gewartet, bis der HTML-Code geladen ist, nicht bis alle Bilder vollständig geladen sind.