JQuery 1.4:15 neue Features und Verbesserungen der Optimierung

JQuery 1.4Vor kurzem veröffentlicht eine。 Jenseits aller Erwartungen diesmal ist kein einfaches basteln, 1.4 enthältVielNeue Funktionen, Verbesserungen und Performance-Verbesserungen! Dieser Artikel stellt Ihnen diese neuen Funktionen und Optimierung-Erweiterungen, die für Sie nützlich sein könnten.

JQuery 1.4 Testversion können Sie sofort herunterladen:Http://Code.jQuery.com/jQuery-1.4.js

1. führen Sie auf jQuery (...)

Zuvor kann jQuery übergebenAttrMethode legt die Eigenschaften eines Elements, den Namen und Wert der Immobilie oder das Objekt, das mehrere Gruppen von bestimmten Eigenschaft Name-Wert-Paare enthält. In jQuery 1.4 können Sie ein Parameterobjekt an der jQuery-Funktion selbst, beim Erstellen eines HTML-Elements als zweites Argument übergeben.

Sie möchten beispielsweise ein Ankerelement (a) mit mehreren Eigenschaften erstellen. 1.4 ist alles so einfach:

jQuery('<a/>', {
 id: 'foo',
 href: 'http://google.com',
 title: 'Become a Googler',
 rel: 'external',
 text: 'Go to Google!'
 });

Wie Sie vielleicht denken können, muss dieser Ankerelement eine Text-Eigenschaft, die jQuery private Methode aufruft nicht."(Text)", Legen Sie den Text in das Element, das" Gehe zu Google! "

Für diese Nutzung sind weitere nützliche Beispiele:

jQuery('<div/>', {
 id: 'foo',
 css: {
 fontWeight: 700,
 color: 'green'
 },
 click: function(){
 alert('Foo has been clicked!');
 }
 });

ID ist eine allgemeine Eigenschaft, die direkt, während CSS hinzugefügt, und klicken Sie auf Excite die entsprechende jQuery-Methode. Bis 1,4 muss der obige Code wie folgt geschrieben werden:

jQuery('<div/>')
 .attr('id', 'foo')
 .css({
 fontWeight: 700,
 color: 'green'
 })
 .click(function(){
 alert('Foo has been clicked!');
 });

Erfahren Sie mehr über jQuery (...)

(2) bis I you met...

Weitere 3 neue Methoden der 1.4 DOM ausgedehnten Kit hinzugefügt wurden:NextUntil, PrevUntilUndParentsUntil。 Diese Methoden durchqueren das DOM in eine bestimmte Richtung, bis ein Element, das erfüllt, dass die angegebenen Auswahl gefunden wird. Zum Beispiel, jetzt haben wir eine Liste mit Namen von Obst:

<ul>
 <li>Apple</li>
 
 <li>Banana</li>
 <li>Grape</li>
 
 <li>Strawberry</li>
 <li>Pear</li>
 
 <li>Peach</li>
 </ul>

Wir wollen alle Einträge vor Apple nach Birne herausgreifen. Der Code ist einfach:

JQuery (' Ul li: enthält (Apple) "). NextUntil (": enthält (Birne) ');
Die Banane wurde gewählt, Traube, Erdbeere

Erfahren Sie mehr über:PrevUntil,NextUntil,ParentsUntil

3. binden Sie mehrere Event-Prozessoren

Es muss nicht mehr "die verschiedenen Ereignismethoden Bindung Kette", und jetzt Sie können bündeln sie in einen Haufen wie folgt:

jQuery('#foo).bind({
 click: function() {
 // do something
 },
 mouseover: function() {
 // do something
 },
 mouseout: function() {
 // do something
 }
 })

Hierfür gilt auch für die "(Ein)".

Erfahren Sie mehr über. binden (...)

4. Geben Sie die Lockerung Wirkung nach dem Attribut

Bisher konnten Sie nur eine langsame Wirkung für eine Animation angeben (Lockerung, was ist das Gesetz der Geschwindigkeitsänderung während der Animation. JQuery Native unterstützt zwei Arten von Lockerung Effekte, swing (Standard) und linear. Um andere Effekte zu verwenden, müssen SieSeparat herunterladen。 ), Können Sie nun verschiedene Lockerung Effekte für jede Eigenschaft Parameter der Animation festlegen:

jQuery('#foo').animate({
 left: 500,
 top: [500, 'easeOutBounce']
 }, 2000);

Klicken Sie hier, um zu sehen, den eigentlichen Effekt

Sie können auch eine Reihe von Name-Wert-Paare für SecialEasing in ein optionales Animation-Option-Objekt für die oben genannten Arbeiten festlegen:

jQuery('#foo').animate({
 left: 500,
 top: 500
 }, {
 duration: 2000,
 specialEasing: {
 top: 'easeOutBounce'
 }
 });

Anmerkung des Herausgebers: Unser Autor, James Padolsey, ist bescheiden, und dieses Feature Punkt ist, was er sich einfallen lassen!

Erfahren Sie mehr über pro-Eigenschaft-Lockerung der Inhalte

5. aktualisierte Live-Events!

JQuery 1.4 hinzugefügt, um die ZuordnungSenden,er,FokusUndUnschärfeDie Unterstützung für die Veranstaltung. In jQuery, nutzen wir die "(Live)"Methode, um Ereignisse zuordnen. Dies ist nützlich, wenn Sie Event-Prozessoren für mehrere Elemente registrieren möchten. Und selbst wenn die Elemente, die die Auswahl entsprechen entstehen, werden diese Ereignisse weiterhin gültig sein (unter Verwendung der(Live)Sparen Sie mehr Zeit als ständig wiederholende Bindungen).

Aber aufgepasst!Bei der Registrierung für Schärfe und Unschärfe Veranstaltungen müssen Sie verwenden dieFocusInUndFocusoutWie der Name des Ereignisses.

jQuery('input').live('focusin', function(){
 // do something with this
 });

6. Funktion Kontext

JQuery 1.4 bietet ein ganz neuesProxyFunktion, unter den jQuery-Namespace befindet. Diese Funktion nimmt zwei Parameter, Umfang oder den Namen einer Methode ist und andererseits ist eine Funktion oder Ziel Bereich (der beabsichtigten Umfang).

Wie wir alle wissen, ist JavaScript Schlüsselwort this eine schwierige Sache zu erfassen. Manchmal wollen Sie es nicht, ein Element dar, aber Sie möchten ein Objekt darzustellen, die Sie zuvor erstellt.

Hier zum Beispiel wir erstellt einAppGegenstand ist, verfügt über zwei Eigenschaften und eineClickHandlerMethode ist, das Objekt, das für Parameterkonfiguration verantwortlich ist.

var app = {
 config: {
 clickMessage: 'Hi!'
 },
 clickHandler: function() {
 alert(this.config.clickMessage);
 }
 };

DiesesClickHandlerMethode, wann(App.clickHandler)Wenn auf diese Weise aufgerufen,AppIst der Kontext, was, dass bedeutetdasDas Schlüsselwort verweist auf dieApp。 Benötigen Sie nur nennen es einfach, ist es nichts falsch mit diesem Schreiben:

app.clickHandler(); // "Hi!" is alerted

Aber wenn Sie es als Event-Prozessor vorstellen:

jQuery('a').bind('click', app.clickHandler);

Wenn wir auf diesem Anker klicken, nicht es den gewünschten Effekt (nichts, die Warnung kommt) erreichen. Dies ist, weil jQuery (und die meisten vernünftigen Ereignismodelle) Standard, gibt den Kontext des Prozessors als das Zielelement selbst. Andere WörterDies entspricht genau den Link, der geklickt wurde. Und was wir denken,thisSollten weiterhin vertretenapp。 In jQuery 1.4 ist dies ein einfaches Ziel:

jQuery('a').bind(
 'click',
 jQuery.proxy(app, 'clickHandler')
 );

Klicken Sie nun auf alle Anker und der "Hi!" wird eingeblendet. A

Die Proxy-Funktion wickelt Ihre Funktion in einen Kreis beim Einsetzen der Innenseite der FunktiondasLegen Sie für das, was Sie wollen. Proxy-Funktionen können auch in anderen Kontext-Szenarien, wie Sie Callback-Funktionen an andere jQuery-Methoden oder Plug-ins übergeben nützlich sein.

Erfahren Sie mehr überJQuery.proxy

(7) Animation Warteschlange Latenz

Sie können jetzt eine Verzögerung der Animation-Warteschlange hinzufügen. Obwohl diese Funktion in jeder Warteschlange implementiert werden kann, ist die am häufigsten verwendete Möglichkeit, die "FX-Queue" verzögern ("FX" Warteschlange, Jquery-Standard-Animation-Warteschlange). Es ermöglicht Ihnen, die pause zwischen zwei Animationsverhalten ohne Einbeziehung einer Callback-Funktion undSetTimeoutEtwas ähnliches.(Verzug)Der erste Parameter ist die Anzahl der Millisekunden Wartezeit müssen Sie festlegen:

jQuery('#foo')
 .slideDown() // Slide down
 .delay(200) // Do nothing for 200 ms
 .fadeIn(); // Fade in

Wenn Sie eine Warteschlange als der FX verzögern möchten, übergeben Sie den Warteschlangennamen als zweiten parameter(Verzug) wird alles in Ordnung sein.。

Erfahren Sie mehr überVerzug (...)

8. erkennen Sie, ob das Element bestimmte Inhalte enthält

JQuery 1.4 lässt erkennen, ob ein Element (oder Kollektion) enthält)Hat)) Ist etwas einfacher. Der Mechanismus dahinter und die Auswahl von Filtern: Hat)Ist das gleiche. Diese Methode wählt Elemente aus der aktuellen Kollektion, die eines der willkürlichen festgelegten Kriterien erfüllen.

jQuery('div').has('ul');

Diese Aussage singles aus denjenigen, die UL-Elemente in alle DIV-Elemente enthält. Diese Situation kann mit einen Auswahlfilter verwendet werden: Hat)Nur gut, aber wenn du gehst, um den Auswahlsatz mehr programmatisch zu filternHat)Methode ist sehr nützlich.

JQuery 1.4 fügt auch eine neue unter den jQuery-namespaceEnthältFunktion. Dies ist ein Vergleich der zugrunde liegenden Funktionen, zwei DOM-Knoten als Parameter akzeptieren. Gibt einen booleschen Wert, der angibt, ob das zweite Element in das erste Element enthalten ist. Zum Beispiel:

JQuery.contains (document.documentElement, document.body);
Return True-die Liste ist in der Tat enthalten der

Verständnis der Botschaft:Hat (...),JQuery.contains (...)

9. ziehen Sie die Elemente!

Vor langer Zeit durfte jQuery verwendenWickeln)Wickeln Sie eine Schicht der Haut, den Yuan. Nun hat jQuery 1.4 hinzugefügt. Packen (aus)Methode zum Peeling. Schauen Sie sich die DOM-Struktur unten:

<div>
 <p>Foo</p>
 </div>

Eine Schicht der Haut (Div) außerhalb des P-Elements abzuziehen:

jQuery('p').unwrap();

Der DOM wird:

<p>Foo</p>

Zusammenfassend lässt sich sagen entfernt diese Methode das übergeordnete Element eines Elements.

Erfahren Sie mehr über. Packen Sie aus (...)

10. Entfernen Sie das Element ohne Löschen der Daten

Früher gab es eineEntfernen)Methode ist, ziehen Sie die Elemente und verwerfen. Ganz neu.Lösen)Methode können Sie ein Element aus dem DOM zu schälen, ohne Daten zu verlieren. Das jQuery-Objekt, das das Element enthält behält das Element, nachdem der Vorgang abgeschlossen ist. Daten durch geführt werden können die(Daten)Oder jeder Veranstaltung-Prozessor in der jQuery-Event-System wird in das jQuery-Objekt übergeben.

Diese Funktion kann nützlich sein, wenn Sie ein Element aus dem DOM zu entfernen und dann wieder in ein Zukunftsszenario müssen. Das Ereignishandle und alle anderen Daten für das Element bleiben erhalten.

Var Foo = jQuery ("#foo");
 
Einen wichtiges Ereignis-Prozessor zu binden
Foo.Click (Funktion () {}
Alert ('Foo!");
});
 
(Foo.Detach); Vom DOM entfernt
... Dinge zu tun
 
Foo.appendTo ("Körper"); Zurück zum DOM
 
(Foo.Click); Popup-Warnmeldung: "Foo!"

Erfahren Sie mehr überLösen Sie (...)

Erweiterte Funktionalität des Index (...)

JQuery 1.4 ist für Sie zu nutzen. (Index)Zwei neue Methoden stehen zur Verfügung. Bisher mussten Sie das Element als Parameter an es übergeben, und dann einen zurückgegebenen Wert, der die Index des Elements in der aktuellen Kollektion darstellt. Jetzt, wenn der Parameter nicht übergeben wird, ist der zurückgegebene Wert ein Element, das in seinen Kollegen Reihen wie alt sind. Zum Beispiel die folgenden DOM:

<ul>
 <li>Apple</li>
 
 <li>Banana</li>
 <li>Grape</li>
 
 <li>Strawberry</li>
 <li>Pear</li>
 
 <li>Peach</li>
 </ul>

Sie wollen wissen, dass nach einem Klick auf einen Eintrag, es das erste in der Liste ist, und der Code implementiert sehr einfach ist:

jQuery('li').click(function(){
 alert( jQuery(this).index() );
 });

JQuery 1.4 können auch Sie mit Selektoren als. (Index)Der erste Parameter von der. Damit kehrt den Index-Wert des aktuellen Elements in der Auflistung von Elementen, die der Selektor von den Ihnen angegebenen übereinstimmt.

Es wird auch darauf hingewiesen, dass diese Methode einen numerischen Wert zurückgibt, der den Wert 1 zurückgibt, wenn das Element an der angegebenen Bedingung im Dokument gefunden werden kann.

Erfahren Sie mehr über. Index (...)

DOM-Manipulation kann Callback-Funktionen erhalten.

Die meisten DOM-Manipulation-Methoden unterstützen nun die Einführung von Funktionen als einzigen Parameter (. (CSS)Und. (Attr)Übergeben als zweiten Parameter). Diese Funktion führt jedes Element in der Auswahl, wodurch einen "personalisierten" Wert für die entsprechende Methode der Manipulation.

Dieses Feature unterstützt die folgenden Methoden:

• Nach
• Vor
• Anhängen
• Voranstellen
• Ausschneiden
• ToggleClass
• RemoveClass
• wickeln
• WrapAll
• WrapInner
• Val
• Text
• ErsetzeDurch
• CSS
• Attr
• HTML

Mit der Callback-Funktion können Sie bei der Wahl ihrer Konzentration.dasSchlüsselwort, um Zugriff auf das aktuelle Element, und verwenden Sie den ersten Parameter der Callback-Funktion, um dessen Indexwert bitten.

jQuery('li').html(function(i){
 return 'Index of this list item: ' + i;
 });

Darüber hinaus bieten einige der oben genannten Methoden auch einen zweiten Parameter für Sie zu nutzen. Wenn Sie eine Set Trainingsmethode (z. B. anrufen. HTML)Und. Attr ("Href)), Kann man den aktuellen Wert. Zum Beispiel:

jQuery('a').attr('href', function(i, currentHref){
 return currentHref + '?foo=bar';
 }); 

Wie Sie sehen können, für. (CSS)Und. (Attr)Methode, wird die Funktion als zweiten Parameter übergeben, da der erste Parameter ist die Eigenschaft angeben muss geändert werden:

jQuery('li').css('color', function(i, currentCssColor){
 return i % 2 ? 'red' : 'blue';
 });

13. bestimmen Sie den Typ des Objekts

JQuery 1.4 fügt zwei neue Zusatzfunktionen (alle direkt unter der jQuery-Namespace), die Ihnen helfen können welche Objekte zu identifizieren, die Sie bearbeiten.

Die erste Funktion istIsEmptyObject, Es gibt einen booleschen Wert, der bestimmt, ob das Objekt ist leer () zurück. Das zweite istIsPlainObject, Der boolesche Wert zurückgegeben stellt ein einfaches Objekt (einfaches Objekt), die letzten Parameter für JavaScript, das heißt, geht mit der{} Odernew Object()Das Objekt, das erstellt wurde.

jQuery.isEmptyObject({}); // true
 jQuery.isEmptyObject({foo:1}); // false
 
 jQuery.isPlainObject({}); // true
 jQuery.isPlainObject(window); // false 
 jQuery.isPlainObject(jQuery()); // false

Erfahren Sie mehr über:IsPlainObject (...),IsEmptyObject (...)

Nächste Erweiterungen (...)

JQuery. Nächste)Methode kann jetzt eine Reihe von Auswahlen als Parameter akzeptieren. Wenn Sie die Vorgesetzten des Elementes durchqueren müssen, findenMehr als eineDiese Funktion kann nützlich sein, wenn Sie die neuesten Elemente der eine bestimmte Funktion zu erfüllen.

Es kann Rahmen auch jetzt akzeptieren, als zweiten Parameter, was bedeutet, dass Sie die Tiefe oder die Entfernung der DOM-Traversal steuern können. Zwar ist es selten, dass Sie diese beiden neuen Funktionen nutzen, sobald die Wirkung erstaunlich ist!

Erfahren Sie mehr über. Nächste (...)

15. neue Events! FocusIn und focusOut

Wie bereits erwähnt, wenn Sie den Fokus bereitstellen und Veranstaltungen jetzt zu verwischen, müssen Sie Focusin und Focusout für diese beiden neuen Ereignisse verwenden. Diese beiden Ereignisse helfen Ihnen, Maßnahmen zu ergreifen, wenn ein bestimmtes Element oder ein untergeordnetes Element des Elements bekommt/den Fokus verliert.

jQuery('form')
 .focusin(function(){
 jQuery(this).addClass('focused');
 });
 .focusout(function(){
 jQuery(this).removeClass('focused');
 });

Es ist erwähnenswert, dass diese beiden Ereignisse nicht verbreitet werden (die so genannte "bubbling"), sie werden gefangen genommen. Das heißt, wird das externe Element (übergeordneten) vor dem "Ziel" Element der Bosheit (kausale "" Objektelemente) ausgelöst.

Erfahren Sie mehr überFocusInUndFocusOutDer Inhalt der Veranstaltung.

JQuery 1.4 verlieben! Die durchdachteste in Geschichte, die vielseitigste, die beste Leistung jQuery!

Das wars... Ich habe einige der neuen Funktionen abgedeckt, die wohl den größten Einfluss auf Sie gehabt haben.

Wenn Sie es noch nicht kennen, werfen Sie einen Blick auf sie."Tage von jQuery"Event, ein tolles Online-Event zur Feier der Veröffentlichung von jQuery 1.4 und jQuery vier Geburtstag. Zeigen Sie stolz schrieb Sie mit jQuery und gewinnen Sie das Recht zur Nutzung des Mainframes für ein Jahr MediaTemple zu!

Außerdem lassen Sie sich nicht gehen und schauen Sie sich die brandneue.API-Dokumentation!

Urheber:James Padolsey

Original-Adresse:Http://net.tutsplus.com/Tutorials/JavaScript-Ajax/jQuery-1-4-released-the-15-New-Features-You-Must-Know/

Nachdruck muss die Quelle beibehalten.