Detailliertes Beispiel des Kettenprogrammierstils von jQuery

Detailliertes Beispiel des Kettenprogrammierstils von jQuery

Das Implementierungsprinzip der Kettenprogrammierung

jQuery ermöglicht es uns Entwicklern, immer die Punktsyntax zu verwenden, um unsere eigenen Methoden aufzurufen. Der Hauptgrund dafür ist, dass jQuery intern JS-Objekte zur Implementierung verwendet.

Wenn Sie in jQuery weiterhin mit demselben Element oder anderen verwandten Elementen (Geschwisterelementen, über- und untergeordneten Elementen) arbeiten, können Sie die .-Syntax (Punktsyntax) verwenden und weiterschreiben.

$("#box").css("Hintergrund", "pink").css("Schriftgröße":"29px");
$("#box").geschwister().css("Hintergrund", "");

kann wie folgt geschrieben werden:

$("#box").css("Hintergrund", "rosa").geschwister().css("Hintergrund", "rot");

Um Kettenprogrammierung zu implementieren, ist der jQuery-Selektor selbst ein jQuery-Objekt. jQuery verwendet dies intern, um sich selbst zurückzugeben.

    //Deklarieren Sie in js ein Objekt var obj = {  
         name:"Name", 
        Beschreibung: Funktion(){   
        console.log(this); // Aktuelles Objekt ausgeben console.log(this.name); // Eigenschaft des Objekts aufrufen return this; // Das Prinzip der Kettenprogrammierung besteht darin, dass nach dem Aufruf der Methode die Methode selbst das Objekt zurückgibt.
},  
      lesen: Funktion(){  
        console.log("hallo!");    
        gib dies zurück; 
    }}


Beispiel für den Kettenprogrammierungsstil von jQuery

Zunächst werde ich anhand eines Falls den Kettenprogrammierstil von jQuery demonstrieren. Schreiben Sie zunächst eine Seite zur Anzeige einer Liste. Der Code lautet wie folgt:

<Text>
    <div>
        <ul Klasse="Menü">
            <li Klasse="Ebene1">
                <a href="#">Obst</a>
                <ul Klasse="Ebene2">
                    <li><a href="#">Apfel</a></li>
                    <li><a href="#">Ananas</a></li>
                    <li><a href="#">Melone</a></li>
                </ul>
            </li>
            <li Klasse="Ebene1">
                <a href="#">Grundnahrungsmittel</a>
                <ul Klasse="Ebene2">
                    <li><a href="#">Nudeln</a></li>
                    <li><a href="#">Mantou</a></li>
                    <li><a href="#">Reis</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

<Skripttyp="text/javascript">
    $(Funktion() {
        $(".level1 > a").klick(function() {
            $(diese).addClass("aktuell").nächste().zeigen().übergeordnet.geschwister().kinder("ein").removeClass("aktuell").nächste().verstecken();
            gibt false zurück;
        });
    });
</Skript>

Der Effekt nach der Ausführung des Codes ist in der folgenden Abbildung dargestellt:

Der Erweiterungseffekt des obigen Codes wird durch die Kettenoperation von jQuery erreicht. Alle Operationen zum Hinzufügen der aktuellen Klasse, Methodenaufrufe zum Abfragen untergeordneter Elemente und Aufrufe von Animationsmethoden werden für dasselbe Element ausgeführt. Daher werden nach dem Abrufen eines jQuery-Objekts alle nachfolgenden Methoden- und Attributaufrufe kontinuierlich durch "." aufgerufen. Dieser Modus ist eine Kettenoperation.

Um die Lesbarkeit und Wartbarkeit des Codes zu verbessern, ändern wir das obige Kettencodeformat wie folgt:

<Skripttyp="text/javascript">
    $(Funktion() {
        $(".level1 > a").klick(function() {
            // Füge dem aktuellen Element den aktuellen Stil hinzu $(this).addClass("current")
                // Das nächste Element wird angezeigt.next().show()
                // Entferne den aktuellen Stil vom untergeordneten Element a des Geschwisterelements des übergeordneten Elements.parent.siblings().children("a").removeClass("current")
                // Ihr nächstes Element ist hidden.next().hide();
            gibt false zurück;
        });
    });
</Skript>

Nach der Anpassung des Standardformats ist der Code leichter lesbar und für die spätere Wartung bequemer.

Gleichzeitig folgen wir bei der Durchführung von Kettenoperationen am selben jQuery-Objekt hauptsächlich den folgenden drei Formatspezifikationen.

(1) Für maximal drei Operationen am selben Objekt können diese direkt in eine Zeile geschrieben werden. Der Code lautet wie folgt:

<Skripttyp="text/javascript">
    $(Funktion() {
        $("li").show().unbind("klicken");
    });
</Skript>

(2) Für mehrere Operationen am selben Objekt empfiehlt es sich, eine Operation pro Zeile zu schreiben. Der Code lautet wie folgt:

<Skripttyp="text/javascript">
    $(Funktion() {
        $(diese).removeClass("mouseout")
            .addClass("mouseover")
            .stoppen()
            .fadeTo("schnell", 0,5)
            .fadeTo("schnell", 1)
            .unbind("klicken")
            .click(Funktion() {
                .......
            });
    });
</Skript>

(3) Bei wenigen Operationen auf mehreren Objekten reicht es aus, für jedes Objekt eine Zeile zu schreiben. Wenn Unterelemente beteiligt sind, ist auf entsprechende Einrückungen zu achten. Der Code lautet wie folgt:

<Skripttyp="text/javascript">
    $(Funktion() {
        $(diese).addClass("Hervorhebung")
            .Kinder("a").zeigen().ende()
            .geschwister().removeClass("highLight")
            .children("a").hide();
    });
</Skript>

Das Obige bezieht sich auf den Kettenprogrammierstil von jQuery.

Zusammenfassen

Dies ist das Ende dieses Artikels über den jQuery-Kettenprogrammierungsstil. Weitere relevante Inhalte zur jQuery-Kettenprogrammierung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Verwenden Sie JavaScript-Kettenprogrammierung, um JQuery-Funktionen zu simulieren

<<:  Analyse der schlechten Leistung, die durch einen großen LIMIT-Offset in der MySQL-Abfrage verursacht wird

>>:  Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

Artikel empfehlen

Zwei Möglichkeiten zur Implementierung von Square Div mit CSS

Ziel: Erstelle ein Quadrat, dessen Seitenlänge gl...

Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind

1. getElementById von IE8 unterstützt nur IDs, nic...

W3C Tutorial (13): W3C WSDL Aktivitäten

Bei Webdiensten geht es um die Kommunikation zwis...

Lösung für Fremdschlüsselfehler bei der MySQL-Tabellenerstellung

Datenbanktabelle A: Tabelle erstellen Task_Desc_T...

So öffnen Sie den Port in Centos7

Die Standard-Firewall von CentOS7 ist nicht iptab...

JavaScript fügt Prototyp-Methodenimplementierung für integrierte Objekte hinzu

Die Reihenfolge, in der Objekte Methoden aufrufen...

Express implementiert Login-Verifizierung

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der Primärschlüssel und Transaktionen in MySQL

Inhaltsverzeichnis 1. Kommentare zu MySQL-Primärs...

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10

Super ausführliches Tutorial zur Installation und...

CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“

1. Schwebendes Layout 1. Lassen Sie zuerst das Di...

Mybatis implementiert Details zum Abfangen und Ändern von SQL-Abfragen

Vorwort Eine der Funktionen eines Interceptors be...

Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>

Wir alle Webmaster wissen, dass es bei der Optimi...