JQuery Syntax | Erklärt
In diesem Artikel wird die JQuery-Syntax mit Hilfe geeigneter Beispiele im Detail erläutert. So lass uns anfangen!
JQuery Syntax | Erklärt
In JQuery müssen Sie als erstes die HTML -Elemente auswählen, auf denen Sie eine Aktion ausführen möchten. Die grundlegende Syntax von JQuery lautet wie folgt:
$ (Selektor).Aktion();
In der oben gegebenen JQuery-Syntax müssen Sie eine hinzufügen “$Zeichen für den Zugriff auf oder definieren JQuery; dann ein "Wähler”Wird innerhalb der Klammern hinzugefügt, die die Abfrage zum Finden der HTML -Elemente darstellt. Zuletzt, "Aktion()”Ist die Operation, die an den ausgewählten HTML -Elementen durchgeführt wird.
Schauen wir uns nun die Arten von Selektoren an, die Sie in die JQuery -Syntax hinzufügen können.
Arten von Selektoren in JQuery Syntax
JQuery -Selektoren gelten als wesentlicher Bestandteil der JQuery -Bibliothek. Um jQuery -Methoden zu verwenden, müssen Sie ein JQuery -Objekt erstellen, indem Sie ein bestimmtes HTML -Element auswählen.
In jQuery gibt es verschiedene Arten von Selektoren, wie z Elementnamenauswahl, Element #ID Selector, Und Element .Klassenauswahl. Zum Beispiel, um alle Absätze auszuwählen “PElemente verwenden wir den Elementnamen -Selektor auf folgende Weise:
$ ("P").verstecken()
Sie können einem HTML -Element auch eine ID zuweisen und dann denselben Vorgang mit dem Element #ID -Selektor ausführen:
$ ("#btnclick").verstecken()
Mit Hilfe des Elements .Klassenauswahl können Sie gleichzeitig verschiedene HTML -Elemente auswählen, die zur gleichen Klasse gehört:
$ (".Klassenname").verstecken()
Notiz: Zur Auswahl von HTML -Elementen mit ID fügen Sie das Hash -Zeichen hinzu#,”, Gefolgt von der Element -ID und um Elemente mithilfe ihres Klassennamens zu finden, fügen Sie eine" hinzu ".Zeitcharakter gefolgt vom Klassennamen.
Dokumentbereitveranstaltung in JQuery Syntax
Bevor Sie mit einem "arbeiten"dokumentieren”In JQuery stellen Sie sicher, dass es voll geladen ist und alle verwendet werden kann. Der "bereit()"Ereignis der"dokumentierenElement kann für diesen Zweck verwendet werden:
$ (Dokument).Ready (function ()
// schreibe jQuery -Methoden in den Körper auf
);
Die oben gegebene Methode verhindert die Ausführung von JQuery, wenn die “dokumentierenElement ist nicht fertig. Wenn Sie jedoch versuchen, ein noch nicht erstelltes HTML -Element zu verbergen, fehlschlägt die angegebene Aktion in diesem Fall fehl. Stellen Sie also sicher, dass das “dokumentierenIst bereit, bevor der JQuery -Code ausgeführt wird.
Hier ist eine kürzere Methode zum Schreiben des Dokumentbereitveranstaltung:
$ (function ()
// schreibe jQuery -Methoden in den Körper auf
);
Beispiel: Verwenden Sie die Jquery -Syntax zum Verstecken eines HTML -Elements
In diesem Beispiel werden Sie die Verwendung von JQuery -Syntax zum Verstecken eines HTML. Erstens in unserer ““Index.html"Datei Wir werden eine Überschrift mit dem" hinzufügen "H2Tag, ein Absatz mit der “"Tag und eine"Klick mich!" Taste:
Finden Sie HTML -Elemente in JQuery
Dies ist der Hauptabsatz mit einem Beispieltext
Sie können jede Online -Codierungs -Sandbox oder Ihren bevorzugten Code -Editor zur Ausführung des Programms verwenden. Wir werden jedoch den Visual Studio -Code verwenden:
Gehen Sie als Nächstes in Ihre JavaScript -Datei, die ist “Mein Projekt.JSIn unserem Fall und schreiben Sie den folgenden Code in IT aus:
$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("H2").verstecken();
);
);
Der bereitgestellte Code gab diesen JQuery fest “$ (Dokument).bereit()"Methode wird das HTML -Element mit dem" ausblendenH2Elementname, wenn der Benutzer auf die Schaltfläche klickt:
Nachdem wir beide Dateien gespeichert haben, werden wir öffnen “Index.html"Durch die Verwendung von VS -Code"Leberserver" Verlängerung:
Jetzt klicken wir auf die Schaltfläche, die im folgenden Bild hervorgehoben wurde:
Wie Sie sehen können, haben wir das erfolgreich versteckt “H2”HTML -Element, indem Sie der JQuery -Syntax folgen:
Das drehte sich um die grundlegende Syntax von JQuery. Sie können es nach Ihren Vorlieben weiter untersuchen.
Abschluss
Der $ (Selektor).Action () ist die grundlegende JQuery -Syntax, mit der HTML -Elemente ausgewählt und spezifische Aktionen auf sie angewendet werden können. Sobald Sie den erforderlichen Code geschrieben haben, indem Sie die Jquery -Syntax befolgt haben, können Sie das $ (Dokument) verwenden.Ready (function () ) Methode zur Ausführung des Programms. In diesem Artikel wurde die JQuery-Syntax, die Arten von JQuery-Selektoren und die Funktionalität von $ (Dokument) besprochen.Ready (function () ) Methode im Detail.