Nutzungsanalyse von Kettenoperationen von jQuery-Objekten

Die Beispiele in diesem Artikel beschreiben die Verwendung von Kettenoperationen für jQuery-Objekte. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Kettenoperation von jQuery-Objekten

Schauen wir uns zunächst ein Beispiel an:

Der Code lautet wie folgt:

$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good")

Ruft zuerst die Funktion css() auf, um den Stil eines jQuery-Objekts zu ändern, und verwendet dann die Funktion attr() zum Ändern Die Attribute ähneln einer Kette und werden daher als „Kettenoperation“ bezeichnet.

Kettenoperationen können den Code prägnanter machen, da es oft möglich ist, Aufgaben in einer Anweisung zu erledigen, die in der Vergangenheit nur in mehreren Anweisungen erledigt werden konnten. Wenn beispielsweise keine Kettenoperationen verwendet werden, sind zwei Anweisungen erforderlich, um die obige Aufgabe abzuschließen:

$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");

Zusätzlich zur Erhöhung der Codemenge wird der Selektor auch zweimal aufgerufen, was die Geschwindigkeit verringert.

In einer kürzeren Kettenoperation sind die Anweisungen oft klarer und verschiedene Operationen an jQuery-Objekten können Schritt für Schritt implementiert werden. Die Kettenoperation sollte jedoch nicht zu lang sein, da die Anweisung sonst schwer zu verstehen ist, da es nicht einfach ist, den aktuellen Status des jQuery-Objekts zu überprüfen, insbesondere wenn es um das Hinzufügen und Löschen von Elementen im jQuery-Objekt geht. es ist noch schwieriger zu beurteilen.

Nicht alle jQuery-Funktionen können verkettete Operationen verwenden. Dies hängt mit dem Prinzip verketteter Operationen zusammen. Der Grund, warum verkettete Operationen erreicht werden können, besteht darin, dass jede Funktion das jQuery-Objekt selbst zurückgibt. In der internen Implementierung der jQuery-Klassenbibliothek geben viele Funktionen zwar das jQuery-Objekt selbst zurück, sie werden jedoch alle durch den Aufruf einer begrenzten Anzahl interner Funktionen implementiert. Beispielsweise legt die Funktion attr() das Attribut stone fest . every(object,callback,args)“-Methode. Beachten Sie, dass es sich bei dieser Methode nicht um eine jQuery-Objektmethode handelt. Die jQuery-Objektmethode verfügt außerdem über die Funktion „jQuery.fn.each(callback,args)“. :

Each:function(callback,args){
  ReturnjQuery.each(this,callback,args);
}

Werfen wir einen Blick auf das Rückgabeergebnis der jQuery.each-Funktion:

Each.function(object,callback,args){
  Retumobject;
}

Objekt ist das jQuery.fn-Objekt, also das jQuery-Objekt. Das endgültig zurückgegebene Objekt ist immer noch das jQuery-Objekt.

Mit den folgenden Prinzipien können Sie bestimmen, ob eine Funktion ein jQuery-Objekt zurückgibt, also ob es für Kettenoperationen verwendet werden kann.

Zusätzlich zu Funktionen zum Abrufen bestimmter Daten, wie z. B. dem Abrufen des Attributwerts „attr(name)“ und dem Abrufen der Sammlungsgröße „size()“, geben diese Funktionen offensichtlich Daten zurück. Zusätzlich zu diesen Funktionen können jQuery-Funktionen für Kettenoperationen verwendet werden, beispielsweise zum Setzen des Attributs „attr(name.value)“.

Verwendung der Variable „$“

Die Variable „$“ ist eine Referenz auf die Variable „jQuery“. Die Variable „jQuery“ ist eine globale Variable und das jQuery-Objekt verweist auf „jQUEry.fn“, lassen Sie sich nicht verwirren. „jQuery“-Variablen ähneln statischen Klassen. Die oben genannten Methoden sind statische Methoden und können jederzeit aufgerufen werden. Zum Beispiel „jQuery.each“. „jQuery.fn“ ist eine Instanzmethode und kann nur für das jQuery-Objekt aufgerufen werden. Beispielsweise kann die Methode „jQuery.fn.each()“ nur in der Form „$('#id').each“ aufgerufen werden.

Wie bereits erwähnt, können Sie „$“ anstelle von „jQuery“ verwenden, da es in jQuery die folgende Implementierung gibt:

jQuery=window.jQuery=window.$

Also die Variable „$“ und die Variable „jQuery " Variablen sind eigentlich Es ist eine Eigenschaft des Window-Objekts, bei dem es sich um eine globale Variable handelt. Kann überall auf der Seite aufgerufen werden.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JQuery-Programmierung befassen.