Internet

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

Einführung in jQuery (Teil 2) Methoden und Funktionen / Internet

Dies ist Teil einer laufenden Einführung in die jQuery-Webprogrammierserie. Teil 1 behandelte die jQuery-Grundlagen. 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 großartig ist. Ich denke, es ist an der Zeit, dass wir uns mit Code ein wenig schmutzig machen und erfahren haben, wie… mehr darüber, wie man ihn in Ihr Projekt einfügt, und Auswahlmöglichkeiten. In Teil 2 fahren wir mit der grundlegenden Verwendung fort, während wir uns einige Methoden ansehen, die Sie für diese DOM-Elemente ausführen können, und einige weitere Sprachgrundlagen.

$ (Selektor) .Methode ();

Wenn Sie sich aus Lektion 1 zurückrufen, ist dies die grundlegende Struktur einer DOM-Manipulation in jQuery. Sie können mit jQuery natürlich nicht nur DOM-Manipulationen durchführen, aber es ist der einfachste Startpunkt und der häufigste, weshalb wir uns dafür entschieden haben.

Zur schnellen Zusammenfassung können Sie im Selector-Teil dieser Anweisung CSS-ähnliche Elementnamen, Klassen oder IDs verwenden, um Teile des DOMs zu finden. Zum Beispiel, um alle zu packen

mit einem Klassennamen von .versteckt, wir würden verwenden:

$ ('div.hidden')

Der zweite Teil dieser Gleichung ist die Methode, die an diesen DIVs ausgeführt werden soll, sobald wir sie gefunden haben (sofern sie überhaupt existieren; sie können aber auch nur eine sein.) “passend” Artikel). Denken Sie daran, dass jQuery immer nur ein Element für die ID-Auswahl zurückgibt, da sich IDs auf eindeutige Elemente beziehen sollten. Wenn Sie mehr als etwas haben, muss es in CSS als Klasse definiert werden.

Dann zu den Methoden; Was können Sie mit Elementen des DOM trotzdem machen??

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

.css ('property', 'value');

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

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

.animieren ('Eigenschaft': 'Wert', Geschwindigkeit);

Als Beispiel:

.animieren ('Deckkraft': '0.25', 'height': '100px', 'fast'));

An diesem Punkt fragen Sie sich vielleicht, wozu die geschweiften Klammern sind. Man nennt sie eine “Objektliteral”, und werden normalerweise zum Erstellen einer Liste von verwendet Eigentumswert Paare, irgendwie wie ein indiziertes Array wenn Sie aus anderen Sprachen kommen. Sie werden sie häufig in jQuery verwenden, also sage ich es noch einmal - gewöhnen Sie sich an die richtige Prüfung auf geschlossene Klammern und geschweifte Klammern!

Schauen Sie sich diese Seite an, um eine Vielzahl von Beispielen für die animierte Methode zu erhalten.

Sie können nicht nur die CSS-Eigenschaften von etwas ändern, sondern auch den Inhalt davon mit anpassen .Die Methoden text (), .html () und .val () ebenfalls (val ist für den Inhalt von Formularelementen). Diese Methoden wirken als beides einstellenund erhaltenters; Wenn Sie keinen Wert angeben, wird der aktuelle Wert angezeigt. Wenn Sie einen Wert angeben, wird der aktuelle Wert ersetzt.

Hier einige schnelle Beispiele:

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

var commenter_name = $ (# comment-form #name) .val ();

Stellen Sie den Wert von ein auf den Wert aus Kommentator_Name:

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

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

Angenommen, Sie wollten nach jedem 3. Absatz der Inhaltsspalte einen Werbeblock dynamisch einfügen, dies geschieht jedoch in Javascript, damit der anfängliche Seitenaufbau sauber gehalten werden kann. Klingt ziemlich komplex, oder? Kaum… 

$ ('div # content p: nth-child (3n)'). after ('');

Wir haben jQuery gefragt:

  1. Finde das div mit einer ID von “Inhalt”
  2. Finde die p, die in diesem div enthalten sind
  3. Filtern Sie nach jedem 3. p mit dem n-ten Pseudo-Selektor (mehr dazu hier)
  4. Fügen Sie nach jedem übereinstimmenden Element ein beliebiges Bild ein

Ich kann nicht alle Methoden hier aufführen und möchte das auch nicht lesen. Der Punkt ist, es gibt eine Methode, um so ziemlich alles zu tun, was Sie denken können, wenn es um Manipulation geht. Überprüfen Sie also die API für eine, die Sie verwenden können.

Denken Sie auch daran, dass es mehrere Möglichkeiten gibt, etwas zu tun. Wenn Sie zum Beispiel das korrekte Objekt nicht eingrenzen können insertAfter (), vielleicht darüber nachdenken, das zu finden Nächster Kind nieder und mit insertBefore () stattdessen.

Method Chaining

Zum Schluss wollen wir uns heute kurz über die Verkettung von Methoden unterhalten, 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 vernünftig genug, richtig? Aber Sie können dasselbe in nur einer Zeile machen:

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

Das tut genau dasselbe und heißt Methodenverkettung. Da fast alle jQuery-Methoden selbst ein jQuery-Objekt zurückgeben, kann jedes in das nächste eingespeist werden. Dies bedeutet weniger Code - was immer eine gute Sache ist -, aber es läuft auch schneller.

Warum? Nun, jedes Mal, wenn Sie die grundlegende jQuery aufrufen $ Kommando und Selektor, bitten Sie ihn, den DOM-Baum nach einem passenden Element zu durchsuchen. Wenn Sie Methoden verketten, müssen Sie nicht immer auf das DOM zurückgreifen, da es weiß, wo es sich jetzt befindet, und Sie können die Methode sofort ausführen.

Das war es für heute, und ich denke, wir haben wahrscheinlich ziemlich viel darüber geschrieben. Sie sollten sich jetzt mit der Fähigkeit auskennen, einige ziemlich umfangreiche DOM-Manipulationen durchzuführen, also probieren Sie es aus, verketten Sie Ihre Methoden miteinander und machen Sie ein echtes Durcheinander auf der Seite. Für den Moment sollten Sie Ihre Skripte in der Fußzeile platzieren, damit der Rest der Seite Zeit zum Laden hat. Nächste Woche werden wir uns mit dem Problem befassen, dass jQuery nur dann Dinge tut, wenn alles mit Ereignissen korrekt geladen wurde, und den neugierigen Fall anonymer Funktionen.

Wenn Sie gerade über diesen Beitrag gestolpert sind, sind Sie wahrscheinlich ein Webentwickler und möchten vielleicht alle WordPress- und Blogartikel sowie die Seite mit den besten WordPress-Plugins lesen.