jQuery中的常用事件介绍 jQuery中的常用事件介绍

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

文章图片

三、键盘事件用户每次按下或者释放键盘上的按键时都会产生事件，常用键盘事件如下：

文章图片

四、表单事件当元素获得焦点时，会触发focus()事件，失去焦点时，会触发blur()事件。
表单提交时会触发submit()事件。

文章图片

五、综合示例 【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; }
用户登录用户名：
密码：
验证码：
文章图片
换一张
注册|忘记密码？