jQuery 1.4 setzt auf Tempo
Seite 2: Neuerungen
Neuerungen bei der Ereignisverarbeitung
Hinsichtlich der Events beziehungsweise der Ereignisbehandlung gibt es ebenfalls einige Neuerungen. Interessant ist vor allem die Methode jQuery.proxy(). Vergleichbar ist jQuery.proxy() mit der aus Prototype bekannten bind()-Funktion. Ein Beispiel:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
var obj = {
programm: "Writer",
ausgabe: function() {
alert( this.programm );
$("#bereich").unbind("click", obj.ausgabe);
}
};
//Beide Varianten funktionieren
$("#bereich").click( jQuery.proxy( obj, "ausgabe" ) );
$("#bereich").click( jQuery.proxy( obj.ausgabe, obj ) );
});
/* ]]> */
</script>
Der jQuery.proxy()-Methode übergibt der Webentwickler eine Funktion, deren Kontext er verändern möchte.
jQuery.proxy( Funktion, Kontext )
Die beiden Ereignisse .change() und .submit() wurden normalisiert. Somit verhalten sie sich endlich in allen gängigen Browsern gleich. Um das zu erreichen, hat man das Standardverhalten des Internet Explorer überschrieben. Einen solchen Cross-Browser-Support gibt es übrigens jetzt auch für .focusin(), .focusout(), .mouseenter() und .mouseleave(). Mit ersteren beiden haben die Entwickler zwei neue Events eingeführt. Sie sind größtenteils mit .focus() und .blur() identisch. Die Entwickler haben sie hauptsächlich deswegen eingeführt, um Entwicklern das Schreiben eigener Events zu erleichtern.
Durch die neue .dtach()-Methode lassen sich Elemente aus dem DOM entfernen. Das Besondere dabei: Die an die Elemente gebundenen Eventhandler bleiben hiervon unberührt. Zu erkennen ist das beispielsweise, wenn man ein Element lediglich vorübergehend aus dem DOM löschen möchte. Ebenfalls neu ist die Methode .unwrap(), mit der sich die ein Kindelement umschließenden Elternelemente entfernen lassen. Die Methoden .before(), .after() und .replaceWith() lassen sich nun auf Elemente anwenden, die nicht Teil des DOM sind.
Mit Live-Events arbeiten
Die meisten Events – Ausnahmen bilden lediglich .ready(), .focus() und .blur() – lassen sich als Live-Events nutzen. Sie sind Ereignisse, die sich an alle aktuellen und künftigen Elemente binden lassen. Vor allem die Optionen, die die .live()-Methode zu bieten hat, haben die Entwickler deutlich erweitert. So unterstützt jQuery jetzt Events, die nicht bubbeln. Außerdem können Programmierer explizit festlegen, welchen DOM-Elementen der Eventlistener hinzuzufügen ist. Die .live()-Methode stößt allerdings nicht überall auf Gegenliebe. Vor allem die mangelnde Dokumentation hat Kritik nach sich gezogen – obwohl man zugeben muss, dass sich die Methode vergleichsweise schwer erklären und dokumentieren lässt. Die Kritiker sind der Meinung, sie führe in zahlreichen jQuery-Anwendungen zu fehlerhaftem Code. Allerdings haben die Entwickler die Dokumentation bereits angepasst. Dort sind die Unterschiede zwischen der alten
.live( eventType, handler )
und der neuen Syntax
.live( eventType, eventData, handler )
deutlich zu sehen. Das Problem dürfte ohnehin weniger die Methode an sich als vielmehr das Event-Bubbling-Thema im Allgemeinen sein.
Erweiterung der Setter-Funktionen
Man kann seit einiger Zeit eine Funktion via .attr() übergeben und den Rückgabewert der Funktion in das Attribut aufnehmen. Die Funktion wurde nun auf alle Setter-Funktionen erweitert. Es handelt sich um .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass() und .toggleClass(). Da Setter-Methoden eigene Funktionen enthalten können, lassen sich die Rückgabewerte der Funktionen direkt verarbeiten, sie sind nicht wie bisher zunächst zwischenzuspeichern.
Neue Ajax-Funktionen
Wer Erfahrung mit PHP und Ruby hat, kennt die Arbeit mit verschachtelten (nested) Parametern. In jQuery 1.3 erfolgte die Seralisierung von {foo: ["eins", "zwei"]} durch foo=eins&foo=zwei. Die Serialisierungsvariante funktionierte in der Form, allerdings konnten Single-Element-Arrays den Ansatz nicht nutzen. Durch die neuen verschachtelten Parameter kann man {foo: ["eins", "zwei"]} als "foo[]=eins&foo[]=zwei" serialisieren. Insgesamt gibt es drei unterschiedliche Serialisierungsvarianten:
// Für alle Serialsierungen
jQuery.ajaxSettings.traditional = true;
// Für eine einzelne Serialisierung
jQuery.param( stuff, true );
// Für einen einzelnen Ajax-Request
$.ajax({ data: stuff, traditional: true });
Wer die alte Serialisierungsart benötigt, kann sie auch in jQuery 1.4 nutzen. Dazu muss man lediglich auf die traditionellen Ajax-Einstellungen umschalten, was am einfachsten über jQuery.ajaxSettings.traditional geht. Hinsichtlich der Ajax-Unterstützung stellt die neue Version zusätzliche Funktionen bereit, mit deren Hilfe man deutlich komfortabler als bisher auf DOM-Elemente zugreifen und sie manipulieren kann. Zudem erkennt jQuery automatisch, wenn es sich bei Antworten auf Ajax-Requests um ausführbaren JavaScript-Code oder um JSON (JavaScript Object Notation) handelt. Dank des ebenfalls unterstützten ETags kann der Entwickler mit ifModified: true endlich überprüfen, ob die entsprechende Datei oder das Dokument seit dem letzten Aufruf überhaupt verändert wurden. Selbstverständlich ließ sich JSON in anderen jQuery-Versionen nutzen. jQuery 1.4 geht auf dem Gebiet aber einen Schritt weiter. Denn stellt der Browser einen nativen JSON-Parser bereit, nutzt jQuery ihn. Zusätzlich überprüft jQuery ankommendes JSON, was fehlerhafte Aufrufe verhindern soll.
Um ein striktes Parsen zu erzwingen, verwendet man jQuery.getJSON(). jQuery erkennt JSON automatisch, wodurch es nicht mehr explizit im dataType anzugeben ist.
Traversing
Auch das Auswählen bestimmter Elemente haben die Entwickler vereinfacht. Zu dem Zweck stehen unter anderem die Methoden .nextUntil(), .prevUntil() und .parentsUntil() zur Verfügung. .nextUnitl() ermittelt alle nachfolgenden Geschwister der einzelnen Elemente, allerdings nicht das, das der Selektor ausgewählt hat. Ähnlich arbeitet .prevUntil(). Darüber lassen sich alle vorhergegangenen Geschwister der einzelnen Elemente ermitteln. Hier ist das Element wieder ausgeschlossen, das der Selektor direkt angesprochen hat. Über .nextUntil() kann man die Vorfahren jedes Elements bestimmen. Allerdings gilt auch bei der Methode: Das durch den Selektor ausgewählte Element bleibt außen vor. Mit .hash() gibt es eine Methode, die vom gleichnamigen Filter abstammt. Interessant gestaltet sich hier der Umgang mit Selektoren. Denn genauso wie .toggleClass() kann man nun bei .closet() mehrere Selektoren anwenden.
Neue Effekte
Mit .delay() haben die Entwickler eine Methode in das Framework aufgenommen, dank der man Animationen pausieren lassen kann. Dabei lässt sich die Dauer der Verzögerung explizit festlegen. Erlaubt sind Millisekunden-Angaben sowie die beiden Strings fast und slow. Wichtig ist .delay() zum Beispiel für das Einfügen einer Verzögerung zwischen dem Ein- und Ausblenden von Elementen.
$("bereich").click(function() {
$("div.ueberschrift").slideUp(300).delay(800).fadeIn(300);
$("div.kapitel").slideUp(300).fadeIn(400);
});
Und noch etwas wurde hinsichtlich der Effekte getan: In Animationen lassen sich einzelnen Eigenschaften einzelne Effekte hinzufügen. Dadurch gestaltet sich die Arbeit mit den Effekten deutlich flexibler.
