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.

Gelb Mann Eier Eierschale

© 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.

Javascript-Bibliotheken

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".