jQuery中的事件与动画

第五章

jQuery中的事件与动画

本章技能目标

使用常用的简单事件制作网页特效

使用鼠标事件制作主导航特效

使用键盘键盘事件制作表单特效

使用hover()方法制作下拉框菜单特效

使用鼠标事件及动画制作弹出对话框

1.jQuery中的事件

基础事件

语法:

事件名=”函数名()”;

jQuery中的典型的事件方法

事件 典型事件方法 说明

单机事件 click(fn) 单机鼠标时发生,fn代表函数

按下键盘触发 keydown(fn) 按下键盘时发生,fn(函数)

失去焦点事件 blur(fn) 失去焦点发生,fn(函数)

1.Window事件:

例如:打开网页时加载页面,关闭窗口,调整窗口大小,移动窗口等操作,比如文档就绪事件,他对应的方法是ready()方法.

2.键盘事件:

常用的鼠标事件的方法

方法 描述 执行时机

click() 触发或将函数绑定到指定元素的click事件 单机鼠标时

Mouseover() 触发或将函数绑定到制定元素的mouseover事件 鼠标指针移过时

Mouseout() 触发或将函数绑定到制定元素的mouseout事件 鼠标指针移出时

3.键盘事件

常用键盘事件的方法

方法 描述 执行时机

Keydown() 触发或将函数绑定到指定元素的keydown事件 按下按键时

Keyup() 触发或将函数绑定到指定元素的keyup事件 释放按键时

Keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时

键盘事件例:

$(“input”).keydown(function(event){

If(event.keyCode==13){

Alert(“您按下的是回车!”);

}

});

4.表单事件

常用的表单事件的方法

方法 描述 执行时机

Focus() 触发或将函数绑定到指定元素的focus事件 获取焦点时

Blur() 触发或将函数绑定到指定元素的blur事件 失去焦点时

键盘事件例:

$(function(){

$(“input”).focus(function(){

$(this).css(‘background’,’red’);

});

$(“input”).blur(function(){

$(this).css(‘background’,’white’);

});

});

绑定事件与移除事件

1.绑定事件

语法:bind(type,[data],fn)

Bind()方法有3个参数,其中参数data不是必须的详细说明:

Bind()方法的参数说明

类型 定义 描述

Type 事件类型 主要包括blur,focus,click,mouseout,等基础事件,还可以是自定义事件

[data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象,该参数可选

Fn 处理函数 用来绑定的处理函数

1.绑定单个事件

假设需要完成单机按钮,为所有<p>元素添加红色背景,可以使用click(),也可以使用 bind(),下面使用bind方法完成该功能

$(function(){

$(“input”).bind(“click”,function(){

$(“p”).css(“background”,”red”);

});

});

2.同事绑定多个事件

$(function(){

$(“input”).bind({

Mouseover:function(){

$(“ul”).css(‘background’,’red’);

}

Mouseout:function(){

$(“ul”).css(‘background’,’white’);

}

});

});

3.移除事件

移除事件与绑定事件是相对的,在jQuery中为匹配元素移除单个元素或多个元素,可以使用unbind方法

语法:

Unbind([type],[fn]).

Unbind方法有两个参数,两个参数都是可选的,如果没有参数则是移除全部事件,

UnBind()方法的参数说明

类型 定义 描述

[type] 事件类型 包括:blur,focus,click,mouseout,等 事件,可以是自定义事件

[fn] 处理函数 用来接触绑定的处理函数

例如:

$("input").unbind({mouseover:t1});

复合事件

在jQuery中有两个复合事件 hover() 和 toggle() 方法

这两个方法与ready()方法类似,都是jQuery自定义方法

1.hover()方法

Hover()方法用于模仿鼠标指针悬停事件

语法: hover(enter,leave);

$(function(){

$(“input”).hover(function(){

$(“ul”).show();

}),function(){

$(“ul”).hide();

}

});

2.toggle()方法

在jQuer中,toggle()方法用于模拟鼠标连续click事件,第一次单机元素,触发指定的第一个函数(fn1),第二个(fn2),第三个(fn3),等等(更多),随后每次单机重复这几个函数的调用

Toggle()方法的语法:

Toggle(fn1,fn2,fn3);

例子:

$(functoin(){

$(“body”).toggle(

Function(){

$(this).css(‘backgorund’,’red’);

},

Function(){

$(this).css(‘backgorund’,’blue’);

},

Function(){

$(this).css(‘backgorund’,’white’);

}

);

});

jQuery中的动画

控制元素显示与隐藏

1.控制元素显示

语法: $(selector).show([speed],[callback]);

Show()与hide()的参数说明

参数 描述

可选,规定从隐藏到全可见的速度,默认为0;

Speed 可能值:毫秒(如:1000)

在设置输的情况下,元素从隐藏到完全可见的 过程,逐渐改变元素的高宽,内外边距,透明度

Callback 可选,show函数执行后,要执行的函数

2.控制元素隐藏

在jQuery中,与show方法对应的是hide方法

Hide方法用于隐藏(可以控制元素的隐藏速度)

语法:

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

他的参数与show方法的参数一样,第一个是

隐藏的速度,第二个是隐藏后调用的函数

3.切换元素的可见状态

$(function(){

$(“input”).click(function(){

//其他代码省略

$(“li:gt(5):not(:last)”).toggle();

});

});

中间代码实现了只让中间的代码隐藏

改变元素透明度

1.控制元素淡入与淡出

控制元素淡出使用fadeout

控制元素淡入使用fadein

语法:

Fadein: $(selector).fadein([speed],[callback]);

Fadeout: $(selector).fadeout([speed],[callback]);

Fadeout()与fadein()的参数说明

参数 描述

可选,规定从隐藏到全可见的速度,默认为0;

Speed 可能值:毫秒(如:1000)

在设置输的情况下,元素会慢慢透明或者慢慢 呈现出来

Callback 可选,show函数执行后,要执行的函数

除非设置了speed参数,否则不能设置该参数

改变元素的高度

用于改变元素的高度的方法是slideup与slidedown

若一个元素隐藏,当调用slidedown方法显示该元素时,这个 元素会从上向下延伸显示,而slideup相反,元素会从下到上

缩短直到隐藏

本章总结

1.在jQuery中,提供了click()方法等一系列基础绑定方法,支持window事件,鼠标事件,键盘事件和表单事件等基础事件的绑定.

2.使用bind()方法可以一次性绑定一个或多个时间处理方法,使用unbind()方法可以移除事件绑定

3.在jQuery中,提供了hover()和toggle()等复合事件方法

4.在jQuery中,提供了一系列显示动画效果的方法,其中show()方法控制元素显示,hide()方法隐藏,使用toggle()方法切换元素的可见状态,使用fadein()方法和fadeout()方法实现元素的淡出淡入,使用slideup(0方法和slidedown()方法实现元素的收缩与展开

本章完!