Heim  >  Artikel  >  Web-Frontend  >  Was sind die JQuery-Ereignisse?

Was sind die JQuery-Ereignisse?

WBOY
WBOYOriginal
2022-06-13 16:53:195403Durchsuche

jquery-Ereignisse: 1. Mausereignisse, einschließlich Klickereignisse, Mouseover-Ereignisse usw.; 2. Tastaturereignisse, einschließlich Keydown, Keyup usw.; 3. Formularereignisse, einschließlich Fokusgewinnen, Fokusverlust usw.; 4. Bindungsereignisse, Bindungsereignisse 5. Zusammengesetzte Ereignisse, einschließlich Ereignisse, die durch die Hover-Methode ausgelöst werden, Ereignisse, die durch die Methode toggle() usw. ausgelöst werden.

Was sind die JQuery-Ereignisse?

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.4.1-Version, Dell G3-Computer.

Was sind die JQuery-Ereignisse?

JQuery-Ereignisse sind Kapselungen von JavaScript-Ereignissen, darunter: Mausereignisse, Tastaturereignisse, Formularereignisse, Bindungsereignisse usw.

Methode wie folgt

click(): Klickereignis, löst die Funktion aus oder bindet sie an das Klickereignis des angegebenen Elements

mouseover(): löst die Funktion aus oder bindet sie an das Mouseover-Ereignis des angegebenen Elements

mouseout(): auslösen oder binden Die Funktion ist an das Mouseout-Ereignis des angegebenen Elements gebunden

Codebeispiel:

 $(function () {
            $("input").click(function () {
                $("li").mouseover(function () {
                    $(this).css("background", "green");
                }).mouseout(function () {
                    //this.style.background = "";
                    this.style.cssText = "background:";
                });
            });
        });

2 Tastaturereignis:

Die Methode lautet wie folgt:

keydown(): Wenn die Taste gedrückt wird, Lösen Sie die Funktion aus oder binden Sie sie an das angegebene Element. Das Tastendruckereignis

keyup(): Das Tastendruckereignis, das die Funktion auslöst oder an das angegebene Element bindet, wenn die Taste losgelassen wird.

keypress(): Das Tastendruckereignis, das das auslöst oder bindet Funktion zum angegebenen Element, wenn druckbare Zeichen generiert werden

Codebeispiel:

  $(function () {
        $("p input").keyup(function () {
            $("#events").append("keyup");
        }).keydown(function () {
            $("#events").append("keydown");
        }).keypress(function () {
            $("#events").append("keypress");
        });
        $(document).keydown(function (event) {
            if (event.keyCode == "13") {
                //按enter键
                alert("确认要提交么?");
            }
        });
    });

3. Formularereignisse:

Die Methoden sind wie folgt:

focus(): Fokus abrufen, auslösen oder eine Funktion an den Fokus binden Ereignis des angegebenen Elements

blur(): Fokus verlieren, Funktion auslösen oder an das Unschärfeereignis des angegebenen Elements binden

Codebeispiel:

// 查询输入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("请输入要查询的问题"); 
  });

2,

 $(function () {
 //给文本框添加边框样式
     $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
    });
  });

4, Bindungsereignis:

Syntax Analyse:

bind(type,[data],fn) , Daten sind nicht erforderlich

Typ: Ereignistyp, umfasst hauptsächlich grundlegende Ereignisse wie Unschärfe, Fokus, Klicken, Mouseout usw. Darüber hinaus kann es auch ein sein Benutzerdefiniertes Ereignis

fn: Verarbeitungsfunktion für die Bindung

Codebeispiel:

Eins binden,

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

Mehrere binden,

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

Remove-Methode:

unbind([type],[fn]) ist genau das Gegenteil von das Bindungsereignis. Wenn die Methode keine Parameter hat, bedeutet dies, dass alle Ereignisse entfernt werden.

Wenn Sie mehrere Unbind-Ereignisse entfernen möchten, fügen Sie einfach ein Leerzeichen zwischen den beiden ein.

Codebeispiel:

 $(function () {
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });

Hinweis: Wenn unbind() keine Parameter benötigt Dies bedeutet, dass alle gebundenen Ereignisse entfernt werden sollen

Codebeispiel:

$("li").hover(function() {
               $("li").css("background", "gray");
           }, function() {
               $("li").css("background", "green");
           });

toggle()-Methode

toggle()-Methode wird verwendet, um kontinuierliche Mausklickereignisse zu simulieren

Codebeispiel:

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);
Gleichzeitig hat die toggle()-Methode auch eine weitere Funktion: Ändern des sichtbaren Zustands des Elements

$('input').toggle( 
  function () {
  $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
  },
  function () {
   $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
  }
 );

Video-Tutorial-Empfehlung:

jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die JQuery-Ereignisse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn