S2 使用jQuery快速高效制作网页交互特效 第七章 jQuery中的事件与动画 知识点

一、jQuery中的事件
1、基础事件
在jQuery中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件绑定和处理函数的语法格式如下
语法：事件名:=“函数名()”;或者 DOM对象.事件名=函数；
(1)载入事件
(2)鼠标事件
方法 描述 执行时机
click() 触发或将函数绑定到指定元素的click事件 鼠标单击时
mouseover() 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时
mouseourt() 触发或将函数绑定到指定元素的mouseourt事件 鼠标指针移出时
mouseenter() 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时
mouseleave() 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时
(3)键盘事件
键盘事件指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键是都会产生事件。常见的键盘事件有keydown、keyup和keypress
方法 描述 执行时机
keydown() 触发或将函数绑定到指定元素的keydown事件 按下按键时
keyup() 触发或将函数绑定到指定元素的keyup事件 释放按键时
keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
注意：$(document).keydown()表示键盘事件作用于HTMLDOM中的任意对象。$("[type=password]").keyup()表示键盘事件支队密码框器作用。
(4)浏览器事件
在浏览网页时，大家经常会调整浏览器窗口的大小，在调整窗口大小时，页面会有一些变化，这些都是通过jQuery中的resize()方法触发resize()事件，进而出来了相关函数，来完成页面的一些特效
语法：$(selector).resize();
二、绑定事件与移除事件
1、绑定事件
在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件。则可以使用bind()方法
语法:bind(type,[data],fn)
bind()方法有三个参数，其中参数data不是必须的
参数类型 参数含义 描述
type 事件类型 主要包括click、mouseover、mouseourt等基础事件,此外,还可以是自定义事件
[data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象,该参数不是必须的
Fn 处理函数 用来绑定处理函数
(1)绑定单个事件
(2)绑定多个事件
使用bind()方法不仅可以一次绑定一个事件,还可以同时绑定多个事件。
2、移除事件
语法：unbind([type],[fn]);
unbind()方法有两个参数，这两个参数不是必需的，当unbind()不带参数时，表示移除所绑定的全部事件。
参数类型 参数含义 描述
[type] 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件
[fn] 处理函数 用来解除绑定的处理函数

三、复合事件
在jQuery中有两个复合事件方法——hover()和toggle()方法，这两个方法与ready()类似，都是jQuery自定义的方法
1、hover()方法
语法：hover(enter,leave);
2、toggle()方法
语法：toggle(fn1,fn2…);
toggle();
toggleClass(className);

注意：toggle(fn1,fn2…)实现淡季事件的切换，无需额外绑定click()事件
toggle()实现事件触发对象在显示和隐藏状态之间切换
toggleClass()实现事件触发对象在加载某个样式和移除某个样式之间的切换

四、jQuery中的动画
1、控制元素显示
语法：$(selector).show([speed],[callback])

2、控制元素隐藏
语法：$(selector).hide([speed],[callback])

3、改变元素透明度
(1)控制元素淡入

(2)控制元素淡出

4、改变元素高度

五、自定义动画