共计 4411 个字符，预计需要花费 12 分钟才能阅读完成。
网页中的事件
- 和 winform 一样，在网页中的事件也是实现和用户交互的基础
- 例如 tab 页切换效果，可以通过鼠标点击事件来实现
jQuery 中的事件
- jQuery 事件是对 JavaScript 事件的封装，常用事件分类如下:
- 基础事件
- window 事件
- 鼠标事件
- 键盘事件
- 表单事件
- 复合事件是多个事件的组合
- 鼠标光标悬停
- 鼠标连续点击
- 基础事件
鼠标事件
- 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
| 方法 | 描述 | 执行时机 |
| click() | 触发或将函数绑定到指定元素的 click 事件 | 单击鼠标时 |
| mouseover() | 触发或将函数绑定到指定元素的 mouse over 事件 | 鼠标移过时 |
| mouseout() | 触发或将函数绑定到指定元素的 mouse out 事件 | 鼠标移出时 |
例：以 mouseover() 为例，实现鼠标移过时特效
需求：实现主导航栏鼠标移动时的特效：
键盘事件
- 用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：
| 方法 | 描述 | 执行时机 |
| keydown() | 触发或将函数绑定到指定元素的 keydown 事件 | 按下键盘时 |
| keyup() | 触发或将函数绑定到指定元素的 keyup 事件 | 释放按键时 |
| keypress() | 触发或将函数绑定到指定元素的 keypress 事件 | 产生可打印的字符时 |
例：以 keydown () 为例，实现按键时特效
需求：提交表单时，使用回车键进行提交：
表单事件
- 当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件，详见下表：
| 方法 | 描述 | 执行时机 |
| focus() | 触发或将函数绑定到指定元素的 focus 事件 | 获得焦点 |
| blur() | 触发或将函数绑定到指定元素的 blur 事件 | 失去焦点 |
例：在上面的表单提交的例子基础上，在表单项添加聚焦和失去焦点的特效
绑定事件
- 除了使用事件名绑定事件外，还可以使用 bind() 方法
绑定单个事件
例：以上面的例子作为模板：进行事件绑定演示（移入和移出鼠标时显示效果）
例：以 mouseover() 为例，实现鼠标移过时特效
需求：实现主导航栏鼠标移动时的特效：
绑定多个事件
- bind() 方法还可以同时为多个事件绑定方法
例：需求同上，多绑定一个鼠标移出事件
移除事件
- 移除事件使用 unbind() 方法，其语法如下：
| 参数 | 含义 | 描述 |
| [type] | 事件类型 | 主要包括：blur、focus、click、mouseout 等基础事件，此外，还可以是自定义事件 |
| [fn] | 处理函数 | 用来绑定的处理函数 |
当 unbind() 不带参数时，表示移除所绑定的全部事件
鼠标光标悬停事件
- hover() 方法相当于 mouseover 与 mouseout 事件的组合，里面存在两个函数，分别在光标移入时触发和光标移出时触发。
例：
- 我的优惠券
- 我的订单
- 我的私信
鼠标连续 click 事件
- toggle() 方法用于模拟鼠标连续 click 事件
$(“body”).toggle(function () {}, function () {}, function () {}); // 每次点击触发一个函数，依次向后循环触发（函数可以存在多个，这里表示此时有 3 个点击事件触发时对应的函数）
例：
jQuery 动画效果
- jQuery 提供了很多动画效果，如：
- 控制元素显示与隐藏
- 控制元素淡入淡出
- 改变元素高度
显示及隐藏元素
- show() 在显示元素时，能定义显示元素时的效果，如显示速度
- 显示速度可以取如下值：毫秒（如 1000）、slow、normal、fast
例：隐藏页面元素
- 我的优惠券
- 我的订单
- 我的私信
切换元素可见状态
- toggle() 除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
例：
- aaa
- bbbb
- cccc
- ddd
-
淡入淡出效果
- fadeIn() 和 fadeOut() 可以通过改变元素的透明度实现淡入淡出效果
- 显示速度可以取如下值：毫秒（如 1000）、slow、normal、fast
例：
![]()
改变元素的高度
- slideDown() 可以使元素逐步延伸显示，slideUp() 则使元素逐步缩短直至隐藏
- 使用的方式与淡入和淡出一致
$("h2").click(function(){$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
总结
- 鼠标事件
- click、mouseover、mouseout
- 键盘事件
- keydown、keyup、keypress
- 表单事件
- 复合事件
- 动画
- show()、hide()、toggle()、fadeIn()、fadeOut()、slideUp()、slideDown()
原文地址: jQuery 中的事件与动画
正文完
