Einführung in jQuery (Teil 2): ​​Methoden und Funktionen

Werbung

Dies ist Teil einer fortlaufenden Einführung für Anfänger in die jQuery-Webprogrammierungsserie. Teil 1 befasste sich mit den Grundlagen von jQuery 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 wie Sie es in Ihr Projekt aufnehmen können, und Selektoren. In Teil 2 werden wir mit der grundlegenden Verwendung fortfahren, während wir uns einige Methoden ansehen, die Sie für diese DOM-Elemente ausführen können, sowie einige weitere Sprachgrundlagen.

$(Wähler).Methode();

Wenn Sie sich an Lektion 1 erinnern, ist dies die Grundstruktur einer DOM-Manipulation in jQuery. DOM-Manipulation ist natürlich nicht das einzige, was Sie mit jQuery tun können, aber es ist der einfachste und häufigste Ausgangspunkt. Deshalb haben wir uns für diese entschieden.

Um es kurz zusammenzufassen: Wähler In einem Teil dieser Anweisung können Sie CSS-ähnliche Elementnamen, Klassen oder IDs verwenden, um Teile des DOM zu lokalisieren. Zum Beispiel, um alle zu ergreifen mit einem Klassennamen von .verstecktwürden wir verwenden:

$ ('div.hidden')

Der zweite Teil dieser Gleichung ist der Methode diese DIVs durchzuführen, sobald wir sie gefunden haben (falls sie überhaupt existieren; oder sie können nur ein "passender" Gegenstand sein). Denken Sie daran, dass jQuery immer nur ein Element für die ID-Auswahl zurückgibt, da IDs auf eindeutige Elemente verweisen sollten. Wenn Sie mehr als eines von etwas haben möchten, muss es in CSS als Klasse definiert sein.

Weiter zu den Methoden; Was kann man überhaupt mit Elementen des DOM machen?

Zuerst habe ich Ihnen das vorgestellt .css Methode letztes Mal, damit Sie es zum Testen verwenden können. Das Format ist einfach:

.css ('Eigenschaft', 'Wert');

Alles, was durch CSS definiert werden kann, kann daher durch jQuery angepasst werden - Farben, Transparenz, Position, Größe - um nur einige zu nennen. Die Änderung erfolgt sofort.

Wenn Sie die CSS-Änderungen lieber animieren möchten, habe ich gute Nachrichten für Sie. Es gibt auch eine Methode namens .animieren(). Es ist jedoch etwas komplexer:

.animate ({'property': 'value'}, speed);

Als Beispiel:

.animate ({'Deckkraft': '0,25', 'Höhe': '100px'}, 'schnell');

An diesem Punkt fragen Sie sich vielleicht, wozu die geschweiften Klammern dienen. Sie werden als "Objektliteral" bezeichnet und normalerweise zum Erstellen einer Liste von verwendet Eigentumswert Paare, irgendwie wie ein indiziertes Array wenn Sie aus anderen Sprachen kommen. Sie werden sie in jQuery häufig verwenden, daher sage ich das noch einmal - gewöhnen Sie sich daran, ordnungsgemäß nach geschlossenen Klammern und Klammern zu suchen!

Auschecken diese Seite für viele Arbeitsbeispiele der Animationsmethode.

Sie können nicht nur die CSS-Eigenschaften von etwas bearbeiten, sondern auch den Inhalt mit etwas anpassen .Methoden text (), .html () und .val () (val steht für den Inhalt von Formularelementen). Diese Methoden wirken als beides einstellenters und bekommenters; Wenn Sie keinen Wert angeben, erhalten sie den aktuellen Wert. Wenn Sie einen Wert angeben, wird der aktuelle Wert ersetzt.

Hier einige kurze Beispiele:

Rufen Sie den aktuellen Wert des Namensfelds im Kommentarformular ab und weisen Sie ihn einer Variablen zu Kommentarname:

var commenter_name = $ (# Kommentarform #name) .val ();

Stellen Sie den Wert von ein auf den Wert von ergriffen Kommentatorenname:

$ ('span.name'). text (commenter_name);

Dann haben wir eine große Auswahl an Methoden zum Klonen, Bewegen, Einfügen oder Löschen von Teilen des DOM. Ihre Fantasie ist wirklich die Grenze.

Angenommen, Sie möchten nach jedem dritten dynamisch einen Werbebildblock einfügen Absatz in der Inhaltsspalte, aber Sie tun dies in Javascript, damit das erste Laden der Seite erfolgen kann sauber gehalten. Klingt ziemlich komplex, oder? Kaum…

$('div # Inhaltp: n-tes Kind (3n)').nach dem('');

Wir haben jQuery gebeten, Folgendes aufzuschlüsseln:

1. Finden Sie das Div mit der ID "Inhalt"
2. Finden Sie die Ps, die in diesem Div enthalten sind
3. Filtern Sie zu jedem 3. p Verwenden des Pseudo-Selektors für das n-te Kind (mehr dazu hier)
4. Fügen Sie danach ein beliebiges Bild ein jedes passende Element

Ich kann hier möglicherweise nicht alle Methoden auflisten und Sie möchten das auch nicht lesen. Der Punkt ist, dass es eine Methode gibt, mit der Sie so ziemlich alles tun können, was Sie sich vorstellen können, wenn es um Manipulationen geht Überprüfen Sie die API Zum einen können Sie verwenden.

Denken Sie auch daran, dass es mehrere Möglichkeiten gibt, etwas zu tun. Wenn Sie beispielsweise das richtige Objekt nicht eingrenzen können insertAfter (), Vielleicht denken Sie daran, das zu finden Nächster Kind runter und mit insertBefore () stattdessen.

Methodenverkettung

Lassen Sie uns heute zum Schluss noch ein kurzes Wort zur Verkettung von Methoden sagen, im Grunde nur, weil es großartig ist. Betrachten wir zunächst die folgenden Codezeilen:

$ ('nav # menu'). fadeIn ('fast'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Das klingt doch vernünftig, oder? Aber Sie können dasselbe in nur einer Zeile tun:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

Das macht genau das Gleiche und heißt Methodenverkettung. Da fast alle jQuery-Methoden selbst ein jQuery-Objekt zurückgeben, kann jede in die nächste eingespeist werden. Dies bedeutet weniger Code - was immer gut ist - aber es läuft tatsächlich auch schneller.

Warum? Nun, jedes Mal, wenn Sie die grundlegende jQuery aufrufen $ Befehl und Auswahl, fordern Sie ihn auf, den DOM-Baum nach einem passenden Element zu durchsuchen. Wenn Sie Methoden verketten, müssen Sie nicht immer wieder auf das DOM zurückgreifen, da es weiß, wo sie sich jetzt befinden, und die Methode sofort ausführen kann.

Das war's für heute, und ich denke, wir haben wahrscheinlich ziemlich viel abgedeckt. Sie sollten jetzt mit der Fähigkeit ausgestattet sein, einige ziemlich schwere DOM-Manipulationen durchzuführen. Probieren Sie es aus, verketten Sie Ihre Methoden und machen Sie ein echtes Durcheinander auf der Seite. Im Moment möchten Sie Ihre Skripte in der Fußzeile platzieren, um dem Rest der Seite Zeit zum Laden zu geben. Nächste Woche werden wir uns mit dem Problem befassen, jQuery nur dann zum Laufen zu bringen, wenn alles korrekt mit Ereignissen geladen wurde, und mit dem merkwürdigen Fall anonymer Funktionen.

Wenn Sie gerade auf diesen Beitrag gestoßen sind, sind Sie wahrscheinlich ein Webentwickler und möchten vielleicht alle unsere Beiträge lesen WordPress und Bloggen Artikel oder sogar unsere Beste WordPress Plugins Die besten WordPress Plugins Weiterlesen Seite.