Ein grundlegendes Handbuch zu JQuery für Javascript-Programmierer

Werbung

JQuery ist eine der beliebtesten JavaScript-Bibliotheken der Welt (Was ist JavaScript? Was ist JavaScript und kann das Internet ohne JavaScript existieren?JavaScript ist eines der Dinge, die viele für selbstverständlich halten. Jeder benutzt es. Weiterlesen ). Zum Zeitpunkt der Einführung wird JavaScript (als bezeichnet) bezeichnet JS von hier an in) war an einem ganz anderen Ort. Der 14. Januar 2006 war der Tag, an dem jQuery um angekündigt wurde BarCampNYC. JS fehlte immer noch etwas - Browser unterstützten alle Teile davon, aber viele Hacks und Workarounds mussten implementiert werden, um die Konformität zu gewährleisten.

JQuery kam und änderte alles. Mit JQuery war es sehr einfach, browserkompatiblen 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 benutzt haben, was können Sie damit machen?

Zusätzlich zum Auffrischen Ihrer JavaScript-Kenntnisse möchten Sie möglicherweise einige lesen

HTML- und CSS-Tutorials Lernen Sie HTML und CSS mit diesen Schritt-für-Schritt-AnleitungenNeugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, dass Sie ein Händchen für das Erstellen von Websites von Grund auf haben, finden Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die es wert sind, ausprobiert zu werden. Weiterlesen zuerst, wenn Sie auch nicht mit ihnen vertraut sind.

Wir haben führte jQuery ein Das Web interaktiv machen: Eine Einführung in jQueryjQuery ist eine clientseitige Skriptbibliothek, die fast jede moderne Website verwendet - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber die am weitesten entwickelte, am meisten unterstützte und am weitesten verbreitete ... Weiterlesen Daher konzentriert sich diese Anleitung zu JQuery auf die eigentliche Codierung.

Fertig machen

Möglicherweise kennen Sie die JS-Methode zum Auswählen von IDs aus dem Dokumentobjektmodell (DOM):

document.getElementById ('foo');

Nun, JQuery geht noch einen Schritt weiter. Sie müssen keine verschiedenen 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, um echte Kraft zu entfalten. Dies wählt alle aus td Elemente innerhalb eines Tabelle außer dem ersten.

$ ('table td'). not (': 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 ausschließlich verwendet, um anzuzeigen, dass diese Variable ein jQuery-Objekt ist, was bei komplexen Projekten sehr hilfreich ist.

Sie können das übergeordnete Element eines Elements auswählen:

$ ('Kind'). parent ();

Oder die Geschwister:

$ ('Kind'). Geschwister ();

Sie müssen Ihren Code ausführen, sobald der Browser bereit ist. So machen Sie das:

$ (document) .ready (function () {console.log ('ready!'); });

Mehr Macht

Nachdem Sie die Grundlagen kennen, gehen wir zu einigen komplexeren Themen über. Gegeben eine HTML-Tabelle:

Machen
Modell
Farbe


Ford
Begleiten
Schwarz


Mini
Cooper
rot


Ford
Cortina
Weiß

Angenommen, Sie möchten jeder zweiten Zeile eine andere Farbe geben (bekannt als Zebrastreifen). Jetzt können Sie CSS dafür verwenden:

#cars tr: n-tes Kind (gerade) {Hintergrundfarbe: rot; }

So könnte dies mit jQuery erreicht werden:

$ ('tr: gerade'). addClass ('gerade');

Dies wird das Gleiche erreichen, vorausgesetzt, dass 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 zunächst CSS, obwohl dies keine große Sache ist.

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 genau wie JS. Sie verwenden geschweifte Klammern und können Argumente akzeptieren. Wo es wirklich interessant wird, sind Rückrufe. Rückrufe 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 enorme Funktionalität. Wenn sie nicht vorhanden sind und Sie Ihren Code so geschrieben haben, dass er linear ausgeführt wird, führt JS die nächste Codezeile weiter aus, während Sie auf die vorherige warten. Rückrufe stellen sicher, dass der Code erst ausgeführt wird, wenn die ursprüngliche Aufgabe abgeschlossen ist. Hier ein Beispiel:

$ ('table'). hide (function () {alert ('MUO-Regeln!'); });

Seien Sie gewarnt - dieser Code führt eine Warnung für jedes Element aus. Wenn sich Ihre Auswahl mehrmals auf der Seite befindet, erhalten Sie mehrere Warnungen.

Sie können Rückrufe mit anderen Argumenten verwenden:

$ ('tr: gerade'). addClass ('gerade', function () {console.log ('Hallo'); });

Beachten Sie, dass nach den schließenden Klammern ein Semikolon steht. Dies wird normalerweise für eine JS-Funktion nicht benötigt, dieser Code wird jedoch weiterhin als einzeilig angesehen (da sich der Rückruf in Klammern befindet).

Animation

Mit JQuery ist 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. Dadurch wird die Breite des Selektors von seiner aktuellen Breite auf 250 Pixel animiert.

$ ('foo'). animate ({width: '250px'});

Es ist nicht möglich, Farben zu animieren. Sie können Rückrufe auch mit Animation verwenden:

$ ('bar'). animieren ({Höhe: '250px'}, Funktion () {$ ('Balken'). animieren ({Breite: '50px'} });

Schleifen

Loops leuchten wirklich in jQuery. Jeder() wird verwendet, um über jedes Element eines bestimmten Typs zu iterieren:

$ ('li'). each (function () {console.log ($ (this)); });

Sie können auch einen Index verwenden:

$ ('li'). each (Funktion (i) {console.log (i + '-' + $ (this)); });

Dies würde drucken 0, dann 1 und so weiter.

Sie können auch verwenden jeder() über Arrays iterieren, genau wie in JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (Autos, Funktion (i, Wert) {console.log (Wert); });

Beachten Sie das zusätzliche Argument Wert - Dies ist der Wert des Array-Elements.

Es ist erwähnenswert, dass jeder() kann manchmal langsamer sein als Vanille-JS-Schleifen. Dies ist auf den zusätzlichen Verarbeitungsaufwand zurückzuführen, den jQuery ausführt. In den meisten Fällen ist dies kein Problem. Wenn Sie Bedenken hinsichtlich der Leistung haben oder mit großen Datenmengen arbeiten, sollten Sie Ihren Code mit einem Benchmarking versehen jsPerf zuerst.

AJAX

Asynchrones JavaScript und XML oder AJAX ist mit jQuery wirklich sehr einfach. AJAX versorgt einen großen Teil des Internets mit Strom, und wir haben uns damit befasst Teil 5 jQuery Tutorial (Teil 5): AJAX Them All!Gegen Ende unserer jQuery-Mini-Tutorial-Reihe ist es an der Zeit, uns eine der am häufigsten verwendeten Funktionen von jQuery genauer anzusehen. Mit AJAX kann eine Website mit ... Weiterlesen unserer jQuery-Tutorial jQuery Tutorial - Erste Schritte: Grundlagen und SelektorenLetzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche, denke ich, ist es Zeit, dass wir uns mit etwas Code die Hände schmutzig machen und lernen, 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ßballergebnisse aktualisieren möchten. jQuery verfügt über mehrere AJAX-Methoden, die einfachste 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 Daten auch mit senden POST:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

Es ist sehr einfach, Formulardaten einzureichen:

$ .post ('url', $ ('form'). serialize (), function (result) {console.log (result); }

Das serialize () Die Funktion ruft alle Formulardaten ab und bereitet sie für die Übertragung vor.

Versprechen

Versprechen werden für die verzögerte Ausführung verwendet. Es kann schwierig sein, sie zu erlernen, aber jQuery macht es etwas weniger problematisch. ECMAScript 6 führt native Versprechen an JS ein, die Browserunterstützung ist jedoch bestenfalls unzuverlässig. Derzeit sind jQuery-Versprechen bei der browserübergreifenden Unterstützung viel besser.

Ein Versprechen ist fast genau so, wie es sich anhört. Der Code verspricht, zu einem späteren Zeitpunkt zurückzukehren, wenn er vollständig ist. Ihre JavaScript-Engine führt einen anderen Code aus. Einmal das Versprechen löst (gibt zurück), kann ein anderer Code ausgeführt werden. Versprechen können als Rückrufe betrachtet werden. Das jQuery-Dokumentation erklärt ausführlicher.

Hier ein Beispiel:

// dfd == aufgeschoben. var dfd = $ .Deferred (); Funktion doThing () {$ .get ('some / slow / url', Funktion () {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 wird erst aufgelöst, wenn der AJAX-Aufruf abgeschlossen ist. Sie können eine Variable verwenden, um mehrere AJAX-Aufrufe zu verfolgen und eine weitere Aufgabe erst auszuführen, wenn alle erledigt sind.

Leistungstipps

Der Schlüssel zum Ausschalten der Leistung Ihres Browsers liegt in der Einschränkung des Zugriffs auf das DOM. Viele dieser Tipps können auch für JS gelten, und Sie möchten möglicherweise Ihren Code profilieren, um festzustellen, ob er inakzeptabel langsam ist. Im gegenwärtigen Zeitalter von Hochleistungs-JavaScript-Engines bleiben kleinere Engpässe im Code oft unbemerkt. Trotzdem lohnt es sich immer noch, den Code mit der schnellsten Leistung zu schreiben, den Sie können.

Anstatt 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 ('Farbe', 'Grün'); $ bar.css ('width', '100px');

Optimieren Sie Ihre Loops. Gegeben eine Vanille für Schleife:

var cars = ['Mini', 'Ford', 'Jaguar']; für (int i = 0; i 

Obwohl diese Schleife nicht von Natur aus schlecht ist, kann sie 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 Datenmengen arbeiten:

für (int i = 0, j = cars.length; i 

Jetzt 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 übertreffen kann. Wo jQuery wirklich glänzt, ist die Geschwindigkeit der Entwicklung und des Debuggens. Wenn Sie nicht an Big Data arbeiten, ist jQuery normalerweise mehr als schnell.

Sie sollten jetzt genug Grundlagen kennen, um ein jQuery-Ninja zu sein!

Verwenden Sie jQuery regelmäßig? Haben Sie die Verwendung aus irgendeinem Grund eingestellt? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit!