第3章 jquery中的事件和动画

一，jquery中的事件

（1）.执行时机

$(document).ready()和window.onload方法有相似的功能，但是在执行时机方面有区别，windwo.onload在网页中所有的元素包括所有的关联文件都加载后才执行，而前者是dom元素就绪时就可以被调用了。不必等到所有关联的文件全部加载。

2.多次使用

3.简写方式

$(document).ready(function()){

code

}

被$(function(){ })

(2)事件的绑定

bind(type[,data],fn);

参数类型： blur,focus,load,resize,scroll,unload,click,mousedown,mouseover,change,select,submit,keydown,error。。。

第2个参数可选，event.data属性值传递给事件对象的额外数据对象。

第3个参数则是用来绑定的处理函数。

1.基本效果

$("p").bind("click",function(){函数体})

2.加强效果

实现点击后在显示和隐藏之间的切换

3.改变绑定事件的类型

将click转换成mouseovr和mouseout

$("p").bind("mouseover",function(){$("this").next("div.content").show()})当鼠标滑过时显示内容

4.简写绑定的事件

$(function(){

$("p").mouseover(function(){函数体显示})

})

（3）合成事件

1.hover（）方法

        语法结构：hover（enter,leave）;

模拟光标悬停事件，当光标移动到元素上的时候，会触发指定的第1个函数enter，当移出这个元素时，会触发指定的第2个函数leave

hover准确来说是替代jquery中的bind（“mouseenter”）和bind（"mouseleave"）,而不是替代bind（"mouseover"）和bind("mouseout"),因此当需要触发hover（）方法的第2个函数时，需要用trigger（“mouseleave”）来触发，而不是trigger（“mouseout”）。

2.toggle（）方法

toggle（fn1,fn2,...fnN）;

模拟鼠标连续单击事件。第一次单击元素，触发指定的第1个函数fn1，当再次单机同一元素时，则触发指定的第2个函数fn2.

另外一个作用是切换元素的可见状态，隐藏和显示

3.再次加强效果

增加高亮效果   addclass（）方法  和removeclass（）方法  切换

（4）事件冒泡

页面中多个元素均绑定了此事件  从子元素相父元素方向执行事件，就叫冒泡

解决办法采用事件对象

$("element").bind("click",function(event){

code

})

当单击此元素时，这个对象就被创建了，当事件处理函数执行完毕后，事件对象就被销毁了

停止事件冒泡

可以组织事件中其他对象的事件处理函数被执行。stopPropagation（）方法，

..function（event）{...event.stopPropagation（）...}

阻止默认行为

网页中的元素都有自己默认的行为。单击提交按钮后表单会提交，有时候需要阻止元素的默认行为。

preventDefault（）方法来阻止元素的默认行为

如果相同时对事件对象停止冒泡和默认行为可以再事件处理函数中返回false。

return false；

（5）事件对象的属性

1.event.type（）

可以获取到事件的类型

click还是mouseover等等

2.event.preventDefault（）  阻止默认

3.event.stopPropagation（） 阻止冒泡

4.event.target（）  获取到触发事件的元素

5.event.relatedTarget（）  相关元素

6.event.pageX   event.pageY获取相对于页面的x坐标和y坐标

7.event.which（）鼠标的左，中，右键

8.event.metaKey（）键盘事件中获取ctrl按键

9.event.originalEvent（）方法

（6）移除事件

1.移除按钮上以前注册的事件

unbind（“click”）或者unbind（）

2.移除其中一个事件

myfun1=function（）{}

$(".btn").unbind（“click”，myfun1）

one（）方法   只执行一次，之后自行删除

 

(7)模拟操作

1.常用模拟

有时需要通过模拟用户操作，来达到例如单击的效果。

trigger（）方法来完成模拟操作。

例子：$('#btn').trigger("click")

可以简写

$('#btn').click();

2.触发自定义事件

trigger（）不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件

例子：$('#btm').bind("myclick",function(){ $('#test').append("<p>我的自定义事件</p>")；})

触发此事件，$('#btn').trigger("myclick");

3.传递数据

trigger(type[,data])方法有两个参数，1为事件类型，2为传递个事件处理函数的额附加数据，以数组形 式传递。

$('#btn').trigger("mycklik",["我的自定义","事件"])；

传递两个数据

4.执行默认操作

trigger（）触发事件后，会执行浏览器默认操作。

$("input").trigger("focus");

不仅会触发为input元素绑定的focus事件，也会使input元素本身得到焦点（浏览器默认操作）

如果不想浏览器默认操作，使用triggerHandler（）方法

$("input").triggerHandler("focus");

（8）其他用法

1.绑定多个事件类型

例子：$("div").bind("mouseover mouseout",function(){

$(this).toggleClass("over");

})

等同于去掉mouseout在后面再加上

.bind("mouseout",function(){

$(this).toggleClass("over");

})

2.添加事件命名空间，便于管理

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。

例子：$(function(){

$("div").bind("click.plugin",function(){

$("body").append("<p>click事件</p>");

})

$("button").click(function(){

$("div").unbind(".plugin");

})

})

plugin的命名空间被删除，而不再plugin的命名空间的dbclick事件依然存在。

3.相同事件名称，不同命名空间执行方法

可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用，jquery代码

$(function(){

$("div").bind("click",function()

{

$("body").append("<p>click事件</p>")；

})

$("div").bind("click.plugin",function()

{

$("body").append("<p>click.plugin事件</p>")；

})

$("button").click(function(){

$("div").trigger("click!");

})

 

})

最后的感叹号的作用是匹配所有不包含在命名空间中的click方法。

二.jquery中的动画

（1）.show（）方法和hide（）方法 显示和隐藏

（2）.fadein（）方法和fadeout（）方法 改变元素的不透明度 in为提高 out为降低

（3）.slideUp（）方法和slideDown（）方法 改变元素的高度 滑动

（4）.自定义动画方法animate（）

animate(params,speed,callback);

第1个一个包含样式属性即值的映射，例如property1：value1，property2：value2

第2个speed：速度 可选参数

第3个callback 在动画完成时执行的函数 可选

1.自定义简单动画

设置元素的position absolute或者relative

$(this).animate({left:"500px"},3000);

2.累加，累减动画

$("this").animate({left:"+=500px"},300);

在当前位置累加500px

3.多重动画

同时执行多个动画 或按顺序执行多个动画

animage（{left:"500px",height:"200px"},3000）;

4.综合动画

位置，高度，透明度都变化

5.动画回调函数

$("#element").slideDown("normal",function(){

//在效果完成之后做其他的事情

})

****6.停止动画和判断是否处于动画状态

停止元素的动画 stop（[clearQueue][,gotoEnd]）;

判断元素是否处于动画状态

if(!$(element).is(":animated")){

//判断元素是否正处于动画状态

}

（7）其他动画方法

toggle（speed,[callback]） 可见

slideToggle(speed,[callback]) 滑动 调整元素的高度

fadeTo(speed,opacity,[callback]) 不透明度以渐进的方式调整到指定的值

（8）动画方法概括 略