Heim >Web-Frontend >Front-End-Fragen und Antworten >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.
JQuery-Ereignisse sind Kapselungen von JavaScript-Ereignissen, darunter: Mausereignisse, Tastaturereignisse, Formularereignisse, Bindungsereignisse usw.
$(function () { $("input").click(function () { $("li").mouseover(function () { $(this).css("background", "green"); }).mouseout(function () { //this.style.background = ""; this.style.cssText = "background:"; }); }); });
2 Tastaturereignis:
$(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:
// 查询输入框 $("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:
$("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
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!