六、jQuery 中的事件与动画
6.1 jQuery 中的事件
在 jQuery 中,事件总体分为两大类:基础事件和复合事件
jQuery 中的简单事件,与 javaScript 中的事件几乎一样,只是对应的方法名称略微不同
复合事件则是截取组合了用户操作,以多个函数作为响应而自定义的处理程序
6.1.1 基础事件
jQuery 中,基础事件和 JavaScript 中的事件一致,提供了特有的事件方法和处理函数绑定
1、载入事件
- 载入事件就是 window 事件的一种
- window 事件表示当用户执行某些会影响浏览器的操作时触发的事件
- 在 jQuery中,常用的 window 事件有文档载入事件:ready()
2、鼠标事件
- 鼠标事件就是当用户在文档上移动或单击鼠标时而产生的事件
- 常用鼠标事件的方法
方法 | 描述 | 执行时机 |
---|---|---|
click() | 触发或将函数绑定到指定元素的 click 事件 | 鼠标单击时 |
mouseover() | 触发或将函数绑定到指定元素的 mouseover 事件 | 鼠标指针移过时 |
mouseout() | 触发或将函数绑定到指定元素的 mouseout 事件 | 鼠标指针移出时 |
mouseenter() | 触发或将函数绑定到指定元素的 mouseenter 事件 | 鼠标指针进入时 |
mouseleave() | 触发或将函数绑定到指定元素的 mouseleave 事件 | 鼠标指针离开时 |
- mouseover() 和 mouseenter() 的区别
- 鼠标指针进入被选元素时,mouseover() 和 mouseenter() 都会被触发
- 如果鼠标指针在其被选元素的子元素上来回进入时,则会触发 mouseover() 事件
- 鼠标指针在其被选元素的子元素上来回进入时,不会触发 mouseenter() 事件
- mouseout() 和 mouseleave() 的区别
- 鼠标指针离开被选元素时,mouseout() 和 mouseleave() 都会被触发
- 如果鼠标指针在其被选元素的子元素上来回离开,则会触发 mouseout() 事件
- 鼠标指针在其被选元素的子元素上来回离开,不会触发 mouseleave() 事件
3、键盘事件
- 当键盘聚焦到 Web 浏览器时,用户每次按下或者释放键盘上的按键时,都会产生事件
- 常用键盘事件的方法
方法 | 描述 | 执行时机 |
---|---|---|
keydown() | 触发或将函数绑定到指定元素的 keydown 事件 | 按下按键时 |
keyup() | 触发或将函数绑定到指定元素的 keyup 事件 | 释放按键时 |
keypress() | 触发或将函数绑定到指定元素的 keypress 事件 | 产生可打印的字符时 |
- keypress 事件
- 较为高级的文本事件
- 它的事件对象指定产生的字符,而不是按下的所有键
- 例如 Enter、Shift 这些键,不会产生字符,则不会触发 keypress 事件
4、浏览器事件
- 当浏览器窗口被调整大小时,页面就会有一些变化
- 这些就是通过 jQuery 中的 resize() 方法触发 resize 事件
- resize() 语法如下
$(selector).resize();
6.1.2 绑定事件与移除事件
在 jQuery 中,绑定事件与移除事件也属于基础事件
主要用于绑定或移除其他基础事件,也可以绑定或移除自定义事件
有时需要对同一个元素进行多个不同的事件处理
例如,鼠标指针移至某一个元素上时出现一种特效,离开时又显示另一种特效
这时就需要使用绑定事件方法 bind() 一次性绑定或移除一个或多个事件
既然有绑定事件,就有移除事件方法 unbind()
1、绑定事件
- jQuery 中,如果需要为匹配的元素同时绑定一个或多个事件,则可以使用 bind() 方法
- 语法格式如下
bind(type,[data],fn);
- bind() 方法的参数说明
参数类型 | 参数含义 | 描述 |
---|---|---|
type | 事件类型 | 主要包括 click、mouseover等基础事件,此外,还可以自定义事件 |
[data] | 可选参数 | 作为 event.date 属性值传递给事件对象的额外数据对象,该参数不是必需的 |
fn | 处理函数 | 用来绑定处理函数 |
-
1) 绑定单个事件
- 使用 bind() 方法为元素绑定单个事件
- 语法格式如下
$(selector).bind("事件",处理函数);
- 示例,为div 绑定点击事件
$(document).ready(function() { $("div").bind("click",function() { //执行代码 }); });
-
2) 同时绑定多个事件
- bind() 方法还可以同时绑定多个事件
- 使用 bind() 方法同时绑定多个事件 语法
$(selector).bind({事件1:处理函数1,事件2:处理函数2,...});
- 示例,为 div 绑定多个事件
$(document).ready(function() { $("div").bind({mouseover:function(){执行代码},mouseout:function(){执行代码}}); });
2、移除事件
- jQuery 中,可以使用移除事件的方法,把绑定的事件通过一定的办法取消
- 使用 unbind() 方法移除元素的单个或多个事件
- 语法格式如下
unbind([type],[fn]);
- unbind() 方法有两个参数,这两个参数不是必需的
- 当 unbind() 不带参数时,表示移除所绑定的全部事件
- unbind() 方法的参数说明
参数类型 | 参数含义 | 描述 |
---|---|---|
[type] | 事件类型 | 主要包括 click、mouseover、mouseout 等基础事件,此外,还可以自定义事件 |
[fn] | 处理函数 | 用来接触绑定的处理函数 |
6.1.3 复合事件
jQuery 中有两个复合事件方法—— hover() 和 toggle() 方法
1、hover() 方法
- hover() 方法用于模拟鼠标指针移入和移出事件,此方法有两个函数
- 当鼠标指针移至元素上时,会触发指定的第一个函数
- 当鼠标指针移出这个元素时,则会触发第二个函数
- 语法格式如下
hover(enter,leave);
- enter 和 leave 为两个执行函数
2、toggle() 方法
- jQuery 中,toggle() 分为带参的方法和不带参的方法
- 带参方法用于模仿鼠标连续点击事件
- 第一次单击元素,触发第一个函数,第二次点击元素,触发第二个函数
- 如果点击次数超过了函数数量,则会对现有函数进行循环
- toggle() 不带参数时,与 show() 和 hide() 方法作用一样
- 用于切换元素的可见状态
- 如果元素是可见的,则切换为隐藏状态
- 如果元素是隐藏的,则切换为显示状态
- 示例
$(document).ready(){
//点击 div 切换背景颜色
$("div").toggle(
function(){$("div").css("background","#ff0000");},
function(){$("div").css("background","#00ff00");},
function(){$("div").css("background","#0000ff");}
);
//点击div,如果div显示,则隐藏,如果隐藏,则显示
$("div").click(function() {
$("div").toggle();
});
}
3、toggleClass() 方法
- toggleClass() 可以对样式进行切换
- 实现事件触发时,某元素在 “加载某个样式” 和 “移除某个样式” 之间切换
- 语法格式如下
toggleClass(className);
- 如果此元素没有 className 样式,则会应用样式
- 如果元素应用了此 className 样式,则会移除此样式
6.2 jQuery 中的动画
6.2.1 控制元素显示与隐藏
前面已经学习了 show() 和 hide() 方法的使用,但都是最基础的应用
下面讲解以下 show() 和 hide 的完整的语法应用
1、控制元素显示
- 在 jQuery 中,除了可以显示元素外,还可以定义显示元素时的效果,如显示速度
- show() 语法格式如下
$(selector).show([speed],[callback]);
- show() 的参数说明
参数 | 描述 |
---|---|
speed | 可选。规定元素从隐藏到完全可见的速度。默认为 “0” 可能值:毫秒(如1000)、slow、normal、fast 在设置速度的情况下,元素从隐藏到完全可见的过程,会逐渐地 改变高度、宽度、外边距、内边距和透明度 |
callback | 可选。show() 函数执行完之后,要执行的函数 |
2、控制元素隐藏
- 在 jQuery 中hide() 方法是控制元素隐藏,与 show() 方法对应
- 除了控制元素的隐藏,它和 show() 方法相同,可以定义隐藏元素时的效果
- hide() 语法格式如下
$(selector).hide([speed],[callback]);
- hide() 方法参数设置与 show() 方法参数相同
- 绝大多数情况下,hide() 方法与 show() 方法总是在一起使用
6.2.2 改变元素透明度
jQuery 中提供的动画效果相对丰富,除了显示和隐藏元素外
还有改变元素透明度和高度
fadeIn() 和 fadeOut() 方法则是控制元素的透明度
1、控制元素淡入
- jQuery 中,如果元素时隐藏的,则可以使用 fadeIn() 方法控制元素淡入
- 它与 show() 方法相同,可以定义元素淡入时的效果,如显示速度
- fadeIn() 语法格式如下
$(selector).fadeIn([speed],[callback]);
- fadeIn() 方法的参数说明
参数 | 描述 |
---|---|
speed | 可选。规定元素从隐藏到完全可见的速度。默认为 “0” 可能值:毫秒(如1000)、slow、normal、fast 在设置速度的情况下,元素从隐藏到完全可见的过程,会逐渐地 改变其透明度,给视觉淡入的效果 |
callback | 可选。fadeIn() 函数执行完之后,要执行的函数 除非设置了 speed 参数,否则不能设置该参数 |
2、控制元素淡出
- 在 jQuery 中,fadeOut() 方法可以控制元素淡出,与 fadeIn() 方法对应
- 除了控制元素的淡出,它和 fadeIn() 方法相同,可以定义淡出元素时的效果
- fadeOut() 语法格式如下
$(selector).fadeOut([speed],[callback]);
- 其参数设置方法与 fadeIn() 方法相同
6.2.3 改变元素高度
- 在 jQuery 中,用于改变元素高度的方法是 slideUp() 和 slideDown()
- 若元素的 display 属性值为 none,当调用 slideDown() 方法时,这个元素会从上向下延伸展示
- 而 slideUp() 方法正好相反,元素从下到上缩短直至隐藏
- slideUp() 和 slideDown() 语法格式如下
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);
- 与 fadeIn() 和 fadeOut() 方法中的参数设置是一致的
- speed 参数规定元素显示或隐藏的速度
- callback 参数表示函数执行完毕后要执行的函数
6.2.4 show() 和 hide()、fadeIn() 和 fadeOut()、slideUp() 和 slideDown() 之间的区别
- show() 和 hide():当设置时间时,效果是从下至上或从右下到左上的慢慢折叠缩小或放大元素,来显示或隐藏元素
- fadeIn() 和 fadeOut():当设置时间时,效果是通过逐渐改变元素间的透明度来显示或隐藏元素
- slideUp() 和 slideDown():当设置时间时,效果是通过将元素逐渐向上或向下移动,来显示或隐藏元素
- 但是三者之间,显示时,先显示元素(及元素 display:block),在执行各自的效果
- 隐藏时,先执行各执的效果,再隐藏,(及元素 display:none)