Detaillierte Erklärung der jQuery-Kettenaufrufe

Detaillierte Erklärung der jQuery-Kettenaufrufe

Kettenanrufe

Nachdem das jQuery-Objekt eine beliebige Methode aufgerufen hat (außer der Knotenbeziehungsmethode), hat die Methode einen Rückgabewert, der das jQuery-Objekt selbst ist. Dieses Phänomen bietet uns Komfort und wir können weiterhin jQuery-Methoden und -Eigenschaften für die Ausführungsergebnisse aufrufen. Das heißt, Sie können das jQuery-Objekt verwenden, um kontinuierliche Punktaufrufe durchzuführen

console.log($(this).css("Hintergrundfarbe", "pink").html("Hallo"));

Zusätzlich zu den Knotenbeziehungsmethoden ist der Rückgabewert nach der Ausführung anderer Methoden des jQuery-Objekts das Objekt selbst, und Sie können weiterhin die Methoden und Eigenschaften anderer jQuery-Objekte in einer Kette aufrufen. Dies vereinfacht das Schreiben von Code

Ein kleiner Koffer

Klicken Sie auf ein Element, um es selbst rosa, seine Geschwister gelb, sein übergeordnetes Element blau, die Geschwister seines übergeordneten Elements farbig und die Geschwister seines übergeordneten Elements selbst orange zu machen.

<Stil>
  * {
       Rand: 0;
       Polsterung: 0;
     }

  .Kasten {
       Breite: 400px;
       Höhe: 60px;
       Rand: 1px durchgezogen #000;
       Rand oben: 2px;
      }

  .box p,.box h2 {
       schweben: links;
       Breite: 60px;
       Höhe: 60px;
       Rand rechts: 20px;
       Hintergrundfarbe: RGB (164, 247, 233);
    }
</Stil>
<!------------------------------------------------------------------>

<Text>
  <div Klasse="Box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div Klasse="Box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div Klasse="Box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
  </div>
  <div Klasse="Box">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <h2>h2</h2>
  </div>
  <script src="../jq/jquery-1.12.4.min.js"></script>
  <Skript>
     var $p = $("p");
     var $box = $(".box")
     $p.click(Funktion () {
      // Implementierung des Kettenaufrufs $(this).css("background-color","pink") //Ändert sich selbst in Pink.siblings().css("background-color","yellow") //Die eigenen Brüder ändern sich in Gelb.parent().css("background-color","skyblue") //Und sein Elternteil ändert sich in Blau.siblings().css("background-color","lightgreen") //Die Brüder des Elternteils ändern sich in Hellgrün.children().css("background-color","orange") //Die Brüder des Elternteils ändern sich in Orange}) 

Oben finden Sie eine ausführliche Erklärung zum jQuery-Kettenaufruf. Weitere Informationen zum jQuery-Kettenaufruf finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Beispiele für JQuery-Spezialeffekte und Kettenaufrufvorgänge
  • Python implementiert ein Beispiel für Kettenaufrufe ähnlich wie jQuery
  • Eine kurze Analyse von jQuery-Kettenaufrufen und Wissen zeigen
  • Eine kurze Analyse der Kettenaufrufe jeder Funktion von jQuery
  • Eine kurze Analyse des Kettenaufrufs von jQuery
  • Implementierungscode für Javascript-Kettenaufrufe (siehe jQuery)
  • Imitieren Sie den Kettenaufruf jeder jQuery-Funktion

<<:  Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper

>>:  Mehrere Möglichkeiten zum Berechnen des Alters anhand des Geburtstags in MySQL

Artikel empfehlen

js Promise-Methode zur gleichzeitigen Steuerung

Inhaltsverzeichnis Frage Hintergrund Idee & U...

Hintergrundbild-Cache unter IE6

Fehler beim Flackern des CSS-Hintergrundbilds in ...

Vue.js-Framework implementiert Warenkorbfunktion

In diesem Artikel wird der spezifische Code des V...

Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker

1. Übersicht Redis Cluster ermöglicht hohe Verfüg...

Analyse der Implementierung der MySQL-Anweisungssperre

Zusammenfassung: Analyse von zwei MySQL SQL-Anwei...

25 CSS-Frameworks, Tools, Software und Vorlagen geteilt

Kobold-Kuh herunterladen CSS-Fussel herunterladen...

So kompilieren und installieren Sie OpenCV unter Ubuntu

Einfache Installation von opencv2: conda installi...

Hilfedokument „MySQL-Lernhinweise“

Systemhilfe anzeigen help contents mysql> Hilf...

Schreiben Sie mit CSS in drei Schritten einen Coupon für eine Shopping-Card

Heute ist der 618. und alle großen Einkaufszentre...

So installieren Sie die Linux-Onlinesoftware gcc online

Befehle zur Linux-Onlineinstallation: yum install...