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:

c2927140466346f8989b95bca6593c33
2f1bce1f8f40972dd0f7db981ba6caec

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:

08eed9cee4798f98e66b3cb42d1a2e72In Peking16b28748ea4df4d9c2150843fecfba68

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:

220dad31e9953ce1caefcfa84705a250Menschen sind in Peking16b28748ea4df4d9c2150843fecfba68

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:

d98f0c487087b05cd3d419ae72cd7696

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:

4b2764a3c367b627d6153bdf397b9c24 98f415770703c711e9c2bd3c6f6867da8c1ecd4bb896b2264e0711597d40766c

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:

21450525e974e9be578136fc32da3f7c
a9aafc0e48dc1e40a299f1198237c1bc 976559bbc6f1fbf8c3657ed3cc58e825 1265af6dee180289cdd7fb3022456895 f5a47148e367a6035fd7a2faa965022e

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: 7f0eda05e93e41d7a8baaa89a79f95f9schwebe über mich16b28748ea4df4d9c2150843fecfba68

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.