suchen

Heim >Web-Frontend >js-Tutorial >Grundkenntnisse der jQuery-Einführung_jquery

Grundkenntnisse der jQuery-Einführung_jquery

WBOY
WBOYOriginal
2016-05-16 16:20:281255Durchsuche

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

hinzu

var $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 Schreibmethode

Vollständiger Mechanismus zur Ereignisbehandlung

Basisauswahl

Der 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

in #bbffaa

Ändern Sie die Hintergrundfarbe aller Elemente in #bbffaa

Ändern Sie die Hintergrundfarbe aller -Elemente und des Elements mit der ID zwei in #bbbfaa

Ebenenauswahl

Wenn 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ählen

Beispiel für einen hierarchischen Selektor

Ändern Sie die Hintergrundfarbe aller

innerhalb von zu #bbfaa

Ändern Sie die Hintergrundfarbe des inneren Unterabschnitts zu #bbbfaa

Ändern Sie die Hintergrundfarbe des nächsten

mit der ID eins in #bbbfaa

Ändern Sie die Hintergrundfarbe aller gleichgeordneten

-Elemente hinter dem Element mit der ID zwei in #bbbfaa

Ändern Sie die Hintergrundfarbe aller

-Elemente mit der ID zwei in #bbbfaa

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des jQuery-Filters selector_jqueryNächster Artikel：Detaillierte Erläuterung des jQuery-Filters selector_jquery

In Verbindung stehende Artikel

Mehr sehen