Was sind die JQuery-Ereignisse?

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.

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!