Ein erster Blick auf jQuery

Standard

Update: Verbesserte Beschreibung der drei Download-Varianten.

Update: Verzeichnis der anderen Folgen der jQuery-Reihe hinzugefügt.

Überblick über die jQuery-Reihe:

  1. Ein erster Blick auf jQuery
  2. jQuery: DOM-Elemente auswählen
  3. Intellisense für jQuery in Visual Studio 2008
  4. jQuery: Den Dokumentenbaum manipulieren
  5. jQuery: Effektvoll ein- und ausblenden

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 (oder Development): enthält den JavaScript-Quellcode so, wie die Entwickler ihn geschrieben haben. Alle Kommentare sind enthalten, bestimmte Zeilen sind mit Leerzeichen eingerückt usw. Nicht nur der Browser, sondern auch Menschen sollen den Programmcode lesen und verstehen können.
  • Minified: enthält den JavaScript-Quellcode ohne Kommentare und unnötigen Leerzeichen. Aus der Developmentversion werden alle Zeichen entfernt, die für die Ausführung im Browser nicht benötigt werden. Der Browser versteht den JavaScript-Code ohne weitere Veränderungen. Ein Entwickler kann den Programmcode nur mehr mit sehr viel Mühe lesen. Die Dateien sind aber viel kleiner als in der Developmentversion. Diese Variante wird für Produktionssysteme empfohlen.
  • Packed: Noch kleiner werden die Dateien, wenn sie “gepackt” werden, d.h. die Datei enthält nur mehr einen JavaScript-Code, der den eigentlichen JavaScript-Code aus der Developmentversion erst mit einem Algorithmus “entpacken” muss. Üblicherweise ist ein solcher Algorithmus rechenintensiv.

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:

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