Share
jQuery 1.4 wurde kürzlich veröffentlicht. Dies war nicht einfach eine Wartungsversion, da einige spekuliert hatten; es gibt viele Neue Funktionen, Verbesserungen und Leistungsverbesserungen in 1.4! In diesem Beitrag werden die neuen Funktionen und Verbesserungen beschrieben, die möglicherweise von Vorteil sind.
Sie können jQuery 1.4 jetzt hier herunterladen: http://code.jquery.com/jquery-1.4.js
Vor 1.4 unterstützte jQuery das Hinzufügen von Attributen zu einer Elementsammlung über das nützliche Hilfsprogramm "attr"Diese Methode kann sowohl an einen Attributnamen und -wert als auch an ein Objekt übergeben werden, das mehrere Attribute angibt. jQuery 1.4 fügt bei der Elementerstellung Unterstützung für die Übergabe eines Attributobjekts als zweites Argument an die jQuery-Funktion hinzu.
Angenommen, Sie müssen ein Ankerelement mit mehreren Attributen erstellen. Mit 1.4 ist es so einfach wie:
Accentsconagua
jQuery ('', id:' foo ', href:' http://google.com ', Titel:' Werde ein Googler ', rel:' external ', Text:' Go to Google! ' ); Sie haben vielleicht das "bemerkt"Text"Attribut - du wirst dich wahrscheinlich fragen, was das dort macht, immerhin gibt es keine"Text"Attribut für Anker! Nun, jQuery 1.4 verwendet seine eigenen Methoden, wenn Sie bestimmte Attribute übergeben. Das oben angegebene Attribut" text "würde jQuery dazu veranlassen, das".Text()"Methode, übergeben" Go to Google! "als einziges Argument.
Ein besseres Beispiel dafür in Aktion:
jQuery ('', id:' foo ', css: fontWeight: 700, Farbe:' green ', klicken Sie auf: function () alert (' Foo wurde angeklickt! '); ); Die "id" wird als reguläres Attribut hinzugefügt, aber die Eigenschaften "css" und "click" lösen den Aufruf der jeweiligen Methode aus. Der obige Code vor der Version 1.4 wäre wie folgt geschrieben worden:
jQuery ('') .attr (' id ',' foo ') .css (fontWeight: 700, Farbe:' green ') .click (function () alert (' Foo wurde angeklickt! ');); Lesen Sie mehr über jQuery (…)
Das neue DOM-Traversal-Arsenal wurde in 1.4 um drei neue Methoden erweitert. "nextUntil","prevBis" und "ElternBis". Jede dieser Methoden durchläuft das DOM in eine bestimmte Richtung, bis der übergebene Selector erfüllt ist. Nehmen wir also an, Sie haben eine Liste mit Früchten:
Sie möchten alle Elemente nach "Apple" auswählen, aber Sie möchten anhalten, sobald Sie "Strawberry" erreichen. Einfacher geht es nicht:
jQuery ('ul li: enthält (Apple)'). nextUntil (': enthält (Pear)'); // Wählt Banane, Traube, Erdbeere Lesen Sie mehr über: prevUntil, nextUntil, ElternUntil
Anstatt mehrere Methoden für die Ereignisbindung miteinander zu verketten, können Sie sie alle in den gleichen Aufruf bringen, wie dies z.
jQuery ('# foo) .bind (click: function () // etwas tun, mouseover: function () // etwas tun, mouseout: function () // etwas tun) Das funktioniert auch mit ".ein()".
Lesen Sie mehr über .bind (…)
Anstatt nur eine Beschleunigungsfunktion für eine einzelne Animation zu definieren, können Sie jetzt eine andere Beschleunigungsfunktion für jede Eigenschaft definieren, die Sie animieren. jQuery enthält zwei Beschleunigungsfunktionen, Swing (Standardeinstellung) und linear. Für andere müssen Sie sie separat herunterladen!
Um eine Beschleunigungsfunktion für jede Eigenschaft anzugeben, definieren Sie die Eigenschaft einfach als Array. Der erste Wert ist der Wert, für den Sie die Eigenschaft animieren möchten, und der zweite Wert ist die zu verwendende Beschleunigungsfunktion:
jQuery ('# foo'). animate (left: 500, oben: [500, 'easeOutBounce'], 2000); Sehen Sie diesen Code in Aktion!
Im optionalen Optionsobjekt können Sie Beschleunigungsfunktionen pro Eigenschaft als Eigenschaftsnamen-Wert-Paare im "specialEasing" -Objekt definieren:
jQuery ('# foo'). animieren (left: 500, top: 500, duration: 2000, specialEasing: top: 'easeOutBounce'); Anmerkung des Herausgebers - Der Autor dieses Artikels, James Padolsey, ist bescheiden. Diese Neuerung war seine Idee!
Lesen Sie mehr über die Beschleunigung von Immobilien
jQuery 1.4 fügt Unterstützung für das Delegieren von "einreichen","Veränderung","Fokus" und "verwischen"Ereignisse. In jQuery verwenden wir die".Leben()"Methode zum Delegieren von Ereignissen. Dies ist nützlich, wenn Sie Ereignisbehandlungsroutinen für viele Elemente registrieren müssen und wenn neue Elemente im Laufe der Zeit hinzugefügt werden können (mithilfe von".Leben()"ist kostengünstiger als die fortlaufende erneute Bindung).
Aber sei vorsichtig! Sie müssen die Ereignisnamen verwenden. "focusin" und "focusout"wenn Sie die Ereignisse" Fokus "und" Unschärfe "delegieren möchten!
jQuery ('input'). live ('focusin', function () // etwas damit tun); jQuery 1.4 bietet eine neue "Proxy"Funktion unter dem jQuery-Namespace. Diese Funktion benötigt zwei Argumente, entweder einen" Gültigkeitsbereich "und einen Methodennamen oder eine Funktion und den beabsichtigten Gültigkeitsbereich. Das Schlüsselwort" this "von JavaScript kann recht schwierig sein. Manchmal haben Sie gewonnen ' Es soll kein Element sein, sondern ein zuvor erstelltes Objekt.
Zum Beispiel haben wir hier ein "App"Objekt, das zwei Eigenschaften hat, ein"clickHandler"Methode und ein Konfigurationsobjekt:
var app = config: clickMessage: 'Hi!' , clickHandler: function () alert (this.config.clickMessage); ;
Das "clickHandler"Methode, wenn aufgerufen wie"app.clickHandler ()" werde haben "App"als Kontext, was bedeutet, dass die"diese"Schlüsselwort wird es Zugriff auf"App". Das funktioniert ganz gut, wenn wir einfach anrufen:
app.clickHandler (); // "Hallo!" wird alarmiert
Versuchen wir es als Event-Handler zu binden:
jQuery ('a'). bind ('click', app.clickHandler); Wenn wir auf einen Anker klicken, scheint er nicht zu funktionieren (es wird nichts gemeldet). Das liegt daran, dass jQuery (und die meisten normalen Ereignismodelle) standardmäßig den Kontext des Handlers als Zielelement festlegen. Das heißt, auf das Element, auf das gerade geklickt wurde, kann über "diese"Aber wir wollen das nicht, wir wollen"diese"eingestellt werden auf"App". Dies kann in jQuery 1.4 nicht einfacher sein:
jQuery ('a'). bind ('click', jQuery.proxy (app, 'clickHandler')); Wenn nun ein Anker angeklickt wird, "Hi!" wird alarmiert!
Die Proxy-Funktion gibt eine "umschlossene" Version Ihrer Funktion zurück mit "diese"Gesetzt, was Sie angeben. Es ist in anderen Zusammenhängen nützlich ist auch, wie Rückrufe zu anderen jQuery Methoden vorbei, oder Plugins.
Lesen Sie mehr über jQuery.proxy
Sie können Ihren Animationswarteschlangen jetzt eine Verzögerung hinzufügen. In der Tat funktioniert dies für jede Warteschlange, aber der häufigste Anwendungsfall wird wahrscheinlich die Warteschlange "fx" sein. So können Sie zwischen den Animationen anhalten, ohne sich mit Rückrufen und Aufrufen zu beschäftigen.setTimeout"Das erste Argument zu".verzögern()"ist die Anzahl von Millisekunden, für die Sie verzögern möchten.
jQuery ('# foo') .slideDown () // Nach unten verschieben .delay (200) // 200 ms lang nichts tun .fadeIn (); // Einblenden Wenn Sie eine andere Warteschlange als die Standardwarteschlange "fx" verzögern möchten, müssen Sie den Namen der Warteschlange als zweites Argument an ".verzögern()".
Lesen Sie mehr über .verzögern(… )
Mit jQuery 1.4 können Sie leicht überprüfen, ob ein Element (oder eine Sammlung) ".hat()"Etwas. Dies ist das programmatische Äquivalent zum Auswahlfilter von jQuery.":hat()". Diese Methode wählt alle Elemente in der aktuellen Sammlung aus, die mindestens ein Element enthalten, das dem übergebenen Selektor entspricht.
jQuery ('div'). has ('ul'); Das würde alle DIV-Elemente auswählen, die UL-Elemente enthalten. In dieser Situation verwenden Sie wahrscheinlich nur den Auswahlfilter (":hat()"), diese Methode ist jedoch immer noch hilfreich, wenn Sie eine Sammlung programmgesteuert filtern müssen.
jQuery 1.4 enthüllt auch die "enthält"Funktion unter dem jQuery-Namespace. Dies ist eine Low-Level-Funktion, die zwei DOM-Knoten akzeptiert. Sie gibt einen Booleschen Wert zurück, der angibt, ob das zweite Element im ersten Element enthalten ist. z.
jQuery.contains (document.documentElement, document.body); // Gibt true zurück - ist innerhalb
Lesen Sie mehr über: .hat(… ), jQuery.contains (…)
Wir hatten die ".wickeln()"Methode für eine Weile. jQuery 1.4 fügt die".auspacken()"Methode, die das komplette Gegenteil tut. Wenn wir die folgende DOM-Struktur annehmen:
Foo
Wir können das Absatzelement wie folgt auspacken:
jQuery ('p'). unwrap (); Die resultierende DOM-Struktur wäre:
Foo
Im Wesentlichen entfernt diese Methode einfach das übergeordnete Element eines Elements.
Lesen Sie mehr über .auspacken (…)
Das neue ".ablösen()"Mit dieser Methode können Sie Elemente aus dem DOM entfernen, ähnlich wie bei".Löschen()Der wichtigste Unterschied zu dieser neuen Methode besteht darin, dass sie nicht die Daten zerstört, die jQuery für dieses Element enthält. Dazu gehören Daten, die über ".Daten()"und alle Event-Handler, die über das Event-System von jQuery hinzugefügt wurden.
Dies kann nützlich sein, wenn Sie ein Element aus dem DOM entfernen müssen, aber Sie wissen, dass Sie es später wieder hinzufügen müssen. Die Event-Handler und alle anderen Daten bleiben erhalten.
var foo = jQuery ('# foo'); // Einen wichtigen Event-Handler binden foo.click (function () alert ('Foo!');); foo.detach (); // Entferne es aus dem DOM //… do stuff foo.appendTo ('body'); // füge es wieder zum DOM hinzu foo.click (); // Warnungen "Foo!" Lesen Sie mehr über .ablösen(… )
Mit jQuery 1.4 haben Sie zwei neue Möglichkeiten, die ".Index()"Methode. Früher konnten Sie nur ein Element als Argument übergeben, und Sie würden erwarten, dass eine Zahl zurückgegeben wird, die den Index dieses Elements in der aktuellen Sammlung angibt.
Wenn Sie keine Argumente übergeben, wird jetzt der Index eines Elements unter seinen Geschwistern zurückgegeben. Nehmen Sie also die folgende DOM-Struktur an:
Wenn Sie auf ein Listenelement klicken, möchten Sie den Index des angeklickten Elements unter allen anderen Listenelementen ermitteln. Es ist so einfach wie:
jQuery ('li'). click (function () alert (jQuery (this) .index ());); Mit jQuery 1.4 können Sie auch einen Selektor als erstes Argument für "angeben..Index()"Wenn Sie dies tun, erhalten Sie den Index des aktuellen Elements in der von diesem Selektor erzeugten Sammlung.
Sie sollten beachten, dass von dieser Methode eine Ganzzahl zurückgegeben wird. Wenn der übergebene Selektor / Element im Dokument nicht gefunden wird, wird -1 zurückgegeben.
Lesen Sie mehr über .Index(… )
Die meisten DOM-Manipulationsmethoden unterstützen jetzt das Übergeben einer Funktion als einziges Argument (oder zweitens im Fall von ".css ()"&".attr ()"). Diese Funktion wird für jedes Element in der Auflistung ausgeführt, um zu bestimmen, was als reeller Wert für diese Methode verwendet werden soll.
Die folgenden Methoden verfügen über diese Fähigkeit:
Innerhalb der Rückruffunktion haben Sie Zugriff auf das aktuelle Element in der Sammlung über "diese"und sein Index über das erste Argument.
jQuery ('li'). html (function (i) return 'Index dieses Listenelements:' + i;); Mit einigen der oben genannten Methoden erhalten Sie auch ein zweites Argument. Wenn Sie eine Setter-Methode aufrufen (wie ".html ()" oder ".attr ('href)") Sie haben Zugriff auf den aktuellen Wert. z.
jQuery ('a'). attr ('href', Funktion (i, currentHref) return currentHref + '? foo = bar';); Wie Sie sehen können, mit dem ".css ()" und ".attr ()"Methoden, würden Sie die Funktion als zweites Argument übergeben, da die erste zur Benennung der zu ändernden Eigenschaft verwendet wird:
jQuery ('li'). css ('color', Funktion (i, currentCssColor) return i% 2? 'red': 'blue';); Mit jQuery 1.4 werden zwei neue Hilfsfunktionen (direkt unter dem jQuery-Namespace gespeichert) hinzugefügt, mit deren Hilfe Sie feststellen können, mit welchem Objekttyp Sie sich befassen.
Erstens gibt es "isEmptyObjectmsgstr "" "Diese Funktion gibt einen booleschen Wert zurück, der angibt, ob das übergebene Objekt leer ist (ohne Eigenschaften - direkt) und vererbt). Zweitens gibt es "isPlainObject", die einen Booleschen Wert zurückgibt, der angibt, ob das übergebene Objekt ein einfaches JavaScript-Objekt ist, d. h." oder "neues Objekt ()".
jQuery.isEmptyObject (); // true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (Fenster); // false jQuery.isPlainObject (jQuery ()); // falsch
Lesen Sie mehr über: isPlainObject (…), isEmptyObject (…)
jQuery's ".am nächsten ()"Die Methode akzeptiert jetzt ein Array von Selektoren. Dies ist nützlich, wenn Sie die Vorfahren eines Elements durchsuchen und nach (mehr als einem) nächstgelegenen Elementen mit bestimmten Eigenschaften suchen möchten.
Darüber hinaus akzeptiert es jetzt einen Kontext als zweites Argument. Dies bedeutet, dass Sie steuern können, wie weit oder wie weit das DOM durchlaufen werden soll. Beide Erweiterungen berücksichtigen seltene Anwendungsfälle, werden jedoch intern effektiv genutzt!
Lesen Sie mehr über .am nächsten (…)
Wie bereits erwähnt, müssen Sie zum Delegieren der Ereignisse "focus" und "blur" diese neuen Ereignisse verwenden, die als "focusin" und "focusout" bezeichnet werden. Mit diesen Ereignissen können Sie Maßnahmen ergreifen, wenn ein Element oder ein Nachkomme eines Elements den Fokus erhält.
jQuery ('form') .focusin (function () jQuery (this) .addClass ('fokussiert');); .focusout (function () jQuery (this) .removeClass ('fokussiert');); Sie sollten auch beachten, dass diese beiden Ereignisse sich nicht ausbreiten ("Blase"); Sie werden gefangen genommen. Dies bedeutet, dass das äußerste Element (Vorfahren) vor dem kausalen Element "Ziel" ausgelöst wird.
Lesen Sie mehr über die focusIn und focusOut Veranstaltungen.
Das war's! Ich habe versucht, die Änderungen zu behandeln, von denen ich denke, dass sie sich auf Sie auswirken werden!
Wenn Sie es noch nicht getan haben, sollten Sie das "14 Tage jQuery", ein großartiges Online-Event, das die Veröffentlichung von jQuery 1.4 markiert, und der vierte Geburtstag von jQuery!
Und vergessen Sie nicht, das Neue auszuprobieren API-Dokumentation!
Wussten Sie, dass Sie bis zu 600 US-Dollar verdienen können, wenn Sie ein PLUS-Tutorial und / oder einen Screencast für uns schreiben? Wir suchen ausführliche und gut geschriebene Tutorials zu HTML, CSS, PHP und JavaScript. Wenn Sie die Möglichkeit haben, wenden Sie sich bitte an Jeffrey unter [email protected].
Bitte beachten Sie, dass die tatsächliche Kompensation von der Qualität des abschließenden Tutorials und des Screencasts abhängt.
