全球滚动:jquery中常用的事件有哪些

时间:2023-01-03 17:59:19       来源:PHP中文网

本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。

一、jQuery事件的分类

jQuery事件是对JavaScript事件的封装,常用事件分类如下:


(资料图片仅供参考)

1、基础事件

window事件。鼠标事件。键盘事件。表单事件。

2、复合事件是多个事件的组合

鼠标光标悬停。鼠标连续点击。

二、鼠标事件

鼠标事件是当用户在文档上面移动或单击鼠标时而产生的事件,常用鼠标事件有:

三、键盘事件

用户每次按下或者释放键盘上的按键时都会产生事件,常用键盘事件如下:

四、表单事件

当元素获得焦点时,会触发focus()事件,失去焦点时,会触发blur()事件。

表单提交时会触发submit()事件。

五、综合示例

需求说明:

1、用户名输入框获得焦点时输入框背景色为浅蓝色,失去焦点时还原为白色背景色。2、鼠标移至登录按钮时字体变粗,移出时整体恢复正常。

3、敲击键盘的“回车”键时触发表单提交事件。

代码:

                事件演示示例                  <script src="../jquery-3.3.1.js"></script>              <script>         $(function(){             // 用户名输入框的焦点事件             $("input[name="member"]").focus(function(){                 $(this).addClass("input_focus");             });             // 用户名失去焦点             $("input[name="member"]").blur(function(){                 $(this).removeClass("input_focus");             });             // 鼠标移入移出事件             $(".btn").mouseover(function(){                 $(this).css("font-weight","bold");             });             $(".btn").mouseout(function(){                 $(this).css("font-weight","normal");             });             // 键盘事件,敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键             // js需要区分keyCode(IE)和which(FF)的兼容性,event.keyCode||event.which用来考虑兼容性             $(document).keypress(function(e){                 if(e.keyCode==13){                     //$("#login").submit();                     // 模拟表单提交                     alert("触发表单的提交事件");                 }             });         });       </script>    
用户登录

换一张

注册|忘记密码?

登录后复制

效果:

【推荐学习:jQuery视频教程、web前端视频】

以上就是jquery中常用的事件有哪些的详细内容,更多请关注php中文网其它相关文章!

关键词: 失去焦点 获得焦点