JQuery Selectors | Erklärt

JavaScript wird am häufigsten zur Manipulation der HTML -Elemente einer Webseite verwendet, indem Sie mit Hilfe des DOM (Dokumentobjektmodell) auf sie zugreifen. Es kann sogar zur Anzeige von Animationen und anderen Effekten als Ergebnis einer bestimmten Aktion, die vom Benutzer durchgeführt wird. Um all dies zu tun, braucht JavaScript zuerst einen Verweis auf das HTML -Element, das wir manipulieren möchten.

Die Auswahl der Elemente der HTML -Webseite kann im JavaScript einige Codezeilen aufnehmen, aber mit JQuery wird der Code präzise und sieht sehr lesbar aus. JQuery unterstützt die Auswahl fast aller Selektoren Definiert im CS3 und bietet auch einige integrierte benutzerdefinierte Selektoren.

Hinzufügen von JQuery zu unserer HTML -Seite

Um JQuery in unserem Projekt zu sein, müssen wir zunächst JQuery importieren, indem wir einen Link zu einer Jquery -Datei in das Skript -Tag einstellen. Die effektivste Methode zum Importieren von JQuery besteht darin, eine von Google CDN gehostete JQuery in der HTML -Datei zu verwenden. Verwenden Sie die folgenden Zeilen im Skript -Tag:

Die Fabrikfunktion

Die JQuery -Selektorfunktionen werden häufig als Fabrikfunktion bezeichnet. Sie beginnt mit einem Dollarzeichen "$" gefolgt von runden Klammern oder Klammern "()". Diese Werksfunktion wird verwendet, um auf ein Element der Webseite zu verweisen, und Sie können ein Ereignis mit einem Punktbetreiber hinzufügen. Zum Beispiel:

$ (Dokument).Ready (function ()
// im Körper der Funktion

);

JQuery Selektoren

JQuery -Selektoren oder Fabrikfunktionen arbeiten an drei Hauptauswahlern, nämlich: Tag -ID, Tag -Name, Tag -Klasse.

• Tagenname: Dies wird verwendet, um den Namen des Elements aus der Kuppel auszuwählen, beispielsweise, wenn Sie alle alle auswählen möchten H1 -Tags.
• Tag -Klasse: Dies wird verwendet, um ein Element mit einer bestimmten Klasse auszuwählen. Zum Beispiel, wenn Sie ein Element mit der Klasse auswählen möchten “meine Klasse”Sie können verwenden $ ('.meine Klasse')
• Tag -ID: Dies wird verwendet, um ein Element mit einer bestimmten ID auszuwählen. Zum Beispiel ein Element mit einer ID von “auswählen“meine ID”Sie können verwenden $ ('#myid')

Elemente mit Namen auswählen

Um die Verwendung von JQuery -Selektoren zu präsentieren. Angenommen, Sie möchten alle auswählen

Ein P -Tag

Ein weiteres P -Tag

Noch ein P -Tag

Sie sollten die folgende Ausgabe auf der Webseite sehen:

Um die zu manipulieren

Tags verwenden den folgenden Skriptcode:

$ (Dokument).Ready (function ()
$ ("P").CSS ("Hintergrund", "Gelb");
);

Mit den obigen Zeilen sieht die Ausgabe so aus

Wir haben sogar Filterauswahl; Angenommen, wir möchten nur das letzte auswählen $ (Dokument).Ready (function ()
$ ("P: Last").CSS ("Hintergrund", "Gelb");
);

Dies gibt uns die folgende Ausgabe:

Wie Sie sehen können, konnten wir auf einem bestimmten auswählen

Schild Verwenden des gefilterten Namensauswahl.

Elemente nach ID auswählen

Um die ID -Selektoren zu demonstrieren, haben wir die folgenden Zeilen in der HTML -Datei:

Ein p -Tag mit der ID Hallo

Ein weiteres P -Tag

Noch ein P -Tag

Wie Sie sehen können, der erste

Tag hat die ID "Hallo", Um dieses Element mit seiner ID zu manipulieren, können wir den folgenden Skriptcode verwenden:

Wie Sie im obigen Bild sehen können, konnten wir ein Element mit seiner ID auswählen und seine Styling -Eigenschaft mit JQuery ID Selector manipulieren.

Auswählen eines Elements nach Klasse

Um ein Element mit der Klasse auszuwählen, verwenden wir die Punkt Vor dem Namen der Klasse in der Fabrikfunktion, um die Verwendung des JQuery -Klassenauswählers nachweisen zu können, geben wir einem der P -Tags eine Klasse an. Unser HTML -Code sieht so aus:

Ein p -Tag mit der ID Hallo

Ein weiteres P -Tag

Noch ein P -Tag, aber mit etwas Klasse

Um die Klasse „MyClass“ auszuwählen und ihnen einen Hintergrund von Rot zu geben, verwenden wir den folgenden Skriptcode:

$ (Dokument).Ready (function ()
$ (".meine Klasse").CSS ("Hintergrund", "Rot");
);

Mit dem obigen Code sehen Sie die folgende Ausgabe:

Wie Sie sehen können, konnten wir das Element mit der Klasse „Myclass“ mit JQuery -Klassenauswahlern manipulieren.

Abschluss

JavaScripts berühmteste Bibliothek JQuery ist sehr nützlich und zeitsparend, wenn es darum geht, Elemente auf einer Webseite zu manipulieren. Das einzige Vorbereitungsvermögen der Verwendung von JQuery in einem Projekt besteht darin. Die JQuery besteht aus einer Funktion, die als Fabrikfunktion bezeichnet wird, mit der Benutzer Elemente der Webseite auswählen und ihre Eigenschaften manipulieren können. Die Fabrikfunktion '$ (")' ' funktioniert an 3 grundlegenden Selektoren, die nämlich sind, ID -Selektor, Namenswahl- und Klassenauswahl.