JQuery Events | Erklärt
JQuery ist so konzipiert, dass sie mit Veranstaltungen auf der Webseite umgehen können. Ereignisse (wenn Sie noch nicht vertraut sind) sind Benutzeraktionen, die dazu führen, dass eine Webseite reagiert. Um Ereignisse besser zu erklären, können wir sagen, dass jede Aktion, auf die eine Webseite reagieren kann Maus über, klicken, Dokument geladen werden.
JQuery Events | Syntax- und Ereignismethoden
Die Syntax von JQuery -Ereignissen besteht darin, a zu verwenden Dot-Operator Nach der Fabrikfunktion $ () das enthält die Selektoren.
$ ("P").klicken();
Mit der obigen Zeile wird ein Ereignishörer erstellt, der nächste Schritt besteht darin, zu definieren, was zu tun ist, wenn dieses spezifische Ereignis ausgeführt wird. Definieren Sie dazu die Funktion in der Klammung des Ereignisses wie:
$ ("P").klicken (function ()
// Körper der Funktion
);
JQuery Events | Beispiele
Um die Funktionsweise von JQuery -Events und Event -Handlern zu demonstrieren, werden wir eine HTML -Webseite mit Google CDN aufstellen, die JQuery in seinem Skript -Tag enthalten ist:
Die HTML-Webseite enthält diese Zeilen, um unsere Testwebseite einzurichten:
Ich ändere die Farbe bei der Last
Hallo! Ich bin Linuxbot
Doppelklicken Sie auf mich!
Klicken Sie, um mich zu verbergen!
Wenn Sie die HTML -Datei ausführen, erhalten Sie das folgende Ergebnis im Browser:
Der Erste Veranstaltung Dass wir übergehen werden, ist die Dokument-on-fähig Fall. Dieses Ereignis wird automatisch ausgeführt, wenn die DOM überprüft, ob die Webseite vollständig geladen wurde und nicht auf weitere Aktionen oder Antworten wartet. Wir werden also den Hintergrund der ändern Tag beim Laden von Dokumenten mit den folgenden Codezeilen:
$ (Dokument).Ready (function ()
$ ("H1").CSS ("Hintergrund", "Rot");
);
Sie erhalten die folgende Ausgabe:
Wie Sie sehen können, konnten wir die Hintergrundfarbe der Hintergrund ändern H1 mit JQuery -Ereignissen.
Der als nächstes sogarT wird der sein Taste drücken, Wir werden den Benutzer beim Taste drücken, um den Benutzer für seinen Namen zu fordern. Verwenden Sie den Code:
$ ("Button").klicken (function ()
var xyz = prompt ("Geben Sie Ihren vollständigen Namen ein");
);
Sie erhalten die folgende Ausgabe beim Drücken der Taste:
Wie Sie sehen können, klicken Sie beim Klicken auf die Schaltfläche „Klicken Sie auf mich!”, Es wurde ein schnelles Dialogfeld angezeigt, in dem nach dem vollständigen Namen des Benutzers gefragt wurde.
Mausklickereignisse sind ziemlich häufig, aber etwas, das weit verbreitet ist. Um dies zu demonstrieren, werden wir eine Nachricht auf dem Bildschirm als Warnung anzeigen, wenn der Benutzer doppelt auf den Absatz mit der ID klicktDBLCLICK”Mit den folgenden Codezeilen:
$ ("#DBLCLICK").DBLCLICK (function ()
Alarm ("Ich wünsche Ihnen einen schönen Tag!");
)
Mit den obigen Linien ist der Ausgang als
Beim Doppelklicken auf den Text wurde dem Benutzer ein neues Alarmdialogfeld mit einem Gruß gezeigt.
Wir können sogar das verwenden “Das"Referenz bei der Arbeit mit JQuery -Ereignissen, um zu demonstrieren, dass wir den Text mit der ID verbergen werden"verstecken”Nach Klick. Wir tun dies mit den folgenden Codezeilen:
$ ("#hide").klicken (function ()
$ (this).verstecken();
);
Sie erhalten die folgende Ausgabe, wenn Sie auf den Text klicken, der besagt. “Klicken Sie, um mich zu verbergen!”:
Der Text wurde versteckt, als er einmal darauf klickte.
Abschluss
Die JQuery Library bietet die Funktionalität zum Verwalten und Reagieren auf Web-Page-Ereignisse. Dies ist der Grund, warum JQuery als “bezeichnet wirdZugeschnitten”Für die Event -Handhabung. JQuery -Ereignisse werden der JQuery -Selektorfunktion hinzugefügt ($ ()) Durch die Verwendung eines Punktbetreibers erstellt dies einen Ereignishörer für dieses Element, das für ein bestimmtes Ereignis hört. Um eine auf diesem Ereignis basierende Aktion auszuführen, müssen Sie eine Funktion erstellen, die der Webseite mitteilt, was für dieses bestimmte Ereignis zu tun ist. Diese Funktion wird üblicherweise in der Klammung des Ereignishörers geschrieben.