Scott Guthrie und John Resig kündigten Ende September an, dass die nächste Version von Visual Studio die JavaScript-Library jQuery enthalten wird. Die Entwicklungsumgebung wird Intellisense für jQuery-Methoden bieten und die jQuery-Hilfe in das Hilfesystem integriert sein. Grund genug, um einen ersten Blick auf die JavaScript-Library zu werfen.
Dieser Artikel ist der Beginn einer Blogserie, mit der ich die Grundlagen von jQuery vorstellen möchte. In dieser Folge sehen wir uns ein einfaches jQuery-Script an.
Hello, world!
Um mit jQuery experimentieren und entwickeln zu können, laden Sie die JavaScript-Library von der Homepage runter. Das Beispiel wurde mit Version 1.2.6 entwickelt und getestet. Es gibt drei Varianten für den Download:
- Uncompressed - enthält den originalen JavaScript-Code mit Kommentaren und Whitespace.
- Packed - ist die kleinste Datei. Am Client wird aber JavaScript-Code ausgeführt, um den eigentlichen jQuery-Code zu entpacken, weshalb die Performance am schlechtesten ist.
- Minified - enthält den originalen JavaScript-Code ohne Kommentare und Whitespace. Diese Variante wird für Produktionssysteme empfohlen.
Für unser erstes Beispiel kopieren Sie die heruntergeladene Datei unter dem Namen „jquery.js“ in ein beliebiges Verzeichnis, in dem Sie auch eine neue HTML-Datei mit folgendem Inhalt anlegen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Sample</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#Label").click(function() { $(this).text("Hello, world!"); }); }); </script> </head> <body> <div id="Label" style="border: 1px solid #000;"> This is a test. </div> </body> </html> |
Wenn Sie die Datei öffnen, zeigt der Browser den Text „This is a test.“ an. Wenn Sie darauf klicken, tauscht der JavaScript-Code den Text gegen „Hello, world!“ aus.
Der Startpunkt des Frameworks ist „$“, ein Alias für die Funktion jQuery, die als Argument einen Selektor oder ein DOM-Element erwartet. In unserem Beispiel verwenden wir die $-Funktion drei Mal: $(document), $("#Label") und $(this). $(document) und $(this) geben jeweils ein Objekt zurück, dessen Methoden auf die angegebenen DOM-Elemente wirken. $("#Label") verwendet einen CSS-Selektor, um das DIV-Element mit der ID „Label“ zu finden.
Das Ready-Ereignis
JavaScript-Code wird sofort nach dem Parsen ausgeführt. Zu diesem Zeitpunkt ist der Dokumentenbaum noch nicht vollständig aufgebaut, was zu Problemen führen kann.
JavaScript-Entwickler verwenden deshalb häufig das Load-Ereignis am window-Objekt für Initialisierungscode. Der Browser löst dieses Ereignis aus, sobald er die Seite geladen hat. Der Code wird aber erst ausgeführt, nachdem auch alle Bilder geladen wurden.
jQuery bietet deshalb das Ready-Ereignis an. jQuery wartet, bis das Dokument bereit ist, um bearbeitet zu werden, und löst dann das Ereignis aus.
Eventhandler
Eventhandler sind für jQuery einfache JavaScript-Funktionen. Wir haben in unserem Beispiel anonyme Funktionen verwendet (Zeilen 8 und 9).
Unser Beispiel registriert einen Eventhandler für das Click-Ereignis am DIV-Element mit der ID „Label“. Ein DOM-Element löst das Click-Ereignis aus, wenn der Benutzer darauf mit der Maus klickt.
Hinweis: In Eventhandlern zeigt this auf das DOM-Element, das das Ereignis ausgelöst hat.
Unser Beispiel verändert in Zeile 10 im Click-Eventhandler des DIV-Elements den Textinhalt des Elements mit der Methode „text“:
$(this).text("Hello, world!");
Zusammenfassung
Der Startpunkt für jQuery ist die Funktion jQuery mit dem Alias „$“. Mit Selektoren referenzieren Sie DOM-Elemente, auf die Sie mit dem jQuery-API Eventhandler registrieren, DOM-Manipulationen durchführen oder Effekte aufrufen können.
Das Ready-Ereignis können Sie zur Initialisierung Ihrer JavaScript-Anwendung nutzen. Wie bei normalen JavaScript-Eventhandlern referenziert this in einer als Eventhandler registrierten Funktion das DOM-Element, das das Ereignis ausgelöst hat.
In der nächsten Folge wenden wir uns den jQuery-Selektoren zu.
