jQuery中的事件与动画

---

前言

网页中的事件和winForm一样，在网页中的交互也是需要事件来实现的。

---

一、jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类

1、基础事件

• 鼠标事件
• 键盘事件
• window事件
• 表单事件

鼠标事件

• 鼠标事件是当用户在文档上移动或单击鼠标是而产生的事件
  
  鼠标事件方法的区别
  

键盘事件

• 用户每次按下或者释放键盘上的键是都会产生事件，常用键盘事件
  

浏览器事件

$(selector).resize();

• 调整窗口大小时，完成页面特效

2、绑定事件与移除事件

绑定事件

bind(type,[data],fn);
//type:事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以时自定义事件
//[data]:可选函数
//fn:处理函数

• 绑定单个事件
• 同时绑定多个事件

移除事件

unbind([type],fn);
//type:事件类型，主要包括blur、focus、click、mouseout等基础事件，此外，还可以时自定义事件
//fn:处理函数

• 当unbind()不带参数时，表示移除所绑定的全部事件

2、复合事件

• 鼠标光标悬停
• 鼠标连续点击

hover()方法

• hover()方法相当于mouseover与mouseout事件的组合

hover(enter,leave);

toggle()方法

• toggle()方法用于模拟鼠标连续click(单击)事件

toggle(fn1,fn2......fnN);

• toggle()方法不带参数，与show()和hide()方法作用一样

toggle();

• toggleClass()可以对样式进行切换

toggleClass(className);

toggle()和toggleClass()总结

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

二、jQuery动画效果

jQuery提供了很多动画效果

• 控制元素显示与隐藏
• 改变元素的透明度
• 改变元素高度
• 自定义动画

控制元素的显示及隐藏

• show()控制元素的显示，hide()控制元素的隐藏

$(selector).show([speed],[callback]) 
$(selector).hide([speed],[callback])
//speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
//callback:可选。show函数执行完之后，要执行的函数

改变元素的透明度

• fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$(selector).fadeIn([speed],[callback]) 
$(selector).fadeOut([speed],[callback])
//speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
//callback:可选。show函数执行完之后，要执行的函数

改变元素的高度

• slideDown()可以使元和逐步延伸显示
• slideUp()则使元素逐步缩短直至隐藏

$(selector).fadeUp([speed],[callback]) 
$(selector).fadeDown([speed],[callback])
//speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
//callback:可选。show函数执行完之后，要执行的函数

自定义动画

$(selector).animate({params},speed,callback) 
//speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
//callback:可选。show函数执行完之后，要执行的函数
//params:必须。定义形成动画的css属性

---