jQuery中的事件与动画
通过事件实现各项功能或执行某项操作，在元素与功能代码中起桥梁作用。
事件分为：基础事件与复合事件
基础事件：
事件名=”函数名()”;
或
DOM 对象.事件名=函数;
基础事件分
- 载入事件:加载页面、窗口调节等
- 鼠标事件
|
click() |
点击事件 |
|
mouseover() |
指针移过时（影响子元素） |
|
mouseout() |
指针移出时（影响子元素） |
|
mouseenter() |
指针进入时 |
|
mouseleave() |
指针离开时 |
- 键盘事件
|
keydown() |
按下按键时 |
|
keyup() |
释放按键时 |
|
keypress() |
产生可打印字符时 |
- 浏览器事件
调整浏览器大小
$(selector).resize();
绑定事件：
可以绑定一个或多个
bind(type,[date],fn)
bind()方法有三个参数
可以应用在js事件生成的对象中
|
type |
事件类型 |
如click、mouseover等事件或自定义事件 |
|
[date] |
可选参数 |
作为event.data属性值传递给事件对象的额外数据对象 |
|
fn |
处理函数 |
用来绑定处理函数 |
移除事件：
当事件执行完毕后需要把绑定的事件取消。
unbind([type],[fn]);
当unbind不带参数时表示去除所有绑定的事件
|
[type] |
事件类型 |
基础事件和自定义事件 |
|
[fn] |
处理函数 |
用来解除绑定的处理函数 |
复合事件
复合事件方法hover()和toggle()，都是jQuery自定义的方法
hover():鼠标移入元素触发（enter）再移出触发（leave）
hover(enter,levae);
toggle():分带参和不带参的方法，带参模拟鼠标点击，每点击一个产生一个(fn1)、(fn2)
toggle(fn1,fn2…fnN);
不带参时与shou、hide一样，如果是隐藏的切换为可见，如果可见，切换为隐藏
toggle();
在加载某个样式和移除某个样式之间切换
toggleClass(className);
控制元素显示
$(selector).show([speed],[callback]);
|
speed |
可选。规定元素从隐藏到可见的速度，默认为0 可选值：毫秒、slow、normal、fast 元素显示时会逐渐改变高度、宽度、外边距、内边距和透明的 |
|
callback |
可选。show执行后要执行的函数 |
控制元素隐藏：
$(selector).hide([speed],[callback]);
参数与shou相同
改变透明度
控制淡入：
$(selector).fadeIn([speed],[callback]);
控制淡出：
$(selector).fadeOut([speed],[calback]);
改变元素高度
调用slideDown元素会从上到下延申显示，slideUp会从下到上缩短至隐藏
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[calback]);
自定义动画:
$(selector).animate({params},speen,callback);
params：必选，定义形成动画的CSS属性