Die versteckten Funktionen von jQuery entdecken

jQuery ist nicht immer so, wie es aussieht. Unter der Oberfläche läuft eine Menge cooles Zeug ab, und es gibt viele Methoden, die nur darauf warten, entdeckt zu werden, und viele potenzielle Verwendungsmöglichkeiten der jQuery-API, die Sie möglicherweise noch nicht in Betracht gezogen haben. In diesem Artikel werde ich Sie durch einige der weniger offensichtlichen Dinge führen, die ich über jQuery entdeckt habe.

1. JQuery verstehen!

Wenn du anrufst 'jQuery' was geschieht?

Die jQuery-Funktion selbst ist sehr einfach:

 jQuery = Funktion (Selektor, Kontext) // Das jQuery-Objekt besteht eigentlich nur aus dem erweiterten Konstruktor des init-Konstruktors. return new jQuery.fn.init (Selektor, Kontext); ;

Unter seiner Skin gibt die jQuery-Funktion (im Allgemeinen als "Wrapper" -Funktion bezeichnet) einfach ein instantiiertes jQuery-Objekt zurück, d. H. Eine Instanz des 'jQuery.fn.init' Konstrukteur.

Dies ist nützlich zu wissen; Mit diesen Informationen wissen wir das jedes Mal, wenn wir anrufen 'jQuery' Wir erstellen tatsächlich ein völlig einzigartiges Objekt mit einer Reihe von Eigenschaften. jQuery ist clever, da es Ihnen ein Objekt gibt, das als Array behandelt werden kann. Jedes Ihrer Elemente (allgemein als "collection" bezeichnet) wird innerhalb eines Objekts unter einem numerischen Index referenziert, genau wie innerhalb eines Arrays. Und jQuery gibt auch dieses Objekt ein 'Länge' Eigenschaft, wie Sie es von einem Array erwarten würden. Dies eröffnet eine Welt voller Möglichkeiten. Zum einen bedeutet dies, dass wir einige Funktionen ausleihen können 'Array.prototype'. jQuery's 'Scheibe' Methode ist ein gutes Beispiel dafür - modifiziert von der Quelle:

 / *… JQuery.fn.extend (… * / slice: function () return this.pushStack (Array.prototype.slice.apply (this, Argumente), "slice", Array.prototype.slice.call (Argumente) .join (",")); , / *… * /

Der Einheimische 'Scheibe' Methode interessiert das nicht 'diese' ist kein echtes Array - es wird alles gut, was eine hat 'Länge' Eigentum und [0], [1], [2] usw.

Es gibt einige andere interessante Eigenschaften in diesem jQuery-Objekt -- '.Wähler' und '.Kontext' wird meistens die Argumente widerspiegeln, in die Sie gehen 'jQuery (…)'.

 var jqObject = jQuery ('a'); jqObject.selector; // => "a"

Wichtig ist, dass Sie mit jQuery manchmal neue jQuery-Objekte erhalten, mit denen Sie arbeiten können. Wenn Sie eine Methode ausführen, die die Sammlung auf irgendeine Weise ändert, z '.Eltern()', Dann ändert jQuery das aktuelle Objekt nicht. es wird dir einfach eine ganz neue geben:

 var originalObject = jQuery ('a'); var anotherObject = originalObject.parents (); originalObject === ein anderesObject; // => falsch

Alle Methoden, die die Sammlung irgendwie zu verändern scheinen, geben ein brandneues jQuery-Objekt zurück. Sie können jedoch weiterhin auf das alte Objekt zugreifen '.Ende()', oder ausführlicher über '.prevObject'.

2. Erzeugung von Brot und Butterelementen

Im Mittelpunkt der DOM-Funktionen von jQuery steht die Syntax der Elementerstellung. 1.4 bringt eine völlig neue Möglichkeit mit, Ihre Elemente schnell und prägnant zu erstellen. Z.B.

 var myDiv = jQuery ('', id:' my-new-element ', Klasse:' foo ', css: Farbe:' rot ', backgrondColor:' #FFF ', border:' 1px solid #CCC ', klicken Sie auf: function () alert ('geklickt!'); , html: jQuery ('', href:' # ', klick: function () // etwas tun return false; ));

Ab 1.4 können Sie ein zweites Argument an die jQuery-Funktion übergeben, wenn Sie ein Element erstellen. Das von Ihnen übergebene Objekt verhält sich größtenteils so, als würden Sie es übergeben '.attr (…)'. JQuery ordnet jedoch einige Eigenschaften den eigenen Methoden zu, z. B. der 'klicken' Die Eigenschaft wird jQuery zugeordnet 'klicken' Methode (die einen Event-Handler für die bindet 'klicken' Veranstaltung) und 'css' Karten zu jQuery 'css' Methode etc.

Um herauszufinden, welche Eigenschaften den Methoden von jQuery entsprechen, öffnen Sie Ihre Konsole und geben Sie ein 'jQuery.attrFn'.

3. Serialisieren Sie Ihre Eingaben

jQuery stellt eine Methode bereit, mit der Sie alle Eingaben in einem oder mehreren Formularen serialisieren können. Dies ist nützlich, wenn Sie Daten über XHR ("Ajax") übermitteln. Es ist schon lange in jQuery, aber es wird nicht oft darüber geredet und so viele Entwickler wissen nicht, dass es da ist. Das Senden eines kompletten Formulars über Ajax mit jQuery könnte nicht einfacher sein:

 var myForm = $ ('# mein-form'); jQuery.post ('submit.php', myForm.serialize (), function () alert ('Daten wurden gesendet!'););

jQuery bietet auch die 'serializeArray' Methode, die mit mehreren Formularen verwendet werden soll, und die 'param' Hilfsfunktion (unter dem jQuery-Namespace), die ein reguläres Objekt übernimmt und eine Abfragezeichenfolge zurückgibt, z.

 var data = Name: 'Joe', Alter: 44, Beruf: 'Web Developer'; jQuery.param (Daten); // => "name = Joe & age = 44 & profession =Web + Entwickler "

4. Alles animieren

jQuery's 'animieren' Die Methode ist wahrscheinlich die flexibelste Methode von jQuery. Es kann verwendet werden, um so ziemlich alles zu animieren, nicht nur CSS-Eigenschaften und nicht nur DOM-Elemente. So würden Sie normalerweise arbeiten 'animieren':

 jQuery ('# box'). animieren (left: 300, top: 300);

Wenn Sie eine zu animierende Eigenschaft angeben (z. 'oben'jQuery prüft, ob Sie etwas mit einer Stileigenschaft animieren ('element.style') und prüft, ob die angegebene Eigenschaft ('oben') ist definiert unter 'Stil' -- Wenn dies nicht der Fall ist, wird jQuery einfach aktualisiert 'oben' auf dem Element selbst. Hier ist ein Beispiel:

 jQuery ('# box'). animieren (top: 123, foo: 456);

'oben' ist eine gültige CSS-Eigenschaft, daher wird jQuery aktualisiert 'element.style.top', aber "foo" ist nicht eine gültige CSS-Eigenschaft, daher wird jQuery einfach aktualisiert 'element.foo'.

Wir können das zu unserem Vorteil nutzen. Nehmen wir zum Beispiel an, Sie möchten ein Quadrat auf einer Leinwand animieren. Zuerst definieren wir einen einfachen Konstruktor und ein 'zeichnen' Methode, die bei jedem Schritt der Animation aufgerufen wird:

 Funktion Square (Cnvs, Breite, Höhe, Farbe) this.x = 0; this.y = 0; this.width = width; this.height = Höhe; this.color = Farbe; this.cHeight = cnvs.height; this.cWidth = cnvs.width; this.cntxt = cnvs.getContext ('2d');  Square.prototype.draw = function () this.cntxt.clearRect (0, 0, this.cWidth, this.cHeight); this.cntxt.fillStyle = this.color; this.cntxt.fillRect (this.x, this.y, this.width, this.height); ;

Wir haben unseren "Square" -Konstruktor und eine seiner Methoden erstellt. Eine Leinwand zu erstellen und sie anschließend zu animieren, könnte nicht einfacher sein:

 // Ein ... kreieren

Dies ist ein sehr einfacher Effekt, zeigt aber die Möglichkeiten eindeutig. Sie können es hier in Aktion sehen: http://jsbin.com/ocida (dies funktioniert nur in Browsern, die den HTML5-Canvas unterstützen)

5. jQuery.ajax Gibt das XHR-Objekt zurück

Die Ajax-Dienstprogrammfunktionen von jQuery ('jQuery.ajax', 'jQuery.get', 'jQuery.post') alle zurückgeben 'XMLHttpRequest' Objekt, mit dem Sie nachfolgende Operationen für jede Anforderung ausführen können. Zum Beispiel:

 var curRequest; jQuery ('button.makeRequest').click (function () curRequest = jQuery.get ('foo.php', Funktion (Antwort) alert ('Data:' + response.responseText););); jQuery ('button.cancelRequest').click (function () if (curRequest) curRequest.abort (); // Abbruch () ist eine Methode von XMLHttpRequest;

Hier stellen wir immer eine Anfrage 'Anfrage stellen' Die Schaltfläche wird angeklickt - und die aktive Anforderung wird abgebrochen, wenn der Benutzer auf die Schaltfläche klickt 'Anfrage abbrechen' Taste.

Eine weitere mögliche Verwendung ist für synchrone Anforderungen:

 var myRequest = jQuery.ajax (url: 'foo.txt', async: false); console.log (myRequest.responseText);

Lesen Sie mehr über die 'XMLHttpRequest' Sie sollten auch die Ajax-Dienstprogramme von jQuery überprüfen.

6. Benutzerdefinierte Warteschlangen

jQuery verfügt über einen integrierten Warteschlangenmechanismus, der von allen Animationsmethoden (die alle verwendet werden) verwendet wird 'animieren()' Ja wirklich). Diese Warteschlange kann leicht mit einer einfachen Animation veranschaulicht werden:

 jQuery ('a'). hover (Funktion () jQuery (this) .animate (paddingLeft: '+ = 15px'); , function () jQuery (this) .animate (paddingLeft: '- = 15px'); );

Wenn Sie schnell über eine Reihe von Ankern schweben und dann erneut über ihnen schweben, werden die Animationen in eine Warteschlange gestellt und einzeln angezeigt. Ich bin sicher, viele von Ihnen haben diesen Warteschlangeneffekt bereits miterlebt. Wenn nicht, schau es dir hier an: http://jsbin.com/aqaku

Das 'Warteschlange' Methode ist ähnlich der bekannten 'jeder' Methode, wie es heißt. Sie übergeben eine Funktion, die schließlich für jedes Element der Sammlung aufgerufen wird:

 jQuery ('a'). queue (function () jQuery (this) .addClass ('all-fertig '). dequeue (); );

Nur eine Funktion an übergeben 'Warteschlange' bewirkt, dass diese Funktion zum Standard hinzugefügt wird 'fx' Warteschlange, d. h. die Warteschlange, die von allen von jQuery erstellten Animationen verwendet wird. Daher wird diese Funktion nicht aufgerufen, bis alle aktuellen Animationen, die in jedem Element der Auflistung (in diesem Fall alle Anker) vorkommen, abgeschlossen sind.

Beachten Sie, dass wir eine Klasse von hinzufügen 'alles erledigt' in der Funktion oben. Wie bereits erwähnt, wird diese Klasse nur hinzugefügt, wenn alle aktuellen Animationen abgeschlossen sind. Wir rufen auch an 'dequeue' Methode. Dies ist sehr wichtig, Da jQuery mit der Warteschlange fortfahren kann (d. h. es informiert jQuery, dass Sie mit dem fertig sind, was Sie gerade tun). jQuery 1.4 bietet eine weitere Möglichkeit, die Warteschlange fortzusetzen. anstatt zu rufen 'dequeue', Rufen Sie einfach das erste Argument auf, das an Ihre Funktion übergeben wurde:

 jQuery ('a'). Warteschlange (Funktion (nextItemInQueue) // Continue queue: nextItemInQueue (); );

Dies tut genau das Gleiche, auch wenn es etwas nützlicher ist, da es irgendwo in Ihrer Funktion aufgerufen werden kann, selbst in einem Durcheinander von Schließungen (die normalerweise den 'diese' Stichwort). Natürlich konnten Sie vor jQuery-1.4 einfach einen Verweis speichern 'diese', aber das würde etwas ermüdend werden.

Um einer benutzerdefinierten Warteschlange eine Funktion hinzuzufügen, übergeben Sie einfach den Namen der benutzerdefinierten Warteschlange als erstes Argument und die Funktion als zweites.

 jQuery ('a'). Warteschlange ('customQueueName ', function () // erledigen Sie jQuery (this) .dequeue ('customQueueName '); );

Beachten Sie, dass wir den Standard nicht verwenden 'fx' Schlange müssen wir auch den Namen unserer Schlange an den 'dequeue' Methode, damit jQuery mit unserer benutzerdefinierten Warteschlange fortfahren kann.

Lesen Sie mehr über 'Warteschlange', 'dequeue' und 'jQuery.queue'.

7. Namensraum für Ereignisse

Mit jQuery können Sie Namespaceereignisse verwenden, was beim Erstellen von Plugins und Komponenten von Drittanbietern sehr nützlich sein kann. Bei Bedarf kann der Benutzer Ihres Plugins Ihr Plugin effektiv deaktivieren, indem Sie alle registrierten Event-Handler aufheben.

Um bei der Registrierung eines Ereignishandlers einen Namespace hinzuzufügen, müssen Sie dem Ereignisnamen einfach einen Punkt und dann Ihren eindeutigen Namespace (z. B.. '.fooPlugin'):

 jQuery.fn.foo = function () this.bind ('click.fooPlugin', function () // do stuff); this.bind ('Mouseover.fooPlugin ', function () // do stuff); kehre das zurück; ; // Verwenden Sie das Plugin: jQuery ('a'). Foo (); // Zerstöre seine Event-Handler: jQuery ('a'). Unbind ('.fooPlugin ');

Nur den Namensraum an übergeben 'lösen' bindet alle Event-Handler mit diesem Namespace auf.

Fazit

Welche habe ich vermisst? Hilfreiche Funktionen, von denen Sie glauben, dass sie von jQuery nicht gut genug dokumentiert werden? Lass uns in den Kommentaren besprechen!

Code