jquery事件怎么实现

jquery事件怎么实现

这篇文章主要讲解了“jquery事件怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery事件怎么实现”吧！

jquery事件：1、鼠标事件，包括click单击事件、mouseover事件等；2、键盘事件，包括keydown按下按键、keyup释放按键等；3、表单事件，包括focus获得焦点、blur失去焦点等；4、绑定事件，bind绑定事件；5、复合事件，包括hover方法触发事件、toggle()方法触发事件等等。

本教程操作环境：windows10系统、jquery3.4.1版本、Dell G3电脑。

jquery事件都有哪些

jQuery事件是对JavaScript事件的封装，常用事件如：鼠标事件，键盘事件，表单事件，绑定事件，复合事件等等

1.鼠标事件

方法如下

click() :单击事件、触发或将函数绑定到指定元素的click事件

mouseover(): 触发或将函数绑定到指定元素的mouseover事件

mouseout() ：触发或将函数绑定到指定元素的mouseout的事件

代码示例：

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

2.键盘事件：

方法如下：

keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件

keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件

keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件

代码示例：

  $(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.表单事件：

方法如下：

focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件

blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件

代码示例：

// 查询输入框    $("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、绑定事件：

语法解析：

bind(type,[data],fn),其中data不是必需的

type:事件类型、主要包括blur、focus、click、mouseout等基础事件，此外也还可以是自定义事件

fn : 用来绑定的处理函数

代码示例：

绑定一个、

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

绑定多个、

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

移除方法：

unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件

unbind如果要移除多个只需在两两之间添加一个空格即可

代码示例：

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

注意：当unbind()不带参数时，表示移除所绑定的全部事件

5、复合事件

hover()方法

语法：hover(enter,leave);

该方法相当于mouseover与mouseout事件的组合

代码示例：

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

toggle()方法

toggle()方法用于模拟鼠标连续click事件

代码示例：

$("body").toggle(  function () { }, //第一次点击触发  function () { }, //第二次点击触发  function () { } //第三次点击触发  ...     //...  );

同时toggle()方法还有一个作用：切换元素可见状态

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

感谢各位的阅读，以上就是“jquery事件怎么实现”的内容了，经过本文的学习后，相信大家对jquery事件怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[