Funktionen und Vergleich der JavaScript-Bibliothek
Um die Entwicklung von JavaScript zu vereinfachen, wurden einige JavaScript-Bibliotheken entwickelt, die viele vordefinierte Objekte und Dienstprogrammfunktionen kapseln. Es kann Benutzern dabei helfen, Rich-Client-Seiten mit Web 2.0-Funktionen zu erstellen, die schwierige Interaktionen erfordern, und ist mit den wichtigsten Browsern kompatibel
Derzeitbeliebte JavaScript-Bibliothekensind:
Einführung in jQuery
jQuery ist nach Prototype eine weitere hervorragende JavaScript-Bibliothek
jQuery-Philosophie: Weniger schreiben, mehr tun. Die Vorteile sind wie folgt:
Leicht
Leistungsstarker Selektor
Hervorragende Kapselung von DOM-Operationen
Zuverlässiger Mechanismus zur Ereignisbehandlung
Perfektes Ajax
Ausgezeichnete Browserkompatibilität
Kettenbetriebsmodus
……
jQuery: HelloWorld
jQuery-Objekt
jQuery-Objekt ist das Objekt, das durch Umschließen des DOM-Objekts durch jQuery ($()) generiert wird
jQuery-Objekte sind einzigartig für jQuery. Wenn es sich bei einem Objekt um ein jQuery-Objekt handelt, kann es die Methoden in jQuery verwenden: $(“#persontab”).html();
Das jQuery-Objekt kann keine Methode des DOM-Objekts verwenden, und das DOM-Objekt kann keine Methode von jQuery verwenden
Konvention: Wenn Sie ein jQuery-Objekt erhalten, fügen Sie $ vor der Variablen
hinzuvar $variable = jQuery-Objekt
Var-Variable = DOM-Objekt
DOM-Objekt in jQuery-Objekt konvertiert
Für ein DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen (das jQuery-Objekt ist das Objekt, das durch Umschließen des DOM-Objekts durch jQuery generiert wird), und Sie können ein jQuery-Objekt erhalten.
Nach der Konvertierung können Sie die Methoden in jQuery verwenden
JQuery-Objekt in DOM-Objekt konvertieren
jQuery-Objekte können keine Methoden in DOM verwenden, aber wenn jQuery die gewünschten Methoden nicht kapselt und Sie DOM-Objekte verwenden müssen, gibt es zwei Methoden wie folgt:
(1) Das jQuery-Objekt ist ein Array-Objekt und das entsprechende DOM-Objekt kann über die Methode [index] abgerufen werden
(2) Verwenden Sie die Methode get(index) in jQuery, um das entsprechende DOM-Objekt abzurufen
jQuery-Selektor
Selektoren sind die Grundlage von jQuery. In jQuery basieren Ereignisverarbeitung, DOM-Traversal und Ajax-Operationen alle auf Selektoren.
Vorteile von jQuery-Selektoren:
Einfache SchreibmethodeVollständiger Mechanismus zur Ereignisbehandlung
BasisauswahlDer Basisselektor ist der am häufigsten verwendete Selektor in jQuery und auch der einfachste Selektor. Er sucht nach DOM-Elementen anhand der Element-ID, der Klasse und des Tag-Namens (ID kann nur einmal in einer Webseite und Klasse verwendet werden). darf wiederholt verwendet werden).
Einfaches Auswahlbeispiel
Ändern Sie die Hintergrundfarbe des Elements mit der ID eins in #bbbfaa
Ändern Sie die Hintergrundfarbe aller Elemente mit Klasse Mini in #bbffaa
Ändern Sie die Hintergrundfarbe aller Elemente mit dem Namen
Ändern Sie die Hintergrundfarbe aller Elemente in #bbffaa
Ändern Sie die Hintergrundfarbe aller -Elemente und des Elements mit der ID zwei in #bbbfaa
EbenenauswahlWenn Sie bestimmte Elemente über die hierarchische Beziehung zwischen DOM-Elementen erhalten möchten, z. B. untergeordnete Elemente, untergeordnete Elemente, benachbarte Elemente, Geschwisterelemente usw., müssen Sie hierarchische Selektoren verwenden.
Hinweis: Der Selektor („prev ~ div“) kann nur Geschwisterelemente nach dem „# prev“-Element auswählen, während die Methode siblings() in jQuery nichts mit den vorderen und hinteren Positionen zu tun hat, sofern dies der Fall ist Wenn es sich um einen Geschwisterknoten handelt, kann er
auswählenBeispiel für einen hierarchischen Selektor
Ändern Sie die Hintergrundfarbe aller
Ändern Sie die Hintergrundfarbe des inneren Unterabschnitts
zu #bbbfaaÄndern Sie die Hintergrundfarbe des nächsten
Ändern Sie die Hintergrundfarbe aller gleichgeordneten
Ändern Sie die Hintergrundfarbe aller
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
