Share
Wenn es einen gibt Schlecht Was bei jQuery so ist, ist das Einstiegsniveau so erstaunlich niedrig, dass es eher diejenigen anzieht, die kein JavaScript-Wissen haben. Das ist einerseits fantastisch. Auf der anderen Seite führt dies jedoch auch zu einem Schimpfwort von ehrlich gesagt widerwärtig schlechtem Code (von dem ich einige selbst geschrieben habe!)..
Aber das ist OK; erschreckend schlechter Code, der sogar Ihre Großmutter zum Keuchen bringen würde, ist ein Durchgang. Der Schlüssel ist, über den Hügel zu klettern, und das werden wir im heutigen Tutorial besprechen.
Beachten Sie, dass die meisten Methoden das jQuery-Objekt zurückgeben. Dies ist äußerst hilfreich und ermöglicht die so häufig verwendete Verkettungsfunktion.
Accentsconagua
$ someDiv .attr ('class', 'someClass') .hide () .html ('neues Zeug'); Da wir wissen, dass das jQuery-Objekt immer zurückgegeben wird, können wir damit manchmal überflüssigen Code entfernen. Betrachten Sie zum Beispiel den folgenden Code:
var someDiv = $ ('# someDiv'); someDiv.hide (); Der Grund, warum wir den Ort des "Cache" speichern
someDivElement gibt an, wie oft der DOM für dieses Element einmal durchlaufen werden muss.
Der obige Code ist vollkommen in Ordnung. Sie können die beiden Linien jedoch genauso gut zu einer Linie kombinieren, während Sie dasselbe Ergebnis erzielen.
var someDiv = $ ('# someDiv'). hide (); Auf diese Weise verstecken wir immer noch das someDiv Element, aber die Methode gibt, wie wir gelernt haben, auch das jQuery-Objekt zurück, auf das dann über verwiesen wird someDiv Variable.
Solange Ihre Selektoren nicht lächerlich schlecht sind, optimiert jQuery diese optimal, und Sie müssen sich normalerweise keine allzu großen Sorgen machen. Trotzdem gibt es einige Verbesserungen, die die Leistung Ihres Skripts ein wenig verbessern können.
Eine solche Lösung ist die Verwendung der finden() Methode, wenn möglich. Der Schlüssel ist weg von jQuery zu zwingen, seine Sizzle-Engine zu verwenden, wenn dies nicht notwendig ist. Sicher wird es Zeiten geben, in denen dies nicht möglich ist - und das ist in Ordnung; Wenn Sie jedoch keinen zusätzlichen Aufwand benötigen, suchen Sie nicht danach.
// Gut in modernen Browsern, obwohl Sizzle $ ('# someDiv p.someClass') startet. "Hide"). Hide (); // Besser für alle Browser, und Sizzle ist nie in Ordnung. $ ('# someDiv'). find ('p.someClass'). hide (); Die neuesten modernen Browser unterstützen
QuerySelectorAll, Damit können Sie CSS-ähnliche Selektoren übergeben, ohne dass dafür jQuery erforderlich ist. jQuery selbst prüft auch diese Funktion.
Ältere Browser, nämlich IE6 / IE7, bieten jedoch verständlicherweise keinen Support. Dies bedeutet, dass diese komplizierteren Selektoren die komplette Sizzle-Engine von jQuery auslösen, die zwar brillant ist, aber mit etwas mehr Aufwand einhergeht.
Sizzle ist eine brillante Masse Code, die ich niemals verstehen kann. In einem Satz muss der Selektor jedoch zuerst in ein "Array" umgewandelt werden, das aus jeder Komponente des Selektors besteht.
// Grobe Vorstellung davon, wie es funktioniert ['#someDiv,' p '];
Dann beginnt es von rechts nach links, jedes Element mit regulären Ausdrücken zu entschlüsseln. Das bedeutet auch, dass der rechte Teil Ihres Selektors so genau wie möglich sein sollte - zum Beispiel ein Ich würde oder Tagname.
Fazit, wenn möglich:
finden() Methode. Auf diese Weise können wir die systemeigenen Funktionen des Browsers verwenden, anstatt Sizzle zu verwenden. Sie können Ihren Selektoren auch einen Kontext hinzufügen, z.
$ ('. someElements', '#someContainer'). hide (); Dieser Code weist jQuery an, eine Auflistung aller Elemente mit einer Klasse von zu umschließen einige Elemente -- das sind Kinder von SomeContainer -- in jQuery. Die Verwendung eines Kontexts ist eine hilfreiche Methode, um die DOM-Durchquerung zu begrenzen. JQuery verwendet jedoch hinter den Kulissen die finden stattdessen Methode.
$ ('# someContainer') .find ('. someElements') .hide (); // HANDLE: $ (expr, context) // (was gerade äquivalent ist zu: $ (context) .find (expr) else return jQuery (context) .find (selector);
$ (das) Ohne Kenntnis der verschiedenen DOM-Eigenschaften und -Funktionen kann dies einfach sein Missbrauch das jQuery-Objekt unnötig. Zum Beispiel:
$ ('# someAnchor'). click (function () // Bleh alert ($ (this) .attr ('id'));); Wenn wir nur das jQuery-Objekt benötigen, müssen wir auf die Anker-Tags zugreifen Ich würde Attribut, das ist verschwenderisch. Besser bei "rohem" JavaScript bleiben.
$ ('# someAnchor'). click (function () alert (this.id);); Bitte beachten Sie, dass es drei Attribute gibt, auf die immer über jQuery zugegriffen werden sollte: "src", "href" und "style". Diese Attribute erfordern die Verwendung von
getAttributein älteren Versionen von IE.
// jQuery Source var rspecialurl = / href | src | style /; //… var special = rspecialurl.test (name); //… var attr =! JQuery.support.hrefNormalized && notxml && special? // Einige Attribute erfordern einen besonderen Aufruf für den IE. Elem.getAttribute (name, 2): elem.getAttribute (name);
Noch schlimmer ist das wiederholte Abfragen des DOM und das Erstellen mehrerer jQuery-Objekte.
$ ('# elem'). hide (); $ ('# elem'). html ('bla'); $ ('# elem'). otherStuff (); Hoffentlich wissen Sie bereits, wie ineffizient dieser Code ist. Wenn nicht, ist das okay. wir lernen alle. Die Antwort ist, entweder eine Verkettung zu implementieren oder den Speicherort von "cachen" #elem.
// Das funktioniert besser $ ('# elem') .hide () .html ('bla') .otherStuff (); // Oder das, wenn Sie es aus irgendeinem Grund bevorzugen. var elem = $ ('# elem'); elem.hide (); elem.html ('bla'); elem.otherStuff (); Bereit Methode Mit jQuery ist es lächerlich einfach zu hören, wann das Dokument zur Bearbeitung bereit ist.
$ (document) .ready (function () // lass uns in heeya aufstehen);
Es ist jedoch sehr wahrscheinlich, dass Sie auf eine andere, verwirrendere Funktion zum Einwickeln gestoßen sind.
$ (function () // lass uns in heeya aufstehen);
Obwohl letzteres etwas weniger lesbar ist, sind die beiden obigen Ausschnitte identisch. Glaub mir nicht Überprüfen Sie einfach die jQuery-Quelle.
// HANDLE: $ (function) // Verknüpfung für das Dokument bereit if (jQuery.isFunction (Selector)) return rootjQuery.ready (Selector);
rootjQuery ist einfach ein Verweis auf die Wurzel jQuery (Dokument). Wenn Sie einen Selektor an die jQuery-Funktion übergeben, wird festgelegt, welchen Selektortyp Sie übergeben haben: Zeichenfolge, Tag, ID, Funktion usw. Wenn eine Funktion übergeben wurde, ruft jQuery dann dessen auf bereit() Methode und übergeben Sie Ihre anonyme Funktion als Selektor.
Bei der Entwicklung von Code für die Verteilung ist es immer wichtig, mögliche Namenskollisionen auszugleichen. Was würde passieren, wenn ein nach Ihrem importiertes Skript auch eine $ Funktion? Schlechte Dinge!
Die Antwort ist, entweder jQuery's aufzurufen kein Konflikt(), oder um Ihren Code in einer selbstaufrufenden anonymen Funktion zu speichern und dann jQuery an sie zu übergeben.
var j = jQuery.noConflict (); // Jetzt anstelle von $ verwenden wir j. j ('# someDiv'). hide (); // Die Zeile darunter verweist auf die $ -Funktion einer anderen Bibliothek. $ ('someDiv'). style.display = 'none'; Seien Sie vorsichtig mit dieser Methode und verwenden Sie sie nicht, wenn Sie Ihren Code verteilen. Das würde den Benutzer Ihres Skripts wirklich verwirren! :)
(function ($) // Innerhalb dieser Funktion bezieht sich $ immer auf jQuery) (jQuery);
Die letzte Parens unten ruft die Funktion automatisch auf - Funktion()(). Beim Aufruf der Funktion übergeben wir jedoch auch jQuery, das dann durch dargestellt wird $.
Bereit Methode jQuery (document) .ready (Funktion ($) // $ bezieht sich auf jQuery); // $ ist entweder nicht definiert oder bezieht sich auf die Funktion einer anderen Bibliothek.
Denken Sie daran - jQuery ist nur JavaScript. Gehen Sie nicht davon aus, dass es die Fähigkeit hat, Ihre fehlerhafte Codierung zu kompensieren. :)
Dies bedeutet, dass wir Dinge wie JavaScript optimieren müssen zum Anweisungen, das gleiche gilt für jQuery jeder Methode. Und warum sollten wir nicht? Es ist nur eine Hilfsmethode, die dann eine zum Aussage hinter den Kulissen.
// Jede Methode der Quelle von jQuery: function (object, callback, args) Variablenname, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction (Objekt); if (args) if (isObj) für (Name im Objekt) if (callback.apply (Objekt [Name], args) === false) break; else for (; i < length; ) if ( callback.apply( object[ i++ ], args ) === false ) break; // A special, fast, case for the most common use of each else if ( isObj ) for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) return object;
someDivs.each (function () $ ('# anotherDiv') [0] .innerHTML + = $ (this) .text ();); otherDiv für jede Iteration var someDivs = $ ('# container'). find ('. someDivs'), Inhalt = []; someDivs.each (function () contents.push (this.innerHTML);); $ ('# anotherDiv'). html (contents.join (")); Auf diese Weise innerhalb der jeder (for) -Methode, die einzige Aufgabe, die wir ausführen, ist das Hinzufügen eines neuen Schlüssels zu einem Array… anstatt das DOM abzufragen, sondern den innerHTML Eigenschaft des Elements zweimal usw.
Dieser Tipp ist generell eher JavaScript-basiert als jQuery-spezifisch. Es ist wichtig zu wissen, dass jQuery schlechte Codierung nicht kompensiert.
Wenn wir gerade dabei sind, ist eine andere Option für diese Art von Situationen die Verwendung von Dokumentfragmenten.
var someUls = $ ('# container'). find ('. someUls'), frag = document.createDocumentFragment (), li; someUls.each (function () li = document.createElement ('li'); li.appendChild (document.createTextNode (this.innerHTML)); frag.appendChild (li);); $ ('# anotherUl') [0] .appendChild (frag); Der Schlüssel hier ist, dass es mehrere Möglichkeiten gibt, einfache Aufgaben wie diese auszuführen, und jede hat ihre eigenen Leistungsvorteile von Browser zu Browser. Je mehr Sie sich an jQuery halten und JavaScript lernen, desto häufiger beziehen Sie sich auf die nativen Eigenschaften und Methoden von JavaScript. Und wenn ja, ist das fantastisch!
jQuery bietet eine erstaunliche Abstraktionsebene, die Sie nutzen sollten. Dies bedeutet jedoch nicht, dass Sie dazu gezwungen werden, seine Methoden zu verwenden. Im obigen Beispielbeispiel verwenden wir beispielsweise jQuery jeder Methode. Wenn Sie lieber eine zum oder während Stattdessen Aussage, das ist auch okay!
Bedenken Sie dabei, dass das jQuery-Team diese Bibliothek stark optimiert hat. Die Debatten über jQuery
jeder()gegen den EingeborenenzumAussage sind dumm und trivial. Wenn Sie in Ihrem Projekt jQuery verwenden, sparen Sie Zeit und verwenden Sie ihre Hilfsmethoden. Dafür sind sie da! :)
Wenn Sie gerade erst anfangen, in jQuery zu graben, werden die verschiedenen AJAX-Methoden, die es uns zur Verfügung stellt, als etwas erschreckend wirken. obwohl sie nicht brauchen In der Tat handelt es sich bei den meisten nur um Hilfsmethoden, die direkt zu ihnen führen $ .ajax.
Lassen Sie uns als Beispiel überprüfen getJSON, So können wir JSON abrufen.
$ .getJSON ('Pfad / zu / Json', Funktion (Ergebnisse) // Callback // Ergebnisse enthält das zurückgegebene Datenobjekt); Hinter den Kulissen ruft diese Methode zuerst auf $ .get.
getJSON: function (url, data, callback) return jQuery.get (url, data, callback, "json");
$ .get kompiliert dann die übergebenen Daten und ruft erneut den "Master" (von Art) auf $ .ajax Methode.
get: function (url, data, callback, type) // Argumente verschieben, wenn das Datenargument weggelassen wurde if (jQuery.isFunction (data)) type = type || Ruf zurück; Rückruf = Daten; Daten = Null; Rückgabe von jQuery.ajax (type: "GET", url: url, data: data, success: callback, dataType: type);
Endlich, $ .ajax leistet eine enorme Menge an Arbeit, um asynchrone Anfragen über alle Browser hinweg erfolgreich durchführen zu können!
Was das bedeutet ist, dass man das genauso gut nutzen kann
$ .ajaxMethode direkt und exklusiv für alle Ihre AJAX-Anfragen. Die anderen Methoden sind einfach Hilfsmethoden, die dies ohnehin tun. Wenn Sie wollen, schneiden Sie den mittleren Mann aus. Es ist in keiner Weise ein wichtiges Thema.
$ .getJSON ('Pfad / zu / Json', Funktion (Ergebnisse) // Callback // Ergebnisse enthält das zurückgegebene Datenobjekt); $ .ajax (Typ: 'GET', URL: 'Pfad / zu / Json'), Daten: Ihre Daten, Datentyp: 'Json', Erfolg: Funktion (Ergebnisse) Konsole.Log ('Erfolg');) ); Sie haben also ein bisschen JavaScript gelernt und gelernt, dass Sie beispielsweise auf Ankertags direkt auf Attributwerte zugreifen können:
var anchor = document.getElementById ('someAnchor'); //anchor.id // anchor.href // anchor.title // .etc Das einzige Problem ist, dass dies scheinbar nicht funktioniert, wenn Sie mit jQuery auf die DOM-Elemente verweisen, oder? Na natürlich nicht.
// schlägt fehl id = $ ('# someAnchor'). Id; Sollten Sie also auf die zugreifen müssen? href Attribut (oder eine andere native Eigenschaft oder Methode für diese Angelegenheit) haben Sie eine Handvoll Optionen.
// OPTION 1 - Verwenden Sie jQuery var id = $ ('# someAnchor'). Attr ('id'); // OPTION 2 - Zugriff auf das DOM-Element var id = $ ('# someAnchor') [0] .id; // OPTION 3 - Verwenden Sie die get-Methode von jQuery. Var id = $ ('# someAnchor'). Get (0) .id; // OPTION 3b - Übergeben Sie keinen Index, um anchorsArray = $ ('. SomeAnchors') zu erhalten. Get (); var thirdId = anchorsArray [2] .id; Das
erhaltenDiese Methode ist besonders hilfreich, da Ihre jQuery-Sammlung in ein Array übersetzt werden kann.
Natürlich können wir für die große Mehrheit unserer Projekte nicht nur Vertrauen Sie bei der Validierung oder bei AJAX-Anfragen auf JavaScript. Was passiert, wenn JavaScript deaktiviert ist? Aus diesem Grund ist es eine übliche Technik, zu ermitteln, ob eine AJAX-Anforderung mit der serverseitigen Sprache der Wahl erfolgt ist.
jQuery macht dies lächerlich einfach, indem ein Header aus dem $ .ajax Methode.
// Header setzen, damit das aufgerufene Skript weiß, dass es sich um ein XMLHttpRequest handelt // Sendet den Header nur, wenn es kein Remote-XHR ist, wenn (! Remote) xhr.setRequestHeader ("X-Requested-With", "XMLHttpRequest"); Mit diesem Headerset können wir nun PHP (oder eine andere Sprache) verwenden, um nach diesem Header zu suchen und entsprechend vorzugehen. Dazu prüfen wir den Wert von $ _SERVER ['HTTP_X_REQUESTED_WITH'].
function isXhr () return $ _SERVER ['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
Ich frage mich immer, warum / wie man es benutzen kann jQuery und $ austauschbar? Um Ihre Antwort zu finden, zeigen Sie die jQuery-Quelle an und scrollen Sie ganz nach unten. Dort sehen Sie:
window.jQuery = Fenster. $ = jQuery;
Das gesamte jQuery-Skript ist natürlich in eine selbstausführende Funktion eingeschlossen, sodass das Skript die Anzahl der globalen Variablen so weit wie möglich begrenzen kann. Dies bedeutet jedoch auch, dass das jQuery-Objekt außerhalb der anonymen Wrapping-Funktion nicht verfügbar ist.
Um dies zu beheben, ist jQuery dem globalen ausgesetzt Fenster Objekt und dabei ein Alias - $ - wird auch erstellt.
HTML5 Boilerplate bietet einen praktischen One-Liner, der eine lokale Kopie von jQuery lädt, wenn aus irgendeinem Grund Ihr CDN ausfällt.
Um den obigen Code zu "formulieren": Wenn window.jQuery nicht definiert ist, muss beim Herunterladen des Skripts vom CDN ein Problem aufgetreten sein. Fahren Sie in diesem Fall auf der rechten Seite von fort && Operator und fügen Sie ein Skript ein, das auf eine lokale Version von jQuery verweist.
Premium-Mitglieder: Dieses Video herunterladen (Muss eingeloggt sein)
Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!
Hinweis:
jQuery.expr [':']ist einfach ein Alias fürjQuery.expr.filters.
Ab jQuery 1.4 können wir nur noch eine einzige Funktion an die übergeben schweben Methode. Vorher sowohl die im und aus Methoden waren erforderlich.
$ ('# someElement'). hover (function () // mouseover, function () // mouseout); $ ('# someElement'). hover (function () // Die toggle () - Methode kann hier verwendet werden, falls zutreffend); Beachten Sie, dass dies kein alter und neuer Deal ist. Oft müssen Sie noch zwei Funktionen an übergeben schweben, und das ist vollkommen akzeptabel. Wenn Sie jedoch nur ein Element (oder ähnliches Element) umschalten müssen, werden beim Übergeben einer einzelnen anonymen Funktion eine Handvoll Zeichen gespeichert!
Ab jQuery 1.4 können wir nun ein Objekt als zweiten Parameter der jQuery-Funktion übergeben. Dies ist hilfreich, wenn neue Elemente in das DOM eingefügt werden müssen. Zum Beispiel:
$ ('') .attr (id: 'someId', className: 'someClass', href: 'somePath.html'); $ ('', id: 'someId', Klassenname: 'someClass', href: 'somePath.html'); Dies spart nicht nur ein paar Zeichen, sondern sorgt auch für saubereren Code. Zusätzlich zu Elementattributen können wir auch jQuery-spezifische Attribute und Ereignisse übergeben, z klicken oder Text.
