jQuery-Lernzusammenfassung jQuery events_jquery

Schauen wir uns zunächst ein nützliches Beispiel zur Vertiefung unseres Vorwissens an, von dem einige bereits erschienen sind.

Code kopieren Der Code lautet wie folgt:

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

Wenn Sie auf „Bild ausblenden“ klicken, wird das Google-Logobild in einer Sekunde ausgeblendet. Hier verwenden wir die Methode hide(). Natürlich müssen wir die Zeit nicht angeben. Wenn wir Bilder anzeigen möchten, sollten wir die Methode show() verwenden.

Jetzt beginnen wir mit dem Hauptinhalt dieses Artikels: Ereignisse. Möglicherweise ist Ihnen aufgefallen, dass oben an vielen Stellen Ereignisse verwendet wurden. Darunter ist document.ready ein Ereignis, das jQuery mitteilt, dass es sich bei den Ereignissen um Mausbewegungen, Klicks, das Verlassen des Textfelds usw. handelt.

Früher sahen wir oft:

Code kopieren Der Code lautet wie folgt:

In Peking

Diese Art zu schreiben. Von nun an sollte jeder auf diese Schreibweise verzichten. Realisieren Sie die Trennung von JS-Code und HTML, damit die Seite sauberer und effizienter ist. Die aktuelle Schreibmethode lautet:

jQuery("#divRent").click(function() {
  alert("租房贵");
});

Da es sich hierbei um eine Zusammenfassung handelt, werde ich Beispiele verwenden, um so viele Ereignismethoden wie möglich wie in den ersten drei Artikeln aufzuzeichnen, damit jeder bei Bedarf darauf zurückgreifen kann.

Folgendes ist mir während meines Studiums begegnet:

1. one()-Ereignis, bindet ein Ereignis, das einmal ausgeführt werden soll

Code kopieren Der Code lautet wie folgt:

Menschen sind in Peking

Code kopieren Der Code lautet wie folgt:

jQuery("#divRent").one("click", function() {
warning("Mieten ist teuer");
});

Das Obige ist an ein Klickereignis gebunden und beim zweiten Klicken wird keine Eingabeaufforderung angezeigt.

2. Focus()- und Blur()-Ereignisse

Code kopieren Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

jQuery("#tTest").focus(function() {
jQuery(this).css("background", "yellow");
}).blur(function() {
jQuery(this).css("background", "white");
});

Dieses Beispiel verwendet die Kettenschreibmethode, ich glaube, es ist nicht schwer zu verstehen. Wenn Sie mit den CSS-Stilen von jQuery nicht vertraut sind, können Sie die zweite Zusammenfassung lesen. Wenn in diesem Beispiel der Fokus auf dem Textfeld liegt, ändert sich die Hintergrundfarbe in Gelb und beim Verlassen wieder in Weiß. Meiner Meinung nach besteht der Zweck darin, die Benutzererfahrung zu verbessern.

3. keydown()- und keyup()-Ereignisse

Code kopieren Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

jQuery("#tTest").keyup(function() {
jQuery("#lResult").html(jQuery(this).val());
});

Wenn die Taste angezeigt wird (das kann man hier kaum ausdrücken^_^), wird der Inhalt des Textfelds in der Beschriftung angezeigt. Für den Teil über Bedienelementattribute können Sie die dritte Zusammenfassung lesen.

4. subscribe()-Ereignis

Code kopieren Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt: jQuery("#form1").submit(function() {

If (jQuery.trim(jQuery("#text").val()).length == 0) {

         return false;
}
});



Wie Sie sehen können, verwendet dieses Beispiel Serversteuerelemente. Es ist im Wesentlichen dasselbe, letztendlich erfolgt die Übermittlung eines Formulars. Wenn Sie auf die Schaltfläche klicken, wird das Formular gesendet. Wenn der Inhalt des Textfelds leer ist, geben Sie „false“ zurück und senden Sie es nicht ab. Andernfalls senden Sie es ab. Solche Anwendungen sind überall in der Webentwicklung zu sehen.

5. hover()-Ereignis

Code kopieren Der Code lautet wie folgt:

schwebe über mich

Code kopieren Der Code lautet wie folgt: jQuery("#divHover").hover(function() {

jQuery(this).css("background", "yellow");

}, function() {
jQuery(this).css("background", "red");
});



Wenn sich die Maus über das Div bewegt, wird die Hintergrundfarbe des Divs zu Gelb, und wenn die Maus herausbewegt wird, wird die Hintergrundfarbe zu Rot.

Die oben genannten Ereignisse sind relativ häufig und werden häufig verwendet. Natürlich fasst dieser Artikel nur einen kleinen Teil zusammen. Wenn Sie beim Lernen auf Probleme stoßen, müssen Sie die jQuery-Dokumentation verwenden, um sie zu konsultieren.