jQuery的绑定事件和动画--第二十五天

Jquery事件:

load

click

blur

focus

mouseover

mouseout/mousemove  

keydown keyup .....

 

jQuery对象.事件(function(){})

绑定事件：bind

语法1:

jQuery对象.bind(“事件名”,[参数,....],function(){})

 

如果相同的对象绑定各种事件：

jQuery对象

.bind(“事件名”,[参数,....],function(){})

.bind(“事件名”,[参数,....],function(){})

。。。。。。

 

bind的好处：

1 有自己的一系列方法

2  能够绑定自定义事件

 

事件移除: unbind

JQUERY对象.unbind(“事件名”)

例子：移除 该div的mouseout事件

事件的合成 hover

jQuery对象.hover(function(){鼠标悬停的代码},function(){鼠标离开的代码})

 

事件的冒泡

判断表单提交

关于event

event.target  得到该事件的元素对象

event.pageX  event.pageY 得到鼠标坐标

event.type  得到事件类型(事件名)

event.data 得到额外数据(参数)

如果bind方法需要传递多个参数 用[...,...,...]

 

如果参数为键值对 用{“”:””,.....}

模拟操作：trigger

当执行某个事件的时候自动触发另一个事件的执行

公式:jQuery对象.trigger(“事件名”，【参数...】)

注意：如果需要用的传递的参数则必须有event

如果是多个参数 [...,...]

前提：该jQuery对象已经绑定了该事件

触发自定义事件

 

创建自定义事件  需要搭配 trigger

jQuery对象.bind(“自定义事件名”,[参数..],function(){

.....

})

jQuery对象.bind(“自定义事件名”,[参数])

例子：创建一个xxx事件

通过鼠标悬停在按钮上或者点击按钮触发xxx事件

“fast” “normal” “slow” 代表动画的快 中 慢

 

动画1 :

显示：jquery对象.show(毫秒)隐藏:  jquery对象.hide(毫秒);

 

动画2：淡入淡出

jquery对象.fadeIn(毫秒)淡入    --显示

jquery对象.fadeOut(毫秒)淡出    --隐藏

 

动画3延伸和收缩

jquery对象.slideUp();向上收缩   --隐藏

jquery对象.slideDown();向下延迟  --显示

 

 

自定义动画 关键字：animate

语法：jQuery对象.animate(最终样式,时间ms,[回调函数])

 

最终样式:{“属性1”:”值1”,....}

 

回调函数：通过函数指针去指向另一个函数

 

例子1 ：点击按钮 让div往右边走

例子2 ：每点击1次按钮div往右走一段

先往右走再往下走

或者

往右下走

作业：1

（1）div向右移动的同时增加高，并且透明度变为0.5

（2）div往下走的同时增加宽

（3）淡出的方式隐藏

如果把（3）改为改变div的边框 ？

动画的停止  （目的：增强客户体验）

jQuery对象.stop()

stop:只能够停止正在执行的动画

stop(true/false,true/false)   

第一个参数如果为true则表示停止正在执行的动画和将要被执行的动画

第二参数如果为true，则表明让正在执行的动画马上到结束时刻

作业2