Teilen Sie dies:
Ein grundlegender Leitfaden für JQuery für Javascript-Programmierer
JQuery ist eine der beliebtesten JavaScript-Bibliotheken der Welt (Was ist JavaScript? Was ist JavaScript und kann das Internet ohne es existieren? Was ist JavaScript und kann das Internet ohne es existieren?) JavaScript ist eines der Dinge, die viele als selbstverständlich betrachten Jeder benutzt es. Lesen Sie mehr). Zum Zeitpunkt seiner Gründung wird JavaScript (wird als bezeichnet JS von hier an in) war an einem ganz anderen Ort. Am 14. Januar 2006 wurde jQuery bei BarCampNYC angekündigt. JS fehlte immer noch etwas - Browser unterstützten alle Teile davon, aber es mussten viele Hacks und Workarounds implementiert werden, um die Compliance zu gewährleisten.
JQuery kam und veränderte alles. JQuery machte es sehr einfach, Browser-kompatiblen Code zu schreiben. Sie könnten Webseiten animieren, ohne einen Abschluss in Informatik zu haben - hurra! Zehn Jahre später ist jQuery immer noch König, und wenn Sie es noch nie verwendet haben, was können Sie damit tun??
Sie möchten nicht nur Ihre JavaScript-Kenntnisse auf den neuesten Stand bringen, sondern auch einige HTML- und CSS-Tutorials. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Neugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, wie Sie eine Website von Grund auf neu erstellen können, dann haben Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die einen Versuch wert sind. Lesen Sie zuerst mehr, wenn Sie mit ihnen nicht vertraut sind.
Wir haben jQuery Making The Web Interactive eingeführt: Eine Einführung in jQuery Making The Web Interactive: Eine Einführung in jQuery jQuery ist eine clientseitige Skriptbibliothek, die von fast jeder modernen Website verwendet wird - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber es ist die am weitesten entwickelte, am meisten unterstützte und am weitesten verbreitete… Lesen Sie vorher, daher konzentriert sich dieses Handbuch zu JQuery auf das eigentliche Programmieren.
Fertig machen
Sie sind möglicherweise mit der JS-Methode vertraut, mit der Sie IDs aus dem Document Object Model auswählen können (DOM):
document.getElementById ('foo');Nun, JQuery geht noch einen Schritt weiter. Sie müssen keine unterschiedlichen Methoden aufrufen, um Klassen, IDs oder mehrere Elemente auszuwählen. So wählen Sie eine ID aus:
$ ('# bar');Einfach richtig? Es ist genau die gleiche Syntax, um fast jedes DOM-Element auszuwählen. So wählen Sie Klassen aus:
$ ('. baz');Sie können auch kreativ werden für etwas Kraft. Dies wählt alles aus td Elemente in einem Tabelle außer dem ersten.
$ ('table td'). nicht (': first');Beachten Sie, dass die Selektornamen fast genau mit ihren CSS-Gegenstücken übereinstimmen. Sie können Objekte zuweisen regulär JS-Variablen:
var xyzzy = $ ('# parent.child');Oder Sie können jQuery-Variablen verwenden:
var $ xyzzy = $ ('# parent.child');Das Dollarzeichen wird nur verwendet, um anzuzeigen, dass diese Variable ein jQuery-Objekt ist. Dies ist bei komplexen Projekten sehr hilfreich.
Sie können das übergeordnete Element eines Elements auswählen:
$ ('child'). parent ();Oder die Geschwister:
$ ('Kind'). Geschwister ();Sie müssen Ihren Code ausführen, sobald der Browser bereit ist. So tun Sie das:
$ (document) .ready (function () console.log ('ready!'););Mehr Macht
Nun, da Sie die Grundlagen kennen, gehen wir zu etwas komplexerem Material über. Gegeben eine HTML-Tabelle:
Machen Modell Farbe Ford Begleiten Schwarz Mini Cooper rot Ford Cortina Weiß
Angenommen, Sie möchten, dass jede zweite Reihe eine andere Farbe hat (bekannt als Zebrastreifen). Jetzt könnten Sie CSS dafür verwenden:
#cars tr: nth-child (gerade) Hintergrundfarbe: rot; 
So konnte das mit jQuery erreicht werden:
$ ('tr: even'). addClass ('even');Dies wird das gleiche Ziel erreichen, vorausgesetzt, dies ist möglich sogar ist eine in CSS definierte Klasse. Beachten Sie, dass der Punkt vor dem Klassennamen nicht benötigt wird. Diese sind meistens nur für den Hauptwähler erforderlich. Idealerweise verwenden Sie dazu zunächst CSS, dies ist jedoch keine große Sache.
JQuery kann auch Zeilen ausblenden oder entfernen:
$ ('# fordCortina'). hide (); $ ('# fordCortina'). remove ();Sie müssen ein Element nicht ausblenden, bevor Sie es entfernen.
Funktionen
JQuery-Funktionen sind wie JS. Sie verwenden geschweifte Klammern und können Argumente akzeptieren. Wo es wirklich interessant wird, sind Callbacks. Callbacks können auf fast jede jQuery-Funktion angewendet werden. Sie geben einen Code an, der ausgeführt werden soll, sobald die Kernaktion abgeschlossen ist. Dies bietet eine riesige Funktionalität. Wenn sie nicht vorhanden waren und Sie den Code in einer linearen Weise geschrieben haben, führt JS die nächste Codezeile aus, während Sie auf die vorherige Codezeile warten. Rückrufe stellen sicher, dass der Code erst ausgeführt wird, wenn die ursprüngliche Aufgabe abgeschlossen ist. Hier ist ein Beispiel:
$ ('table'). hide (function () alert ('MUO-Regeln!'););Seien Sie gewarnt: Dieser Code führt für jedes Element eine Warnung aus. Wenn sich Ihre Auswahl mehr als einmal auf der Seite befindet, werden mehrere Warnmeldungen angezeigt.
Sie können Rückrufe mit anderen Argumenten verwenden:
$ ('tr: even'). addClass ('even', function () console.log ('Hello'););Beachten Sie, wie sich nach den schließenden Klammern ein Semikolon befindet. Dies ist normalerweise für eine JS-Funktion nicht erforderlich. Dieser Code wird jedoch immer noch als eine Zeile betrachtet (da der Rückruf in Klammern steht)..
Animation
JQuery macht es sehr einfach, Webseiten zu animieren. Sie können Elemente ein- oder ausblenden:
$ ('. fade1'). fadeIn ('langsam'); $ ('# fade2'). fadeOut (500);Sie können drei Geschwindigkeiten (langsam, mittel, schnell) oder eine Zahl angeben, die die Geschwindigkeit in Millisekunden (1000 ms = 1 Sekunde) darstellt. Sie können animieren fast ein beliebiges CSS-Element. Dies animiert die Breite des Selektors von seiner aktuellen Breite bis 250px.
$ ('foo'). animieren (width: '250px');Farben können nicht animiert werden. Sie können auch Rückrufe mit Animationen verwenden:
$ ('bar'). animieren (height: '250px', function () $ ('bar'). animieren (width: '50px');Schleifen
Loops glänzen wirklich in jQuery. Jeder() wird verwendet, um jedes Element eines bestimmten Typs zu durchlaufen:
$ ('li'). each (function () console.log ($ (this)););Sie können auch einen Index verwenden:
$ ('li'). each (Funktion (i) console.log (i + '-' + $ (this)););Das würde drucken 0, dann 1 und so weiter.
Sie können auch verwenden jeder() wie in JS über Arrays iterieren:
var cars = ["Ford", "Jaguar", "Lotus"]; $ .each (Autos, Funktion (i, Wert) console.log (Wert););Beachten Sie das zusätzliche Argument, das aufgerufen wird Wert - Dies ist der Wert des Array-Elements.
Das ist es wert, darauf hingewiesen zu werden jeder() können manchmal langsamer sein als Vanille-JS-Loops. Dies ist auf den zusätzlichen Verarbeitungsaufwand zurückzuführen, den jQuery ausführt. Für den Großteil der Zeit ist dies kein Thema. Wenn Sie über die Leistung besorgt sind oder mit großen Datensätzen arbeiten, sollten Sie zunächst den Code mit jsPerf vergleichen.
AJAX
Asynchrones JavaScript und XML oder AJAX ist mit jQuery wirklich sehr einfach. AJAX betreibt einen großen Teil des Internets, und wir haben es in Teil 5 jQuery Tutorial (Teil 5) beschrieben: AJAX Them All! jQuery Tutorial (Teil 5): AJAX ihnen alle! Am Ende unserer jQuery-Minitutorialserie wird es Zeit, dass wir uns eingehender mit einer der am häufigsten verwendeten Funktionen von jQuery befassen. AJAX ermöglicht es einer Website, mit… zu kommunizieren. Weitere Informationen zu jQuery-Tutorial jQuery-Tutorial - Erste Schritte: Grundlagen und Auswahlmöglichkeiten jQuery-Tutorial - Erste Schritte: Grundlagen und Auswahlmöglichkeiten Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es so ist genial. Diese Woche denke ich, es ist an der Zeit, dass wir uns mit etwas Code schmutzig machen und erfahren haben, wie… Weiterlesen. Es bietet eine Möglichkeit, eine Webseite teilweise zu laden - kein Grund, die gesamte Seite neu zu laden, wenn Sie beispielsweise nur die Fußball-Punktzahl aktualisieren möchten. jQuery verfügt über mehrere AJAX-Methoden. Die einfachste Methode ist Belastung():
$ ('# baz'). load ('some / url / page.html');Dadurch wird ein AJAX-Aufruf an die angegebene Seite ausgeführt (einige / url / page.html) und schiebt die Daten in den Selektor. Einfach!
Sie können durchführen HTTP GET Anfragen:
$ .get ('some / url', Funktion (Ergebnis) console.log (Ergebnis););Sie können auch Daten mit senden POST:
$ .post ('einige / andere / url', 'make': 'Ford', 'model': 'Cortina');Es ist sehr einfach, Formulardaten zu übermitteln:
$ .post ('url', $ ('form'). serialize (), Funktion (Ergebnis) console.log (Ergebnis);Das serialisieren () function holt alle Formulardaten und bereitet sie für die Übertragung vor.
Versprechen
Versprechungen werden für die verzögerte Ausführung verwendet. Sie können schwer zu erlernen sein, aber jQuery macht es etwas weniger lästig. ECMAScript 6 führt native Versprechen für JS ein, jedoch ist die Browserunterstützung bestenfalls flockig. Im Moment sind jQuery-Versprechungen bei der Cross-Browser-Unterstützung viel besser.
Ein Versprechen ist fast genau so, wie es klingt. Der Code wird ein Versprechen geben, zu einem späteren Zeitpunkt zurückzukehren, wenn er abgeschlossen ist. Ihre JavaScript-Engine führt dann anderen Code aus. Einmal das Versprechen löst auf (kehrt zurück), ein anderer Code kann ausgeführt werden. Versprechungen können wie Rückrufe betrachtet werden. In der jQuery-Dokumentation wird ausführlicher erklärt.
Hier ist ein Beispiel:
// dfd == verzögert var dfd = $ .Deferred (); function doThing () $ .get ('some / slow / url', function () dfd.resolve ();); return dfd.promise (); $ .when (doThing ()). then (function () console.log ('YAY, es ist fertig'););Beachten Sie, wie das Versprechen gemacht wird (dfd.promise ()), und es wird nur aufgelöst, wenn der AJAX-Aufruf abgeschlossen ist. Sie können eine Variable verwenden, um mehrere AJAX-Aufrufe zu verfolgen, und erst dann eine andere Aufgabe ausführen, wenn alle erledigt sind.
Leistungstipps
Der Schlüssel für die Leistung Ihres Browsers besteht darin, den Zugriff auf das DOM zu beschränken. Viele dieser Tipps könnten auch auf JS zutreffen, und Sie möchten möglicherweise Ihren Code profilieren, um festzustellen, ob er inakzeptabel langsam ist. Im aktuellen Zeitalter der Hochleistungs-JavaScript-Engines können geringfügige Engpässe im Code oft unbemerkt bleiben. Trotzdem lohnt es sich immer noch, den schnellsten Code zu schreiben, den Sie können.
Statt das DOM nach jeder Aktion zu durchsuchen:
$ ('foo'). css ('Hintergrundfarbe', 'rot'); $ ('foo'). css ('color', 'green'); $ ('foo'). css ('width', '100px');Speichern Sie das Objekt in einer Variablen:
$ bar = $ ('foo'); $ bar.css ('Hintergrundfarbe', 'Rot'); $ bar.css ('color', 'green'); $ bar.css ('width', '100px');Optimieren Sie Ihre Schleifen. Eine Vanille für Schleife gegeben:
var cars = ["Mini", "Ford", "Jaguar"]; für (int i = 0; i < cars.length; ++i) // do something Diese Schleife ist zwar nicht grundsätzlich schlecht, kann aber schneller gemacht werden. Für jede Iteration muss die Schleife den Wert des Autos-Arrays berechnen (Autos.Länge). Wenn Sie dies in einer anderen Variablen speichern, kann die Leistung gesteigert werden, insbesondere wenn Sie mit großen Datensätzen arbeiten:
für (int i = 0, j = cars.length; i < j; ++i) // do something Nun wird die Länge des Autos-Arrays in gespeichert j. Dies muss nicht mehr in jeder Iteration berechnet werden. Wenn Sie verwenden jeder(), Sie müssen dies nicht tun, obwohl richtig optimiertes Vanilla JS jQuery übertrifft. Wo jQuery wirklich glänzt, ist die Geschwindigkeit des Entwickelns und Debuggens. Wenn Sie nicht mit Big Data arbeiten, ist jQuery normalerweise mehr als schnell.
Sie sollten jetzt genug Grundlagen kennen, um ein JQuery-Ninja zu sein!
Verwenden Sie regelmäßig jQuery? Hast du es aus irgendwelchen Gründen aufgehört? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit!
Erfahren Sie mehr über: JavaScript, jQuery.