Boris Schäling

29. August 2009

jQuery: Javascript-Bibliothek zum dynamischen Ändern von Webseiten

jQuery ist eine Javascript-Bibliothek, die die Entwicklung von kleinen Funktionen bis hin zu großen Webanwendungen vereinfacht. Wie so viele andere Javascript-Bibliotheken bietet jQuery eine browserunabhängige Schnittstelle an, um zu vermeiden, dass sich Entwickler mit Unterschieden zwischen Browsern beschäftigen müssen. Im Gegensatz zu vielen anderen Javascript-Bibliotheken ist jQuery jedoch kein Framework und bietet keine Hilfsmittel an, um zum Beispiel die objektorientierte Programmierung in Javascript zu unterstützen. jQuery konzentriert sich stattdessen auf wenige, aber mächtige Funktionen, über die beispielsweise sehr einfach HTML-Elemente ausgewählt und bearbeitet werden können.

Dieser Inhalt ist unter einer Creative Commons-Lizenz lizensiert.

Inhaltsverzeichnis

1. Allgemeines

Kein Framework für alles, sondern Konzentration aufs Wesentliche

jQuery ist eine Javascript-Bibliothek, die eine einfache und browserunabhängige Schnittstelle bietet, um auf HTML-Elemente einer Webseite zuzugreifen und sie zu bearbeiten. Auch wenn es sich hierbei um eine junge Bibliothek handelt, deren erste Version 2006 veröffentlicht wurde, ist jQuery heute eine der populärsten Javascript-Bibliotheken. So sind nicht nur viele Entwickler von anderen Bibliotheken wie beispielsweise Prototype zu jQuery gewechselt. Sogar Unternehmen wie Microsoft haben angekündigt, jQuery explizit zu unterstützen.

Die Gründe für die enorme Popularität von jQuery sind vielfältig:

jQuery unterstützt alle gängigen Browser und aktuelle Browserversionen. Dies wird unter anderem über eine Testsuite sichergestellt, die auf QUnit basiert - einem Spin-Off von jQuery, das sich zu einem eigenständigen Framework zum Testen von Javascript-Code gemausert hat. Die Testsuite von jQuery kann online im Browser ausgeführt werden.

jQuery wird in einer einzigen Datei zur Verfügung gestellt, die von der jQuery-Homepage heruntergeladen werden kann. Genaugenommen stehen zwei Dateien zur Auswahl: Die Datei, die zum Einsatz in Produktivsystemen empfohlen wird, enthält Code in einer stark komprimierten Variante. Das verkürzt die Ladezeiten der Bibliothek, macht es aber praktisch unmöglich, die Bibliothek zu debuggen. Für Entwickler wird daher auch eine nicht-komprimierte Variante der Bibliothek angeboten.

Egal, ob Sie die komprimierte oder nicht-komprimierte Variante von jQuery verwenden - die Einbindung in Webseiten erfolgt wie bei anderen Javascript-Dateien auch über den <script>-Tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      // Javascript-Code, der auf jQuery zugreifen kann 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

In diesem Artikel lernen Sie die verschiedenen Bestandteile von jQuery kennen. Dazu gehören ganz wesentlich Funktionen, um HTML-Elemente auszuwählen und zu bearbeiten. jQuery stellt darüberhinaus jedoch auch ein Minimum an Funktionen zur Verfügung, wie sie häufig in Webanwendungen benötigt werden. Dazu zählen zum Beispiel Funktionen zum Reagieren auf Ereignisse und zum Zugriff auf Serverressourcen mit Ajax.

Weil sich jQuery auf wesentliche Funktionen konzentriert und nicht versucht, eine neue Schnittstelle über sämtliche in Browsern existierende Funktionen zu stülpen, ist der Funktionsumfang von jQuery limitiert. Um eine weitergehende Unterstützung von Javascript-Entwicklern zu ermöglichen, bietet jQuery jedoch Schnittstellen an, über die die Bibliothek um neue Funktionen erweitert werden kann. Dies geschieht über sogenannte Plug-Ins, die bereits zahlreich entwickelt worden sind und über die Sie sich im Plug-In-Repository einen Überblick verschaffen können.

Aufbauend auf jQuery werden außerdem sogenannte Widgets angeboten. Dabei handelt es sich um Komponenten für grafische Benutzeroberflächen. Diese Komponenten werden in einem Paket zur Verfügung gestellt, das jQuery UI genannt wird. Auch wenn jQuery UI auf jQuery basiert, handelt es sich um zwei unterschiedliche Projekte, für die sich zwei unterschiedliche Teams verantwortlich zeichnen. jQuery UI verwendet außerdem eine andere selbst entwickelte Schnittstelle für Widgets. Diese Widgets basieren also nicht wie Plug-Ins auf der Schnittstelle, die von der jQuery-Bibliothek angeboten wird.

2. Architektur

Ein Objekt, viele nützliche Funktionen

jQuery erweitert das Objektmodell des Browsers um genau eine einzige Funktion namens jQuery(). jQuery fügt diese Funktion dem window-Objekt hinzu, das - auch wenn es keinen entsprechenden Standard gibt, der das vorschreibt - von allen gängigen Browsern angeboten wird. Da die Funktion über das window-Objekt zur Verfügung steht, kann sie wie eine globale Funktion aufgerufen werden, ohne window vor dem Funktionsnamen angeben zu müssen. Auch das ist etwas, was alle gängigen Browser so unterstützen.

window.jQuery(); 
jQuery(); 
window.$(); 
$();

Die Funktion jQuery() ist auch unter anderem Namen verfügbar. So können Sie sie auch über $() aufrufen. Auch wenn das Dollarzeichen gewöhnungsbedürftig aussieht, wird diese Schreibweise oft vorgezogen. Zum einen ist der Funktionsname kürzer - es muss also weniger getippt werden. Zum anderen fällt der ungewöhnliche Funktionsname auf. Das hilft, um in größeren Programmen schnell zu erkennen, wo auf jQuery zugegriffen wird. Letztendlich bleibt es aber Ihnen überlassen, ob Sie lieber jQuery() oder $() schreiben. Da Javascript-Entwickler in der Praxis die Dollar-Schreibweise vorziehen, wird in diesem Artikel ebenfalls $() verwendet.

Darstellung des jQuery-Objekts als Container für Browserobjekte

Der Aufruf von $() bewirkt, dass ein jQuery-Objekt zurückgegeben wird. Dieses jQuery-Objekt können Sie sich als ein Array vorstellen, das beliebig viele Browserobjekte enthält, die HTML-Elemente repräsentieren. Über das jQuery-Objekt werden zahlreiche Funktionen zur Verfügung gestellt, über die Sie sämtliche Browserobjekte bearbeiten können, die das entsprechende jQuery-Objekt im Moment enthält.

Sie müssen $() einen String übergeben, um HTML-Elemente auszuwählen. Dieser String wird als Selektor bezeichnet. Was Selektoren genau sind und wie sie aussehen, lernen Sie später in diesem Artikel kennen. Rufen Sie jedoch $() ohne einen Parameter auf, wird ein jQuery-Objekt zurückgegeben, das ein Browserobjekt enthält, das die aktuelle Webseite repräsentiert. Dieses Browserobjekt ist in allen gängigen Browsern auch als document-Objekt bekannt.

var jDocument = $();

Es macht nicht viel Sinn, $() ohne Selektor aufzurufen, da Sie über document direkten Zugriff auf das Browserobjekt haben, das die Webseite repräsentiert. Entscheidend für das Verständnis ist jedoch, dass $() keine Browserobjekte wie document zurückgibt, sondern immer nur ein jQuery-Objekt, das seinerseits Browserobjekte enthalten kann. Sie können also nicht auf jDocument direkt zugreifen, um zum Beispiel die Dokumenttyp-Deklaration zu lesen, wie sie vom W3C in der DOM-Spezifikation definiert ist. Sie müssen stattdessen auf das document-Objekt zugreifen, das sich im jQuery-Objekt jDocument befindet.

var jDocument = $(); 
if (jDocument.size() == 1) { 
  var doc = jDocument.get(0); 
  alert(doc.doctype.name); 
}

Weil ein jQuery-Objekt ähnlich einem Array beliebig viele Browserobjekte enthalten kann, bietet es zwei Funktion size() und get() an: Über size() kann die Anzahl der Browserobjekte im jQuery-Objekt ermittelt werden. Über get(), das einen Index als Parameter erwartet, kann auf ein bestimmtes Browserobjekt im jQuery-Objekt zugegriffen werden. So wird im obigen Beispiel der Doctype-Name ausgegeben - etwas, was genauso gut mit alert(document.doctype.name) hätte gemacht werden können.

Beachten Sie, dass doctype eine in DOM 1 standardisierte Eigenschaften des Dokuments ist und nicht von jQuery bereitgestellt wird. Nur Browser, die diese Eigenschaft unterstützen, geben den Namen des Dokumenttypen aus.

Die wahre Stärke von jQuery ist es, beliebige Browserobjekte mit Hilfe des Selektors auszuwählen. So kann zum Beispiel auf alle Paragraphen in einer Webseite zugegriffen werden, um jeden einzelnen mit einem <div>-Element zu umgeben und ihre Farbe zu ändern.

$('p').wrap(document.createElement('div')).css('color', 'blue');

Weil die meisten Funktionen das jQuery-Objekt zurückgeben, für das sie aufgerufen werden, können Funktionsaufrufe so wie oben verkettet werden: Zuerst werden alle gefundenen HTML-Elemente vom Typ <p> jeweils mit einem <div>-Element umgeben. Anschließend wird die Schriftfarbe der Paragraphen - nicht die der <div>-Elemente - auf Blau gesetzt.

Beachten Sie, dass jQuery nicht versucht, bestehende Browserobjekte zu ersetzen oder zu ändern. Auch wird nicht versucht, standardisierte Funktionen wie beispielsweise createElement() zu ersetzen. jQuery ist ein Hilfsmittel, um bestimmte Aufgaben schneller zu erledigen. Dabei wird aber mit bestehenden Browserobjekten und Funktionen kooperiert.

Da die Funktion $() verwendet wird, um Bestandteile einer Webseite auszuwählen und zu bearbeiten, muss oft sichergestellt werden, dass der Zugriff erst dann erfolgt, wenn die Webseite komplett geladen wurde. jQuery unterstützt Sie dabei: Wenn Sie keinen Selektor, sondern eine Funktion an $() übergeben, ruft jQuery diese Funktion erst dann auf, wenn der Browser die Webseite vollständig geladen hat. So können Sie in dieser Funktion gefahrlos auf sämtliche Bestandteile einer Webseite zugreifen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        var jParas = $('p'); 
        if (jParas.size() == 1) { 
          var para = jParas.get(0); 
          alert(para.innerHTML); 
        } 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Im obigen Beispiel sehen Sie den typischen Aufbau einer Webseite, die jQuery verwendet. Bevor auf das <p>-Element der Webseite zugegriffen werden kann, soll sichergestellt werden, dass die Webseite komplett geladen wurde. Indem der Zugriff innerhalb der anonymen Funktion erfolgt, die als Parameter an $() übergeben wird, kann es nicht zu Problemen kommen.

Im obigen Beispiel wird auf den einzigen Paragraphen auf der Webseite zugegriffen und jQuery sample ausgegeben. Dabei wird das Browserobjekt, das den Paragraphen repräsentiert, aus dem jQuery-Objekt entnommen, um dann über die nicht-standardisierte, aber von allen gängigen Browser unterstützte Eigenschaft innerHTML den Text im Paragraphen auszugeben.

Neben Funktionen, deren Aufruf nur dann Sinn macht, wenn sich im jQuery-Objekt Browserobjekte befinden, die über die Funktionsaufrufe bearbeitet werden sollen, werden auch andere Funktionen angeboten, die ausschließlich die Objekte verändern, die als Parameter übergeben werden. Derartige Funktionen sind auch als statische Funktionen bekannt: Sie beziehen sich nicht auf das Objekt, für das sie aufgerufen werden. Zu diesen Funktionen gehört zum Beispiel trim().

alert($.trim(' Hallo, Welt! '));

trim() entfernt Leerzeichen, die am Anfang oder Ende eines Strings stehen. Nachdem diese Funktion einen Parameter erwartet, kann sie direkt für $ aufgerufen werden, ohne dass über die Funktion $() HTML-Elemente ausgewählt werden müssen.

3. jQuery und Prototype

Verhindern von Konflikten

In der Javascript-Spezifikation ist angegeben, aus welchen Zeichen Variablen- und Funktionsnamen bestehen dürfen. Während das Dollarzeichen zu diesem Zeichensatz gehört, aus dem Namen gebildet werden dürfen, ist es in der Spezifikation besonders hervorgehoben. So soll es speziell in Code verwendet werden dürfen, der maschinengeneriert ist.

Auch wenn jQuery nicht maschinengeneriert ist, haben sich seine Entwickler entschieden, die Funktion jQuery() auch als $() zur Verfügung zu stellen. Während das allein kein Problem ist, existiert mindestens eine andere Javascript-Bibliothek, die ebenfalls ihre wichtigste Funktion prominent hervorhebt und $() nennt: Prototype. Das führt zu Problemen, wenn jQuery gemeinsam mit Prototype verwendet werden soll.

Das jQuery-Objekt bietet eine Funktion namens noConflict() an, mit der Konflikte bezüglich der Verwendung des Dollarzeichens gelöst werden können. Wenn Sie diese Funktion aufrufen, wird das Dollarzeichen von jQuery nicht als Alias für jQuery() verwendet. Wenn Sie es zum Beispiel gewohnt sind, über $() auf eine Funktion aus einer anderen Javascript-Bibliothek wie Prototype zuzugreifen, sollten Sie noConflict() aufrufen. Für jQuery müssen Sie dann aber entweder jQuery() verwenden oder erstellen eine neue Variable, der Sie den Rückgabewert von noConflict() zuweisen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      var j = jQuery.noConflict(); 
      j(function() { 
        alert($('prototype').innerHTML); 
      }); 
    </script>
  </head>
  <body>
    <p id="prototype">jQuery sample</p>
  </body>
</html>

Im obigen Beispielprogramm wird noConflict() aufgerufen und der Rückgabewert der Variablen j zugewiesen. Damit kann jQuery nicht mehr über $(), sondern nur mehr über jQuery() und j() verwendet werden.

Die $()-Funktion, die im obigen Programm aufgerufen wird, stammt von der Javascript-Bibliothek Prototype. Diese Funktion erwartet einen ID-Wert als Parameter, der deswegen dem <p>-Tag zugewiesen wurde.

Beachten Sie, dass Sie die jQuery-Bibliothek nach allen anderen Javascript-Bibliotheken per <script>-Tag einbinden müssen, damit der Aufruf von noConflict() funktioniert. So wird im obigen Beispiel zuerst Prototype und dann jQuery eingebunden.

4. Selektoren

HTML-Elemente auswählen

Wenn Sie mit jQuery arbeiten, greifen Sie üblicherweise zuerst auf die Funktion $() zu. Sie übergeben ihr einen Selektor, um die HTML-Elemente auszuwählen, die Sie dann in einem zweiten Schritt verarbeiten möchten.

Für den Selektor greift jQuery auf die CSS Spezifikation zu. Denn im CSS-Standard mussten Selektoren definiert werden, die es ermöglichen, HTML-Elemente auszuwählen, um sie zu formatieren. Wenn Sie den CSS-Standard kennen, kennen Sie auch automatisch die Syntax, die jQuery bei Selektoren erwartet.

Die Unterstützung von Selektoren ist in jQuery sehr umfangreich. So werden nicht nur viele Selektoren unterstützt, die im sogenannten Selectors Level 3 für CSS 3 vorgeschlagen wurden. Es stehen darüberhinaus zahlreiche Selektoren zur Verfügung, die von jQuery neu definiert wurden und in der Praxis sehr nützlich sein können. In der jQuery-Dokumentation finden Sie eine vollständige Liste an unterstützten Selektoren.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        alert($('html > :last > :header:contains("sample 1") ~ p[class*="a"]').get(0).innerHTML); 
      }); 
    </script>
  </head>
  <body>
    <h1>jQuery samples</h1>
    <h2>jQuery sample 1</h2>
    <p class="a b">jQuery sample 1a</p>
    <p class="b c">jQuery sample 1b</p>
  </body>
</html>

Im obigen Beispiel wird ein absichtlich kompliziert konstruierter Selektor verwendet, um Ihnen zu zeigen, wie ein HTML-Element ausgewählt werden kann. Die in der Praxis verwendeten Selektoren sind typischerweise kürzer und einfacher zu verstehen. Das Beispiel soll Ihnen lediglich zeigen, welche komplexen Ausdrücke jQuery unterstützt.

Im obigen Selektor wird zuerst das <html>-Element ausgewählt, um dann sämtliche direkten Kindelemente zu selektieren. Über :last werden die Kindelemente gefiltert: Das letzte Kindelement von <html> ist <body>.

Im nächsten Schritt wird auf die Kindelemente von <body> zugegriffen, wobei auch diese gefiltert werden. Zuerst werden mit :header lediglich die Kindelemente ausgewählt, die Überschriften darstellen. Dann werden diese Überschriften gefiltert. Die einzige Überschrift, die den Text enthält, der :contains übergeben wird, ist h2.

Über die Tilde wird auf HTML-Elemente zugegriffen, die sich auf der gleichen Ebene wie h2 befinden. Es werden demnach beide Paragraphen ausgewählt. Weil in eckigen Klammern das class-Attribut daraufhin verglichen wird, ob es den Wert a enthält, werden die Paragraphen nochmal gefiltert.

Wenn Sie obiges Beispielprogramm ausführen, wird jQuery sample 1a ausgegeben.

Übrigens: Die Möglichkeit, HTML-Elemente flexibel über Selektoren auszuwählen, ist inzwischen vom W3C in der Selectors API standardisiert worden. Mehrere Browser unterstützen bereits die entsprechende Funktion querySelectorAll(), der ähnlich wie $() ein Selektor übergeben werden kann. Während querySelectorAll() jedoch nur in den neuesten Browserversionen unterstützt wird, kann der Zugriff per Selektor dank jQuery in allen heute üblicherweise verwendeten Browserversionen erfolgen.

5. Navigation

Von Browserobjekten im jQuery-Objekt zu anderen HTML-Elementen navigieren

Wenn Sie die Funktion $() aufgerufen und ihr einen Selektor übergeben haben, erhalten Sie ein jQuery-Objekt, in dem sich die gefundenen Browserobjekte befinden. Während $() die wichtigste Funktion darstellt, um HTML-Elemente auszuwählen, können Sie auch ausgehend von den Browserobjekten in einem jQuery-Objekt zu anderen HTML-Elementen navigieren. Dazu bietet jQuery eine Reihe von Funktionen an, mit denen von HTML-Elementen auf andere HTML-Elemente zugegriffen werden kann. Diese Funktionen verändern nicht die HTML-Elemente in einer Webseite, sondern ausschließlich die Auswahl an Browserobjekten in einem jQuery-Objekt. In der jQuery-Dokumentation finden Sie eine vollständige Übersicht über Navigationsfunktionen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        alert($().children().children(':last').find(':header').next('p').get(0).innerHTML); 
      }); 
    </script>
  </head>
  <body>
    <h1>jQuery samples</h1>
    <h2>jQuery sample 1</h2>
    <p class="a b">jQuery sample 1a</p>
    <p class="b c">jQuery sample 1b</p>
  </body>
</html>

Im obigen Beispielprogramm wird kein Selektor verwendet, um ein HTML-Element der Webseite auszuwählen. Stattdessen wird auf zahlreiche Funktionen zugegriffen, um sich ausgehend vom jQuery-Objekt, das von $() zurückgegeben wird, durch die HTML-Elemente der Webseite zu navigieren.

Wenn kein Selektor an $() übergeben wird, gibt die Funktion ein jQuery-Objekt zurück, das das Browserobjekt document enthält. Somit ist nach einem Aufruf von $() ohne Selektor das <html>-Element ausgewählt.

Der erste Aufruf von children() gibt die beiden Kindelemente <head> und <body> zurück. Genauer gesagt wird ein jQuery-Objekt zurückgegeben, das zwei Browserobjekte enthält, die <head> und <body> repräsentieren.

Der Funktion children() kann optional ein Selektor übergeben werden, was beim zweiten Aufruf geschieht: Indem :last übergeben wird, werden die Kindelemente von <body> ausgewählt.

Im nächsten Schritt wird nach Überschriften innerhalb von <body> gesucht. Während children() nur direkte Kindelemente zurückgibt, findet find() auch HTML-Elemente in tieferen Ebenen.

next() gibt für jedes Browserobjekt das HTML-Element zurück, das sich auf gleicher Ebene hinter dem HTML-Element befindet, das das Browserobjekt repräsentiert. Weil auch next() ein Selektor übergeben werden kann, um HTML-Elemente zu filtern, wird im obigen Beispielprogramm der erste Paragraph hinter <h2> zurückgegeben. Die Überschrift <h1> hat zwar ebenfalls ein nachfolgendes HTML-Element auf gleicher Ebene. Dabei handelt es sich aber nicht um einen Paragraphen, sondern um <h2>.

Obiges Programm gibt jQuery sample 1a aus.

6. Manipulatoren

Browserobjekte bearbeiten und verändern

Wenn Sie mit $() und eventuell mit Hilfe der Navigationsfunktionen Browserobjekte erhalten haben, die die HTML-Elemente repräsentieren, die Sie bearbeiten möchten, können Sie eine ganze Reihe an Funktionen verwenden, um die Browserobjekte zu manipulieren. jQuery bezeichnet diese Funktionen als Manipulatoren.

Die Dokumentation der Manipulatoren ist recht übersichtlich. Während die von jQuery angebotenen Manipulatoren browserunabhängig sind, müssen Sie in der Praxis unter Umständen dennoch auf Funktionen zugreifen, die vom W3C standardisiert sind oder nur von bestimmten Browsern angeboten werden. jQuery versucht nicht, sämtliche Browserobjekte und ihre Funktionen neu zu erfinden, sondern stellt lediglich vereinfachte Funktionen zur Verfügung, die dann aber natürlich browserunabhängig sind.

Beachten Sie, dass Sie die Dokumentation von Manipulatoren zum Lesen und Schreiben von Attributen auf einer anderen Webseite in der jQuery-Dokumentation finden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        alert($('p:first').text()); 
      }); 
    </script>
  </head>
  <body>
    <h1>jQuery samples</h1>
    <h2>jQuery sample 1</h2>
    <p class="a b">jQuery sample 1a</p>
    <p class="b c">jQuery sample 1b</p>
  </body>
</html>

In allen bisherigen Beispielen in diesem Artikel wurde bisher der Text in einem HTML-Element mit innerHTML ausgegeben. Dabei handelt es sich um eine Eigenschaft, die weder standardisiert ist noch von jQuery angeboten wird. Weil diese Eigenschaft jedoch in allen gängigen Browsern unterstützt wird, wurde sie bisher in den Beispielen verwendet.

jQuery bietet nun einen Manipulator namens text() an, der den Text innerhalb eines HTML-Elements zurückgibt. Da die Funktion text() vom jQuery-Objekt angeboten wird, muss auch nicht mehr mit get() auf ein Browserobjekt im jQuery-Objekt zugegriffen werden. Obiges Programm gibt jQuery sample 1a aus.

Beachten Sie, dass text() der Eigenschaft innerHTML nicht wirklich entspricht. Die Funktion text() ist eher vergleichbar mit der Eigenschaft innerText. Da diese jedoch ausschließlich vom Internet Explorer angeboten wird, wurde in den Beispielen innerHTML vorgezogen. Möchten Sie eine jQuery-Funktion verwenden, die innerHTML entspricht, können Sie html() aufrufen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        alert($('p').text()); 
      }); 
    </script>
  </head>
  <body>
    <h1>jQuery samples</h1>
    <h2>jQuery sample 1</h2>
    <p class="a b">jQuery sample 1a</p>
    <p class="b c">jQuery sample 1b</p>
  </body>
</html>

Da text() für ein jQuery-Objekt aufgerufen werden kann, in dem sich wohlmöglich mehrere Browserobjekte befinden, wird der gesamte Text aller HTML-Elemente, der die Browserobjekte entsprechen, verkettet zurückgegeben. Für obiges Programm bedeutet das, dass jQuery sample 1ajQuery sample 1b ausgegeben wird.

Um CSS-Eigenschaften zu lesen und zu schreiben, steht eine Funktion css() zur Verfügung.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        alert($('p').css('border', 'solid 1px #000').css('border-left-width')); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Im obigen Programm wird um den Paragraphen zuerst ein Rahmen gezeichnet. Im zweiten Schritt wird die Rahmenbreite ausgelesen.

Obiges Programm gibt 1px aus.

7. Positionierung

Positionsangaben und Größen

Um die Position eines HTML-Elements zu erhalten, bietet jQuery Funktionen wie offset() oder position() an. Diese Funktionen können jedoch nicht verwendet werden, um die Position zu ändern.

Wenn sich ein HTML-Element innerhalb eines anderen befindet, das gescrollt werden kann, kann über Funktionen wie scrollTop() und scrollLeft() die Scrollposition sowohl gelesen als auch gesetzt werden.

Um die Breite und Höhe eines HTML-Elements zu erhalten, können die Funktionen width() und height() aufgerufen werden. Je nachdem, ob Rahmen und Abstände berücksichtigt werden sollen, stehen auch innerWidth(), outerWidth(), innerHeight() und outerHeight() zur Verfügung. Ausschließlich width() und height() können sowohl zum Lesen als auch Schreiben verwendet werden.

Die Dokumentation der Funktionen zu Positionsangaben und Größen enthält eine Übersicht über alle angebotenen Funktionen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        alert($('p').width()); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Wenn Sie obiges Programm ausführen, wird die Breite des Paragraphen in Pixel ausgegeben. Die Breite hängt von der Größe des Browserfensters ab. Viel wichtiger ist jedoch, dass tatsächlich ein Zahlenwert zurückgegeben wird, obwohl die Breite des Paragraphen nicht explizit gesetzt wurde.

8. Effekte

Kleinere Animationen

Während Sie mit den kennengelernten Manipulatoren HTML-Elemente dynamisch verändern können, stehen einige Funktionen zur Verfügung, um besondere Effekte zu erzeugen. Dabei werden HTML-Elemente schrittweise verändert, um kleinere Animationen abzuspielen. Zu diesen Animationen zählt zum Beispiel ein weiches Ein- und Ausblenden von HTML-Elementen. In der Dokumentation finden Sie eine Übersicht über die angebotenen Effekte.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').fadeOut(1000); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Im obigen Beispielprogramm wird nach dem Laden der Webseite der Paragraph innerhalb von einer Sekunde ausgeblendet, indem fadeOut() aufgerufen und der Funktion die Zahl 1000 übergeben wird.

Die Animationen erfolgen, indem verschiedene Eigenschaften von HTML-Elementen schrittweise geändert werden. Da alle Eigenschaften unterstützt werden, die auf Zahlenwerten basieren, bietet jQuery mit animate() eine Funktion an, mit der beliebige Animationen erstellt werden können.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').animate({ 
          fontSize: '3em' 
        }, 1000).fadeOut(1000); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

animate() muss ein Objekt übergeben werden, dessen Schlüssel CSS-Eigenschaften entsprechen. CSS-Eigenschaften, deren Namen Bindestriche enthalten, müssen in der sogenannten CamelCase-Schreibweise angegeben werden: Der Bindstrich wird gelöscht, und der erste Buchstabe nach dem Bindestrich groß geschrieben.

Im obigen Programm wird die Schrift des Paragraphen innerhalb von einer Sekunde auf die dreifache Größe aufgeblasen, bevor der gesamte Paragraph dann wiederum innerhalb einer Sekunde ausgeblendet wird. Der mehrfache Aufruf von Effekt-Funktionen führt dazu, dass diese Effekte nacheinander ausgeführt werden.

Beachten Sie, dass jQuery keine Animationen bezüglich Farben unterstützt. Dazu muss ein jQuery-Plug-In wie Color Animations verwendet werden.

9. Ereignisse

Auf Ereignisse reagieren

Wenn Sie die Beispiele in diesem Artikel ausführen, wird jeweils sofort nach dem Laden der Webseite auf jQuery zugegriffen, um HTML-Elemente auszuwählen und zu bearbeiten. In der Praxis ist es oftmals notwendig, nicht nach dem Laden der Webseite, sondern als Reaktion auf bestimmte Ereignisse HTML-Elemente zu ändern - zum Beispiel nach einem Mausklick.

jQuery bietet mit bind() und unbind() zwei Funktionen an, um sogenannte Event-Handler an HTML-Elemente zu binden und wieder zu entfernen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').bind('click', function(e) { 
          $('p').unbind('click'); 
          var s = '<p>'; 
          for (key in e) 
            s += key + ': ' + e[key] + '<br>'; 
          $('p').after(s + '<\/p>'); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Obiges Programm bindet einen Event-Handler für Mausklicks an den Paragraphen. Dazu wird die Funktion bind() aufgerufen und ihr als erster Parameter ein String übergeben, der das Ereignis beschreibt, bei dessen Eintreten die Funktion aufgerufen werden soll, die als zweiter Parameter übergeben wird. Die Dokumentation enthält eine Liste unterstützter Ereignisse.

Die Funktion, die als zweiter Parameter an bind() übergeben wird, ist der Event-Handler. Diesem Event-Handler wird beim Aufruf ein Event-Objekt übergeben. Es handelt sich hierbei nicht um ein Browserobjekt, sondern um ein Objekt, das von jQuery zur Verfügung gestellt wird. So ist es auch möglich, wenn auch selten erforderlich, dieses Event-Objekt selbst zu erstellen:

var e = $.Event("click");

Das Event-Objekt, das von jQuery an Event-Handler übergeben wird, stellt zusätzliche Informationen zum eingetretenen Ereignis zur Verfügung. So existieren zum Beispiel Eigenschaften wie pageX und pageY, die die Position des Mauszeigers in Relation zur linken oberen Ecke des Dokuments zurückgeben.

Obiges Programm liest sämtliche Eigenschaften des Event-Objekts aus und gibt sie in die Webseite aus. Das sind neben pageX und pageY zahlreiche weitere Eigenschaften. Während jQuery sicherstellt, dass das Event-Objekt auf jedem Browser die jeweils gleichen Eigenschaften anbietet, können sich die Werte unterscheiden. Da jQuery auf das Event-Objekt des Browsers zugreift, um die Eigenschaften seines eigenen Event-Objekts zu setzen, hängt es vom verwendeten Browser ab, auf welchen Wert jede einzelne Eigenschaft gesetzt wird. So sollten Sie für browserunabhängigen Code zum Beispiel überprüfen, ob eine Eigenschaften auf null gesetzt ist, bevor Sie versuchen, auf sie zuzugreifen.

Im Event-Handler im obigen Programm wird außerdem mit unbind() der Event-Handler vom Paragraphen gelöst. Es wird also lediglich ein einziger Mausklick auf den Paragraphen bearbeitet.

Möchten Sie wirklich nur auf ein einziges Ereignis reagieren, können Sie statt bind() und unbind() die Funktion one() verwenden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').one('click', function(e) { 
          var s = '<p>'; 
          for (key in e) 
            s += key + ': ' + e[key] + '<br>'; 
          $('p').after(s + '<\/p>'); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Obiges Beispielprogramm reagiert ebenfalls nur einmal auf einen Mausklick auf den Paragraphen. Es ist nicht mehr notwendig, unbind() aufzurufen.

Anstatt darauf zu warten, dass ein Ereignis eintritt, können Sie es auch selbst auslösen. Dazu rufen Sie die Funktion trigger() auf.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').one('click', function(e) { 
          var s = '<p>'; 
          for (key in e) 
            s += key + ': ' + e[key] + '<br>'; 
          $('p').after(s + '<\/p>'); 
        }).trigger('click'); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Wenn Sie obiges Beispielprogramm ausführen, wird nach dem Laden der Webseite nicht nur ein Event-Handler an den Paragraphen gebunden. Es wird anschließend sofort ein Mausklick simuliert.

Wenn Sie sich die Ausgabe der Eigenschaften des Event-Objekts im obigen Beispielprogramm ansehen und sie mit dem vergleichen, was die vorherigen Beispielprogramme in diesem Abschnitt ausgeben, stellen sie fest, dass weniger Eigenschaften in die Webseite geschrieben werden. Der Grund ist, dass beim simulierten Mausklick mit trigger() kein Browserobjekt zur Verfügung steht, von dem Werte übernommen werden können. Die Eigenschaften, die obiges Programm ausgibt, stellen die Rumpfeigenschaften des Event-Objekts dar, die immer vorhanden sind und ausgewertet werden können.

In der DOM-Spezifikation des W3C ist das sogenannte Event-Bubbling definiert. Aufgrund der hierarchischen Struktur von HTML-Dokumenten wird bei einem Ereignis unter Umständen nicht nur der Event-Handler eines, sondern mehrerer HTML-Elemente ausgeführt. Es hängt dabei vom Ereignis ab, ob mehrere Event-Handler ausgeführt werden oder nicht. Der Mausklick ist ein Beispiel für ein Ereignis, das zum Aufruf mehrerer Event-Handler führen kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').one('click', function(e) { 
          alert('p'); 
        }); 
        $('button').one('click', function(e) { 
          alert('button'); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p><button>jQuery sample</button></p>
  </body>
</html>

Wenn Sie obiges Programm ausführen und auf die Schaltfläche klicken, wird zuerst button und dann p ausgegeben. Sie klicken zwar auf die Schaltfläche vom Typ <button>. Da sich diese Schaltfläche jedoch innerhalb des Paragraphen befindet, wird auch dessen Event-Handler ausgeführt.

Sie können das Event-Bubbling stoppen, indem Sie für das Event-Objekt stopPropagation() aufrufen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').one('click', function(e) { 
          alert('p'); 
        }); 
        $('button').one('click', function(e) { 
          alert('button'); 
          e.stopPropagation(); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p><button>jQuery sample</button></p>
  </body>
</html>

Obiges Programm gibt bei einem Mausklick auf die Schaltfläche nur mehr button aus.

Sind mehrere Event-Handler an die Schaltfläche gebunden, werden diese trotz eines Aufrufs von stopPropagation() alle ausgeführt. Möchten Sie wirklich überhaupt keinen Event-Handler mehr ausführen - weder von umgebenden HTML-Elementen noch vom aktuellen HTML-Element - müssen Sie stopImmediatePropagation() aufrufen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('button').one('click', function(e) { 
          alert('button 1'); 
          e.stopImmediatePropagation(); 
        }); 
        $('button').one('click', function(e) { 
          alert('button 2'); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p><button>jQuery sample</button></p>
  </body>
</html>

Obiges Programm gibt ausschließlich button 1 aus.

Beachten Sie, dass jQuery zahlreiche Hilfsfunktionen unterstützt, um das Binden von Event-Handlern zu vereinfachen. So können Sie zum Beispiel einen Event-Handler für einen Mausklick registeren, indem Sie click() aufrufen anstatt den String "click" an bind() zu übergeben.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('button').click(function(e) { 
          alert('button'); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p><button>jQuery sample</button></p>
  </body>
</html>

Neben click() stehen zahlreiche weitere Hilfsfunktionen für andere Ereignisse bereit. In der Dokumentation finden Sie wie üblich eine Übersicht über sämtliche Funktionen zur Ereignisbehandlung.

Beachten Sie, dass sich in allen Event-Handlern das Schlüsselwort this jeweils auf das HTML-Element bezieht, das das Ereignis auslöst. Wenn Sie also zum Beispiel bei einem Mausklick wissen möchten, auf welches HTML-Element geklickt wurde, können Sie auf dieses über this direkt zugreifen. Wahlweise können Sie auch auf die Eigenschaft currentTarget des Event-Objekts zugreifen. jQuery garantiert, dass diese Eigenschaft und this in Event-Handlern auf den gleichen Wert gesetzt sind.

10. Ajax

Webseiten unsichtbar für den Anwender aufrufen

Unter Ajax versteht man das Laden von Webseiten per Javascript, ohne dass die im Browser zu sehende Webseite wechselt. Da genaugenommen keine Webseite geladen werden muss, sondern bei einem Zugriff auf eine URL beliebige Daten vom Server abgerufen werden können, können Daten vom Anwender unbemerkt vom Server geladen werden - und natürlich auch Daten zum Server schicken. Im Folgenden wird daher nicht von Webseiten gesprochen, sondern allgemein von Ressourcen, auf die mit Ajax-Funktionen zugegriffen werden kann.

Aus Sicherheitsgründen gestatten zahlreiche Browser Webseiten ausschließlich eine Verbindung zu dem Server aufzubauen, von dem die Webseite geladen wurde. Wenn Sie Ajax einsetzen möchten, müssen Sie also auf Ihrem Server entsprechende Dienste anbieten. Der Versuch, auf Dienste zuzugreifen, die auf anderen Servern angeboten werden, wird in den meisten Browsern aus Sicherheitsgründen fehlschlagen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('form').submit(function() { 
          var jForm = $(this); 
          $.get(jForm.attr('action'), { q: jForm.find('input[type="text"]').val(), ajax: true }, function(data) { 
            $('body').append('<hr>' + data.replace(/\</g, '&lt;').replace(/\>/g, '&gt;')); 
          }, 'html'); 
          return false; 
        }); 
      }); 
    </script>
  </head>
  <body>
    <form action="http://www.highscore.de/">
      <p>
        <input type="text" name="q">
        <input type="submit" value="Suchen">
      </p>
    </form>
  </body>
</html>

Im obigen Beispielprogramm wird ein Formular zur Verfügung gestellt, das per Ajax auf die Suchfunktion der Highscore-Website zugreift. Diese ist unter der Adresse http://www.highscore.de/ verfügbar und erwartet hinter einem Parameter q das oder die Suchbegriffe.

Während die Suchfunktion über einen herkömlichen Aufruf der Adresse im Browser ausgeführt werden kann und daraufhin eine Webseite mit den gefundenen Resultaten liefert, kann ein zusätzlicher Parameter ajax auf true gesetzt werden, damit nur Resultate geliefert werden - ohne umgebende Webseite. Genau dies wird im obigen Beispiel gemacht.

jQuery stellt eine Funktion namens get() zur Verfügung, über die auf eine Ressource zugegriffen werden kann. Der erste Parameter, der an get() übergeben wird, muss die Adresse der Ressource sein. Beachten Sie, dass Sie für Webanwendungen, die in möglichst vielen Browsern funktionieren sollen, unbedingt eine Adresse angeben müssen, die auf eine Ressource auf dem gleichen Webserver zeigt, von dem die Webseite geladen wurde. Wenn Sie den Hostnamen weglassen und zum Beispiel statt http://www.highscore.de/ einfach nur / angeben, ist dies sichergestellt.

Als zweiter Parameter erwartet get() ein Objekt mit beliebig vielen Schlüssel-Wert-Paaren. Dieses Objekt wird umgewandelt in einen String, der an die Adresse, die als erster Parameter übergeben wurde, verbunden mit einem Fragezeichen angehängt wird. Auf diese Weise wird von jQuery eine Adresse wie http://www.higshcore.de/?q=Suchwort&ajax=true gebildet. Wahlweise können Sie als zweiten Parameter auch direkt einen String angeben.

Der dritte Parameter ist die Funktion, die von jQuery aufgerufen werden soll, wenn die Ressource komplett empfangen wurde. Dabei wird die Ressource als Parameter an diese Funktion übergeben - im obigen Beispiel data genannt. Um was es sich für Daten genau handelt, hängt natürlich von der Ressource ab, auf die zugegriffen wird. Sie können in einem vierten Parameter an get() angeben, welche Daten Sie erwarten. Ist dies so wie oben "html", handelt es sich beim Parameter data um einen String, der HTML enthält.

Wenn Sie obiges Programm ausführen und zum Beispiel nach "Javascript" suchen, wird das Ergebnis - ein HTML-String - in die Webseite eingefügt. Wie Sie dann sehen werden, handelt es sich dabei nicht um den HTML-Code einer komplette Webseite, sondern lediglich um eine Tabelle. Da ein Dienst beliebige Daten zurückgegeben kann, kann eine Webseite auf diese Weise über get() mit dem Server kommunizieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $.ajaxSetup({ timeout: 20000 }); 
        $('form').submit(function() { 
          var jForm = $(this); 
          $.get(jForm.attr('action'), { q: jForm.find('input[type="text"]').val(), ajax: true }, function(data) { 
            $('body').append('<hr>' + data.replace(/\</g, '&lt;').replace(/\>/g, '&gt;')); 
          }, 'html'); 
          return false; 
        }); 
      }); 
    </script>
  </head>
  <body>
    <form action="http://www.highscore.de/">
      <p>
        <input type="text" name="q">
        <input type="submit" value="Suchen">
      </p>
    </form>
  </body>
</html>

Es gibt zahlreiche Parameter, mit denen der Aufruf von Ajax-Funktionen wie get() konfiguriert werden kann. Dazu zählt zum Beispiel die Einstellung, wie lange gewartet werden soll, bevor der Aufruf einer Ressource abgebrochen wird, wenn keine Daten empfangen werden.

jQuery stellt eine Funktion ajaxSetup() zur Verfügung, der Sie ein Objekt bestehend aus beliebig vielen Schlüssel-Wert-Paaren übergeben können. So wird im obigen Beispielprogramm der Timeout für einen Abbruch auf 20 Sekunden gesetzt. Eine Übersicht über alle Ajax-Optionen finden Sie in der Dokumentation.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('form').submit(function() { 
          var jForm = $(this); 
          $.ajax({ 
            data: { q: jForm.find('input[type="text"]').val(), ajax: true }, 
            dataType: 'html', 
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
              $('body').append('<hr>' + textStatus); 
            }, 
            success: function(data) { 
              $('body').append('<hr>' + data.replace(/\</g, '&lt;').replace(/\>/g, '&gt;')); 
            }, 
            timeout: 1, 
            url: jForm.attr('action') 
          }); 
          return false; 
        }); 
      }); 
    </script>
  </head>
  <body>
    <form action="http://www.highscore.de/">
      <p>
        <input type="text" name="q">
        <input type="submit" value="Suchen">
      </p>
    </form>
  </body>
</html>

Neben der Möglichkeit, mit ajaxSetup() Einstellungen für alle Ajax-Funktionen vorzunehmen, die in einem Programm aufgerufen werden, steht mit ajax() eine Low-Level-Funktion zur Verfügung, der Optionen direkt übergeben werden müssen. Das ist zum Beispiel dann hilfreich, wenn im Fehlerfall eine Funktion aufgerufen werden soll. Im Gegensatz zu get() kann eine derartige Funktion in den Optionen für ajax() angegeben werden.

Das obige Beispielprogramm macht grundsätzlich das gleiche wie das vorherige, in dem get() aufgerufen wurde. Die einzigen Unterschiede sind, dass der Timeout auf 1 Millisekunde gesetzt und eine Funktion angegeben wurde, die im Fehlerfall aufgerufen wird. Wenn Sie das Programm ausführen, wird aufgrund des geringen Timeouts mit ziemlicher Sicherheit sofort die Funktion für den Fehlerfall aufgerufen. Diese besitzt drei Parameter, von denen der mittlere - im obigen Programm textStatus genannt - den Grund für den Fehler enthält. So schreibt obiges Programm timeout in die Webseite.

Ajax basiert auf einem Browserobjekt, das in vielen Browsern XMLHttpRequest heißt. Die Sicherheitsbestimmungen verlangen, dass über dieses Browserobjekt ausschließlich auf Ressourcen des Servers zugegriffen werden kann, von dem eine Webseite geladen wurde. Dennoch ermöglicht es jQuery, Ressourcen von anderen Servern zu laden. Diese Zugriffe basieren auf einem Konzept, das als JSONP bekannt ist. Dabei müssen die entsprechenden Server JSONP explizit unterstützen. Es ist also nicht möglich, die Sicherheitsbestimmungen von Ajax auf diese Weise zu umgehen.

Der Trick, auf dem JSONP basiert, ist es, Ressourcen nicht über das XMLHttpRequest-Objekt zu laden, sondern sie über einen <script>-Tag dynamisch in die Webseite einzubinden. Da über <script>-Tags problemlos Dateien von beliebigen Servern in eine Webseite eingebunden werden können, kann auf diese Weise auf Ressourcen auf anderen Servern zugegriffen werden - immer vorausgesetzt, JSONP wird explizit unterstützt. Dazu gehört, dass die geladenen Dateien gültigen Javascript-Code enthalten, damit der Browser die mit dem <script>-Tag geladenen Dateien auch ausführen kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('form').submit(function() { 
          var jForm = $(this); 
          var action = 'http://ajax.googleapis.com/ajax/services/search/web?callback=?'; 
          $.get(action, { q: jForm.find('input[type="text"]').val(), v: '1.0' }, function(data) { 
            var s = ''; 
            $.each(data.responseData.results[0], function(k, v) { 
              s += k + ': ' + v + '<br>'; 
            }); 
            $('body').append('<hr>' + s); 
          }, 'json'); 
          return false; 
        }); 
      }); 
    </script>
  </head>
  <body>
    <form action="http://www.google.com/">
      <p>
        <input type="text" name="q">
        <input type="submit" value="Suchen">
      </p>
    </form>
  </body>
</html>

Google stellt für zahlreiche Dienste Ajax APIs zur Verfügung. So kann zum Beispiel über die Google AJAX Search API auf die Suchmaschine zugegriffen werden. Damit das von Javascript aus in Webseiten funktioniert, die nicht auf dem Google-Server liegen, muss JSONP verwendet werden. Dazu muss lediglich hinter der Adresse, die als erster Parameter an get() übergeben wird, ein "?callback=?" gehängt werden.

Der Parameter callback teilt dem entsprechenden Server mit, nicht einfach nur die gewünschten Daten zu senden, sondern einen Funktionsaufruf zu generieren und die gewünschten Daten als Parameter an diese Funktion zu übergeben. Dies geschieht typischerweise im JSON-Format - so auch bei Google. Damit Google aber weiß, welche Funktion genau aufgerufen werden soll, wird der entsprechende Funktionsname hinter dem Parameter callback übergeben.

Wie Sie sehen wird jedoch hinter callback ein Fragezeichen angegeben. jQuery ersetzt dieses Fragezeichen durch einen Funktionsnamen und leitet den Aufruf an die Funktion weiter, die als dritter Parameter an get() übergeben wird.

Wenn über den <script>-Tag die entsprechende Datei von Google geladen wird, enthält diese einen Aufruf für eine Funktion, die von jQuery intern definiert wurde. Weil diese Funktion den Parameter weiterleitet, ist tatsächlich nicht mehr notwendig als "?callback=?" an die Adresse zu hängen, um die Sicherheitsbeschränkungen von Ajax zu umgehen.

Wenn Sie genau hinsehen, stellen Sie fest, dass außerdem der vierte Parameter von get() auf "json" gesetzt wurde. Das ist notwendig, damit das Fragezeichen hinter dem callback-Parameter von jQuery ersetzt wird.

Wenn Sie obiges Programm ausführen, wird das Objekt, das das erste gefundene Suchergebnis bei Google repräsentiert, in die Webseite geschrieben.

11. Statische Funktionen

Allgemein nützliche Hilfsfunktionen

Statische Funktionen sind Funktionen, die sich nicht auf Browserobjekte beziehen, die sich in einem jQuery-Objekt befinden. Es handelt sich um Funktionen, die genauso gut als freistehende Funktionen hätten definiert werden können, ohne sie mit dem jQuery-Objekt in Verbindung zu bringen. Da sich diese Funktionen nicht auf Browserobjekte in jQuery-Objekten beziehen, stellen sie ein Sammelsurium allgemein nützlicher Funktionen dar, die die Entwicklung von Javascript-Programmen vereinfachen sollen. Die im vorherigen Abschnitt kennengelernten Ajax-Funktionen waren ebenfalls statische Funktionen.

Die statischen Funktionen, die jQuery anbietet, stellen vor allem Hilfsmittel zur Verarbeitung von Arrays dar. Wie üblich finden Sie eine vollständige Übersicht in der Dokumentation.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        var a = [ 1, 99, 1000 ]; 
        var s = 0; 
        $.each(a, function(i) { 
          s += this; 
        }); 
        alert(s); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Eine der häufiger verwendeten statischen Funktionen ist each(). Dieser Funktion wird als erster Parameter ein Array übergeben. Die Funktion, die als zweiter Parameter übergeben wird, wird daraufhin für jeden einzelnen Wert im Array aufgerufen.

Innerhalb der Funktion, die als zweiter Parameter übergeben wird, bezieht sich this auf das Element, für das die Funktion aufgerufen wird. So werden im obigen Beispielprogramm die Zahlen im Array addiert. Über den Parameter i steht jeweils der Index zur Verfügung, der ausgehend von 0 mit jedem Funktionsaufruf um 1 erhöht wird.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('p').click(function(e) { 
          var s = '<p>'; 
          $.each(e, function(k, v) { 
            s += k + ': ' + v + '<br>'; 
          }); 
          $('p').after(s + '<\/p>'); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <p>jQuery sample</p>
  </body>
</html>

Beachten Sie, dass each() als ersten Parameter nicht zwingend ein Array erwartet, sondern ein Array-ähnliches Objekt. Dazu zählen grundsätzlich alle herkömlichen Objekte in Javascript. Während Arrays mehrere Werte speichern, über die each() iteriert, besteht ein Objekt aus mehreren Schlüssel-Wert-Paaren. Wird ein Objekt, das kein Array ist, als erster Parameter übergeben, werden der Funktion, die als zweiter Parameter angegeben ist, Schlüssel und Wert übergeben.

Es existiert auch eine Funktion each(), die auf Browserobjekte in einem jQuery-Objekt angewandt werden kann. Wenn Sie ein jQuery-Objekt haben und für jedes Browserobjekt in diesem jQuery-Objekt eine Funktion ausführen möchten, können Sie each() für das jQuery-Objekt aufrufen und als einzigen Parameter die entsprechende Funktion übergeben. Da es sich bei dieser each()-Funktion nicht um eine statische Funktion handelt, achten Sie darauf, die Funktionen nicht zu verwechseln.

12. Plug-Ins

Erweiterungen mit neuen Funktionen

Auch wenn jQuery zahlreiche nützliche Funktionen anbietet, handelt es sich im Vergleich zu anderen Javascript-Bibliotheken um eine kleine Bibliothek. So werden Sie, wenn Sie mit jQuery arbeiten, hin und wieder Funktionen vermissen, die für Ihre Projekte nützlich wären. Anstatt diese Funktionen selber zu programmieren, sollten Sie zuerst einen Blick ins Plug-In-Repository werfen. Denn jQuery stellt eine Schnittelle für Erweiterungen bereit, mit der sich neue Funktionen dem jQuery-Objekt hinzufügen lassen. Da im Laufe der Zeit unzählige Plug-Ins entwickelt wurden, ist die Chance groß, dass Sie im Plug-In-Repository auf der Suche nach den von Ihnen benötigten Funktionen fündig werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <style type="text/css">
      div { position: absolute; 
            width: 100px; 
            height: 50px; 
            border: 1px solid black; 
            background-color: orange; 
            cursor: move; } 
    </style>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('div').drag(function(e) { 
          $(this).css({ 
            top: e.offsetY, 
            left: e.offsetX 
          }); 
        }); 
      }); 
    </script>
  </head>
  <body>
    <div>jQuery sample</div>
  </body>
</html>

Während jQuery viele Ereignisse unterstützt, fehlt zum Beispiel die Möglichkeit, auf das Ziehen eines Elements zu reagieren. Über die Schnittstelle für Plug-Ins ist es jedoch möglich, eine Funktion drag() dem jQuery-Objekt hinzuzufügen. Da es diesbezüglich bereits ein Plug-In gibt, wird dies für obiges Beispielprogramm verwendet. Es handelt sich hierbei um das Plug-In $.Event.Special.Drag.

Plug-Ins werden in eigenen Script-Dateien zur Verfügung gestellt, die von Ihnen nach der Script-Datei für jQuery eingebunden werden müssen. Sie können auf diese Weise beliebig viele Plug-Ins verwenden.

Das im obigen Beispielprogramm verwendete Plug-In fügt dem jQuery-Objekt nicht nur eine drag()-Funktion hinzu, sondern erweitert auch das Event-Objekt von jQuery um zusätzliche Eigenschaften wie offsetX und offsetY. Damit kann innerhalb des Event-Handlers herausgefunden werden, um wie viele Pixel ein HTML-Element verschoben wurde. Da das Plug-In HTML-Elemente nicht automatisch verschiebt, kann diese Information so wie im obigen Programm verwendet werden, um das HTML-Element entsprechend zu bewegen.

Wenn Sie eigene Plug-Ins erstellen möchten, finden Sie auf der jQuery-Webseite eine Beschreibung der Plug-In-Schnittstelle. Im Wesentlichen müssen Sie das jQuery-Objekt um eine Funktion erweitern, die von Entwicklern, die Ihr Plug-In einsetzen werden, aufgerufen wird. Wie die Funktion mit dem jQuery-Objekt verknüpft wird, hängt davon ab, ob es sich um eine statische Funktion handelt oder nicht.

Im Folgenden soll die Bibliothek SVG_roundies in einem jQuery-Plug-In verpackt werden. Diese Bibliothek kann verwendet werden, um mit SVG-Grafiken HTML-Elementen runde Ecken zu verleihen. Während es genaugenommen notwendig ist, den Code dieser Bibliothek in eine neue Script-Datei zu kopieren und ihn so zu verpacken, dass ein jQuery-Plug-In entsteht, wird im Folgenden das Plug-In in einer Webseite entwickelt.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <style type="text/css">
      div { width: 100px; 
            height: 50px; 
            border: 1px solid black; 
            background-color: orange; } 
    </style>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="SVG_roundies_0.0.2a.js"></script>
    <script type="text/javascript">
      jQuery.fn.roundify = function(rad) { 
        SVG_roundies.addRule(this.selector, rad); 
        return this; 
      } 

      $(function() { 
        $('div').roundify('0px 10px'); 
      }); 
    </script>
  </head>
  <body>
    <div>jQuery sample</div>
  </body>
</html>

Über die Eigenschaft fn kann dem jQuery-Objekt eine neue Funktion hinzugefügt werden, die sich jeweils auf genau die Browserobjekte bezieht, die sich in einem jQuery-Objekt befinden. Die Eigenschaft fn ist lediglich ein Alias für prototype. Soll das jQuery-Objekt um eine statische Funktion erweitert werden, muss die entsprechende Funktion direkt mit jQuery verbunden werden.

Im obigen Beispiel wird das jQuery-Objekt um eine Funktion roundify() erweitert. Der Parameter, der dieser Funktion übergeben werden kann, beschreibt den Radius der Ecken eines HTML-Elements. Er wird im Plug-In an das SVG_roundies-Objekt weitergeleitet, das von SVG_roundies zur Verfügung gestellt wird.

Weil der entsprechenden Funktion addRule() als erster Parameter ein Selektor übergeben werden muss, wird auf die Eigenschaft selector des jQuery-Objekts zugegriffen. Auf diese Weise wird SVG_roundies mitgeteilt, welchen HTML-Elementen runde Ecken hinzuzufügen sind. Da SVG_roundies lediglich die Funktion addRule() anbietet, gibt es keine andere Möglichkeit, den mit jQuery bereits ausgewählten Browserobjekten die runden Ecken direkt hinzuzufügen.

13. jQuery UI

Steuerelemente für grafische Benutzeroberflächen

jQuery UI ist eine Bibliothek, die auf jQuery aufbaut und vor allem Steuerelemente für grafische Benutzeroberflächen zur Verfügung stellt. Dazu zählen zum Beispiel Registerkarten, eine Verlaufsanzeige oder auch ein Kalendersteuerlement. Derartige Steuerelemente bezeichnet jQuery UI als Widgets.

Neben Widgets stellt jQuery UI Interaktionen und Effekte zur Verfügung. Interaktionen sind Fähigkeiten, mit denen HTML-Elemente versehen werden können, um sie zum Beispiel mit der Maus verschieben oder in ihrer Größe ändern zu können. Effekte sind vergleichbar mit denen, die das jQuery-Objekt anbietet und die Sie in diesem Artikel kennengelernt haben.

Während jQuery UI auf der jQuery-Bibliothek aufbaut, handelt es sich nicht bloß um herkömliche Plug-Ins, wie sie im vorherigen Abschnitt vorgestellt wurden. jQuery UI ist eine eigenständige Bibliothek, die eigene Schnittstellen zur Entwicklung von Widgets, Interaktionen und Effekten zur Verfügung stellt.

jQuery UI ist modular aufgebaut. So steht auf der Download-Webseite nicht eine Datei zur Verfügung, die Sie herunterladen können und sämtliche Funktionen von jQuery UI enthält. Sie müssen vielmehr die Widgets, Interaktionen und Effekte auswählen, die Sie einsetzen möchten. Daraufhin wird eine Datei erstellt, die nur das enthält, was Sie brauchen. Das hat den Vorteil, dass die Dateigröße und somit auch Ladezeiten verringert werden.

Im folgenden Beispielprogramm soll das HTML-Element, das im vorherigen Abschnitt dank eines jQuery-Plug-Ins mit der Maus verschoben werden konnte, mit Hilfe eines jQuery UI-Effekts verschiebbar werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <style type="text/css">
      div { position: absolute; 
            width: 100px; 
            height: 50px; 
            border: 1px solid black; 
            background-color: orange; 
            cursor: move; } 
    </style>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('div').draggable(); 
      }); 
    </script>
  </head>
  <body>
    <div>jQuery sample</div>
  </body>
</html>

Um die entsprechende Interaktion mit dem HTML-Element zu ermöglichen, muss die Funktion draggable() aufgerufen werden. Dieser Funktion kann ein Objekt übergeben werden, um die Interaktion zu konfigurieren. So kann zum Beispiel angegeben werden, dass ein HTML-Element nur horizontal oder vertikal bewegt werden kann. Im direkten Vergleich mit dem Plug-In $.Event.Special.Drag, das im vorherigen Abschnitt verwendet wurde, scheint es keinen großen Unterschied zu geben.

jQuery UI bietet sich vor allem dann an, wenn Sie Widgets für eine grafische Benutzeroberfläche wiederverwenden und nicht selbst entwickeln wollen. Während Interaktionen und Effekte auch über zahlreiche Plug-Ins zur Verfügung stehen, sind es Widgets, die jQuery UI empfehlenswert machen. So wird im folgenden Beispielprogramm das Kalendersteuerelement verwendet.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('input').datepicker({ firstDay: 1}); 
      }); 
    </script>
  </head>
  <body>
    <form action="">
      <p>
        <input type="text">
      </p>
    </form>
  </body>
</html>

Das Kalendersteuerlement wird an ein Eingabefeld gebunden und öffnet sich automatisch, wenn Sie das Eingabefeld anklicken. Sie können dann im Kalender blättern und auf einen Tag klicken. Das Datum wird daraufhin ins Eingabefeld eingetragen und das Kalendersteuerelement geschlossen.

Um das Kalendersteuerlement zu konfigurieren, können Optionen in einem Objekt als Parameter übergeben werden. So wird mit firstDay im obigen Beispiel angegeben, dass der Montag der erste Tag der Woche sein soll.

Wenn Sie obiges Programm ausführen und sich das Kalendersteuerelement ansehen, fällt Ihnen sicher die wenig überzeugende Darstellung auf. Das liegt daran, dass obiges Programm kein Theme verwendet.

Themes sind etwas, was alle Widgets von jQuery UI unterstützen. Über Themes kann komfortabel festgelegt werden, wie Widgets angezeigt werden sollen. Denn Widgets definieren zahlreiche Klassen, die die Formatierung per CSS unterstützen. Um die Anwendung von Themes zu vereinfachen, ist es sogar möglich, online über den sogenannten ThemeRoller mit Farben zu experimentieren, um anschließend das fertige Theme herunterzuladen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery sample</title>
    <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet">
    <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
      $(function() { 
        $('input').datepicker({ firstDay: 1}); 
      }); 
    </script>
  </head>
  <body>
    <form action="">
      <p>
        <input type="text">
      </p>
    </form>
  </body>
</html>

Wenn Sie obiges Programm ausführen, wird das Kalendersteuerelement mit einem Theme verwendet. Dazu wurde lediglich mit dem <link>-Tag eine CSS-Datei eingebunden. Ob Sie diese CSS-Datei manuell erstellen oder mit Hilfe des ThemeRollers auf der jQuery UI-Website bleibt Ihnen überlassen.

Copyright © 2009 Boris Schäling