jQuery的事件与动画

jQuery中的事件

 大家的知道，页面在加载的时候会触发load事件；当用户单击某个按钮的时，会触发click事件

jQuery中，事件分为两大类:基础事件和复合事件；

基础事件

鼠标事件：

.click()

为 "click"（鼠标单击） 事件绑定一个处理器，或者触发元素上的 "click" 事件。

.mouseleave()

为 mouse leaves（鼠标离开） 事件绑定一个处理函数，或者触发元素上的 mouse leaves（鼠标离开） 事件

.mouseout()

为 "mouseout" (鼠标移出)事件绑定一个处理函数，或者触发元素上的 "mouseout" 事件

.mouseover()

为 "mouseover"（鼠标指针移过） 事件绑定一个处理函数，或者触发元素上的 "mouseover" 事件。

键盘事件

jquery的键盘事件分为keypress、keydown和keyup事件

1、keypress()事件

keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。

2、keydown()事件

当按钮被按下时，发生 keydown 事件。

3keyup()事件

keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件

通过键盘事件操做相应

绑定事件与移除事件

绑定事件

语法:

bind（type [data], fn）

type:事件类型    （主要包括click，mouseover,mouseout 等基础事件，此外，还可以自定义事件）

[data]:可选参数 （该参数不是必须的）

fn:处理函数       （用来绑定处理函数）

通过绑定事件可以进行行对应的操做

移除事件

语法

unbind ([type] , [fn]）

 [type]:  事件类型     （主要包括click，mouseover,mouseout 等基础事件，此外，还可以自定义事件）

 [fn]   :   处理函数      (用来解除绑定的处理函数)

通过移除事件可以进行行对应的操做

复合事件



在jQuery中复合事件有两个方法--------hover()和toggle()这两个方法和ready()类似，都是jQuery的自定义方法

hover()方法

在jQuery 中，hover( )方法用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时全福发指定的第一个函数(enter); 当鼠标指针移出这个元素时，会触发指定的第二个函数(lne) 请方法相当于mouseenter 和mouseleave 事件的组合

语法:

hover(enter , leave)

通过hover可以进行行对应的操做

toggle()方法

在jQuery 中，toggle( )分为带参数的方法和不带参数的方法，带参数的方法用于模拟鼠标连续dik事件。第一次单击元素，触发指定的第一个函数(fn1); 当再次单击同一个元素时，则触发指定的第二个函数(fn2): 如果有更多函数则依次触发，直到最后一个。随后的每次单击都重复对这几↑ 函 数轮备调用，togg le( )方法的

语法：toggle( fn1 ,fn2 ,.....,fnN)

通过toggle可以进行行对应的操做

jQuery中的动画

如果说行(action) 胜于言，那么在JavaScript 的世界里，效果则会让操作(action) 更胜一筹。通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果，甚至能创建出更为精致的动画。
  jQuery 效果能够增添页面的艺术性，一个元素逐渐滑入视野而不是突然出现时，带给人的美感是不言而喻的。此外，当页面发生变化时，通过效果吸引用户的注意力，则会显著增强页面的可用性。下面通过学习以下jQuery 中动画的方法，让大家掌握并应用它们为页面添加动画效果，让页面
更加丰富多彩。

控制元素显示与隐藏

显示

  在jQuery 中，可以使用show( )方法控制元素的显示，show( )等同于$(selector)cssdi"block" ),除了可以控制元素的显示外，它还能定义显示元素时的效果，如显示速度。show()的语法格式如下。

 语法：

$(selector).show( [speed] , [callback] )

隐藏

在jQuery 中与show( )方法对应的是hide( )方法，该方法可以控制元素隐藏。hide( )方法等于isiector ,css("d isplay","none" ).除了可以控制元素的隐藏外，它还能定义隐藏元素时的效来如急藏速度。hide( )方法的语法格式如下。

语法

$(selector).hide( [speed] , [callback] )

控制元素的淡入淡出

在Quey 中，如果元素是隐藏的，则可以使用fadeln( )方法控制元素淡入，它与show以定义元素淡入时的效果，如显示速度。fadeln( )

语法

$(selector).fadeIn( [speed] , [callback] )

一般来说，fadeIn()方法常用于在网页中的轮播广告，菜单，信息，消息提示框和弹出窗口制作动画。

通过toggle可以进行行对应的操做

自定义动画

　animate()方法的常规使用和之前介绍的3种常见动画的使用方法类似

语法

animate(properties[,duration][,easing][,complete])

　animate()方法的第一个参数是一个必须参数，表示一个CSS属性和值的对象，动画将根据这组对象移动

　　所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。例如，width、height或者left可以执行动画，但是background-color不能

小结

在jQuery中，提供了一系列动画效果的方法，其中，使用show方法控制元素的显示，使用hide方法控制元素的隐藏，使用-fadeln()方法和fadeOut()方法实现元素的淡入和没出使用slideUp()方法和slideDown()方法实现元素的收缩和展开，使用animatel )方法实现自定义动画。当然jQuery的动画效果还吧只是怎么一点，可以让我们更加深入的学习