jQuery中的常用事件介绍

一、jQuery事件的分类 jQuery事件是对JavaScript事件的封装,常用事件分类如下:
1、基础事件
window事件。鼠标事件。键盘事件。表单事件。
2、复合事件是多个事件的组合
鼠标光标悬停。鼠标连续点击。
二、鼠标事件 鼠标事件是当用户在文档上面移动或单击鼠标时而产生的事件,常用鼠标事件有:
jQuery中的常用事件介绍
文章图片

三、键盘事件 用户每次按下或者释放键盘上的按键时都会产生事件,常用键盘事件如下:
jQuery中的常用事件介绍
文章图片

四、表单事件 当元素获得焦点时,会触发focus()事件,失去焦点时,会触发blur()事件。
表单提交时会触发submit()事件。
jQuery中的常用事件介绍
文章图片

五、综合示例 【jQuery中的常用事件介绍】jQuery中的常用事件介绍
文章图片

需求说明:

  • 1、用户名输入框获得焦点时输入框背景色为浅蓝色,失去焦点时还原为白色背景色。
  • 2、鼠标移至登录按钮时字体变粗,移出时整体恢复正常。
  • 3、敲击键盘的“回车”键时触发表单提交事件。
代码:
事件演示示例 - 锐客网#login{width: 400px; height: 250px; background-color: #f2f2f2; border:1px solid #DDDDDD; padding: 5px; }#login fieldset {border: none; margin-top: 10px; }#login fieldset legend{font-weight: bold; }#login fieldset p{display: block; height: 30px; }#login fieldset p label {display: block; float:left; text-align: right; font-size: 12px; width: 90px; height: 30px; line-height: 30px; }#login fieldset p input {display: block; float:left; border: 1px solid #999; width: 250px; height: 30px; line-height: 30px; }#login fieldset p input.code{width: 60px; }#login fieldset p img{margin-left: 10px; }#login fieldset p a{color: #057BD2; font-size: 12px; text-decoration: none; margin: 10px; }#login fieldset p input.btn{background: url("./images/login.gif") no-repeat; width: 98px; height: 32px; margin-left: 60px; color: #ffffff; cursor: pointer; }#login fieldset p input.input_focus{background-color: #BEE7FC; }
用户登录

jQuery中的常用事件介绍
文章图片
换一张
注册|忘记密码?

效果:
jQuery中的常用事件介绍
文章图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读