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.

© Archiv

Gelb Mann Eier Eierschale

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.

© Archiv

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.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.