Übersicht: Einleitung
Vorwort
Im Verlauf dieser Seminararbeit sollen die Funktionalitäten und möglichen Anwendungsgebiete von jQuery beleuchtet werden.
Für das Verständnis der Inhalte dieser Seminararbeit sind grundlegende Kenntnisse der gängigen Webtechnologien
und -instrumente, insbesondere von
HTML,
CSS,
JavaScript,
DOM,
XPath
und Ajax
von Vorteil. Aufgrund des begrenzten Umfanges, kann auf diese Grundlagen nicht näher eingegangen werden.
Was ist jQuery?
jQuery ist eine JavaScript-Bibliothek, die umfangreiche Funktionen zur Traversierung, Selektion und Manipulation
von DOM-Strukturen bereit stellt. Darüber hinaus werden Event Handling, Visuelle Effekte und AJAX-Funktionalitäten
angeboten. Das Traversieren und die Selektion von Elementen wird durch CSS 1-3 Support, sowie in Teilen XPath unterstützt.
Desweiteren zeichnet sich jQuery durch seine Cross-Browser Kompatibilität aus (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome).
Seit der Veröffentlichung der Bibliothek von John Resig, Anfang des Jahres 2006, wird diese ständig weiter entwickelt.
Ziel dieser Entwicklung war und ist es, den Entwicklungsaufwand für Webanwendungen, insbesondere
der alltäglichen Aufgaben, deutlich zu senken.
Aus diesem Grund wird die jQuery-Bibliothek auch als "The Write Less, Do More, JavaScript Library" beschrieben.
Grundlagen
Bevor die jQuery-Bibliothek genutzt werden kann, muss sie wie jede andere JavaScript Datei im HTML Header eingebunden werden.
Die aktuelle Version kann unter jQuery.com heruntergeladen werden.
Das grundlegende Konstrukt, auf dem eine jQuery Anweisung aufbaut, ist die jQuery() Methode, die auch über den Alias $() aufgerufen werden kann. Durch verschiedene Arten von Eingabeparametern sind folgende Aufrufe möglich:
- $(Selektor)Über den Selektor String werden die darauf passenden Elemente aus der DOM-Struktur ausgewählt und als jQuery Objekt zurück gegeben. Das jQuery Objekt kapselt kein, ein oder mehrere Elemente und macht es möglich weitere Operationen darauf auszuführen.
z.B. selektiert folgender Ausdruck$("div.myClass")alle<div>Elemente, die die Klasse "myClass" besitzen. - $(html)Kreiert ein DOM-Element aus einem HTML String und gibt dieses als jQuery Objekt zurück.
z.B.$("<p>Ein neuer Absatz</p>") - $(DOM-Element)Kapselt das bzw. die DOM-Elemente und macht es damit möglich jQuery Operationen darauf auszuführen.
z.B.$(document.body) - $(Callback-Funktion)Ist ein Alias für "$(document).ready(Callback-Funktion)" und ermöglicht das Ausführen von Code, sobald das HTML Dokument bereit ist um Operationen darauf auszuführen. Dies wird im Kapitel über Events nochmals aufgegriffen.
Die Tatsache, dass die jQuery() bzw. $() Methode sowie auch die meisten anderen Methoden ein jQuery Objekt zurück gibt, ermöglicht es mehrere Methodenaufrufe aneinander zu hängen und somit weitere Operationen auf dem zuvor zurück gelieferten Objekt auszuführen. Dieses Verketten von Methodenaufrufen wird als "Chaining" bezeichnet und resultiert in einer sehr kompakten Formulierung von Anweisungen.
Beispiel zum Chaining:
Durch die Selektor Anweisung wird eine Menge von Elementen selektiert und danach die Methode1 darauf ausgeführt. Auf diesem Resultat wird wiederum die Methode2 ausgeführt usw.