Wie Kettenmethoden in jQuery?
JQuery, eine Bibliothek von JavaScript, lässt seine Benutzer weniger schreiben und mehr tun. Sie können mehrere Aktionen ausführen, indem Sie nur eine Codezeile schreiben. Ein Beispiel hierfür ist die Verkettungsmethode, mit der Sie eine Reihe von JQuery -Methoden kombinieren und auf ein Element auf einmal anwenden können. Es ist eine sehr lustige Technik, die Ihre Arbeit verringert und viel Zeit spart. Dieser Leitfaden soll seine Leser über die Kette verschiedener Methoden in JQuery aufklären.
Verkettungsmethoden in JQuery
Wie bereits erwähnt, können wir verschiedene jQuery -Methoden anketten, um mehrere Aktionen auf einem HTML -Element auf einmal auszuführen. Dies kann durch Auswahl eines Elements und des Schreibens aller erforderlichen Methoden in einer einzelnen Zeile durchgeführt werden, die durch einen Punkt getrennt ist.
Der größte Vorteil der Verwendung der Kettenmethode besteht darin, dass der Browser das gleiche Element mehr als einmal aufspürt. Mit anderen Worten, es ist unbedingt immer wieder den gleichen Selektor zu verwenden, wodurch die Wahrscheinlichkeit, Ihren Code zu verlangsamen.
Lassen Sie uns untersuchen.
Beispiel 1
In diesem Beispiel verketten wir zwei JQuery -Methoden, die CSS () und Animate () sind.
Html
JQuery -Verkettungsmethoden
Im obigen HTML -Code werden zwei Elemente erstellt, die sind
, Und . Jetzt werden wir Methoden CSS () und Animate () auf der
Element, um zu sehen, wie die Verkettungsmethoden in JQuery funktioniert.
JQuery
$ (Dokument).Ready (function ()$ (".Taste").klicken (function ()
$ ("P").CSS ("Farbe", "Grün").Animate (Breite: "100%")
.Animate (fontsize: "46px").Animate (Opazität: "0.4 ");
);
);
Im obigen Code haben wir Farbe auf die angewendet
Element unter Verwendung der CSS () -Methode und festgelegte Breite, Schriftgröße und Opazität auf demselben Element unter Verwendung der Animate () -Methode.
Ausgang
Wenn die Schaltfläche klickt, passiert hier, was passiert.
Die CSS () und Animate () -Methoden werden erfolgreich gekettet.
Wie Sie im obigen Beispiel sehen können.
JQuery
$ ("P").CSS ("Farbe", "Grün").Animate (Breite: "100%")
.Animate (fontsize: "46px")
.Animate (Opazität: "0.4 ");
Es wird absolut keinen Einfluss auf die Ausgabe haben.
Beispiel 2
Das folgende Beispiel zeigt, wie die Methoden SlideUp (), SlideDown () und Fadeout () gleichzeitig ketten können.
Html
JQuery -Verkettungsmethoden
Im obigen HTML -Code werden zwei Elemente erstellt, die sind
, Und . Lassen Sie uns die Methoden Slideup (), SlideDown () und Fadeout () (), um den resultierenden Effekt anzuzeigen.
JQuery
$ (Dokument).Ready (function ()$ (".Taste").klicken (function ()
$ ("H1").SlideUp (1000).Slidedown (1000).Fadeout (1000);
);
);
Im obigen Code wurde jeder der Methoden eine Geschwindigkeit von 1000 Millisekunden zugewiesen.
Ausgang
Die Methoden SlideUp (), SlideDown () und Fadeout () sind gekettet und funktionieren ordnungsgemäß.
Verkettungsmethoden ohne Argumente zu verabschieden
Wenn Sie keinen Parameter an eine JQuery -Methode übergeben, gibt es kein JQuery -Objekt zurück, sondern liefert stattdessen einfach den Inhalt des angegebenen Elements zurück.
Beispiel
In diesem Beispiel verketten wir die Methoden HTML (), AddClass () und Hide ().
Html
Einige Überschrift
Ein Absatz.
Es wurden drei HTML -Elemente erstellt, die sind
,
, Und .
JQuery
$ (Dokument).Ready (function ()$ ("Button").klicken (function ()
//Das wird funktionieren
$ ("H1").HTML ("Einige Überschriften").AddClass ("Demo").Fadeout (1000);
// Dies wird nicht funktionieren
$ ("P").html ().AddClass ("Demo");
);
);
Im obigen Code haben wir den Parameter bei der Anwendung an die HTML () -Methode übergeben
nur. Bei der HTML () -Methode wurde jedoch im Fall von kein Parameter übergeben
. Daher funktionieren die Auswirkungen der Verkettung nur für
, und nicht für
.
Ausgang
Keine Wirkung auf den Absatz.
Abschluss
Das Ketten verschiedener jQuery -Methoden kann durch Auswahl eines Elements und des Schreibens aller erforderlichen Methoden in einer einzigen Zeile durchgeführt werden, die von einem Punkt getrennt ist, um mehrere Aktionen auf einem HTML. Der Vorteil davon besteht. Dieser Bericht führt Sie dazu, wie Sie mit Hilfe geeigneter Beispiele Methoden in JQuery anketten können.