jQuery第三章事件与动画

jQuery第三章事件与动画

一、jQuery事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML中发生某些事件时所调用的方法。

常见DOM事件：

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

 

blur

unload

 

jQuery 事件方法语法

在 jQuery 中，大多数DOM 事件都有一个等效的jQuery 方法。

页面中指定一个点击事件：

 

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery语法 章节中已经提到过。

 

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

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

$(this).hide();

});

 

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter事件，或规定当发生 mouseenter事件时运行的函数：

$("#p1").mouseenter(function(){

alert("You entered p1!");

});

 

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown事件，或规定当发生 mousedown事件时运行的函数：

$("#p1").mousedown(function(){

alert("Mouse down over p1!");

});

 

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup事件，或规定当发生 mouseup事件时运行的函数：

$("#p1").mouseup(function(){

alert("Mouse up over p1!");

});

 

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus事件，或规定当发生 focus事件时运行的函数：

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

 

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur事件，或规定当发生 blur事件时运行的函数：

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

jquery绑定事件

jQuery对象.bind(“事件名”,可选参数,事件处理函数)

 

 

1.第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象.

2.事件名不要加on

 

jquery对象.bind("事件名",function(){ })

取消绑定

1.取消click事件的所有事件处理函数

jQuery对象.unbind("click")

 

2.取消click事件的事件处理函数f2

jQuery对象.unbind("click",f2);

 

 

fn1=function(){}   这个也可以作为函数的参数,相当于

function(){},并且这个函数叫fn1

只执行一次事件

对象.one("事件名",事件处理函数);//只执行一次

触发某一个事件

对象.trigger("click");  //相当于 对象.click();

div的显示和隐藏

div.show("slow");

div.show("normal");

div.show("fast");

 

可见就隐藏,不可见就显示

 

if(div对象.is(":visible")){

div对象.hide(3000);

}else{

div对象.show(3000);

}

 

6.改变绑定事件的类型

mouseover

mouseout

 

演示代码:

$(function() {

//需求: 点击标题后 显示 标题下面的div

$("#panel").bind("mouseover", function() {

 

$(this).find("div.content").show();

 

});

$("#panel").bind("mouseout", function() {

 

$(this).find("div.content").hide();

 

});

 

});

 

或者合成一句

$(function() {

//需求: 点击标题后 显示 标题下面的div

$("#panel").bind("mouseover", function() {

$(this).find("div.content").show();

}).bind("mouseout", function() {

$(this).find("div.content").hide();

});

});

或者

$(function() {

//需求: 点击标题后 显示 标题下面的div

$("#panel").mouseover(function() {

$(this).find("div.content").show();

}).mouseout(function(){

$(this).find("div.content").hide();

});

 

});

 

合成事件 2个

jQuery有两个合成事件-----hover()方法和toggle()方法.

1.hover(enter,leave);

 

hover = mouseover + mouseout ;

 

hover()方法用于模拟光标悬停事件.当光标移动到元素上时,执行第一个函数(enter),当光标移出这个元素时,会触发第二个函数(leave).

 

上面的例子可以改写成hover()方法

 

演示代码:

$("#panel").hover(function() {

$(this).find("div.content").show();

},function(){

$(this).find("div.content").hide();

});

 

2.toggle(事件处理函数1，事件处理函数2,….); //开关函数

jQuery1.9 以后取消了toggle事件

toogle(fn1,fn2,…fnN)

toogle()方法用于模拟鼠标连续单击事件。第1次单击元素,触发第一个函数(fn1),第二次单击同一个元素,触发fn2…如果有多个函数,依次触发,直到最后一个,随后的每次单击从头开始轮番调用这几个函数。

 

前面的单击标题例子中,使用了如下代码:

$(function() {

$("#btn1").click(function() {

 

var $div1 = $("#div1");

if ($div1.is(":visible")) {

$div1.hide(3000);

} else {

$div1.show(3000);

}

});

});

 

虽然能实现效果,但是这种方法不是最合适的.如果需要连续单击”标题”,来达到使”内容”显示和隐藏的目的,那么很适合使用toggle()方法

 

演示代码:

$(function() {

//需求: 点击标题后 显示 标题下面的div

$("#panel h5.head").toggle(function(){

//让层显示

$(this).next().show();

},function(){

//让层隐藏

$(this).next().hide();

});

});

 

toggle()方法还有另外一个作用:切换元素的可见状态.如果元素是可见的,单击切换后则隐藏；

如果元素是隐藏的,单击切换后则为可见的.

 

对于层来说 div对象.toggle();//显示的层变隐藏、隐藏的层变显示

 

 

二、动画

1.内置动画

show()和hide()

div.show("slow");//0.6秒

div.show("normal");//0.4秒

div.show("fast");//0.2秒

div.show(毫秒);

如果不加参数直接调用show() 是立即显示 没有动画效果

增加宽度(从左到右增大)、增加高度(从上到下增大),同时增加内容的不透明度

2.fadeIn()和fadeOut()淡入淡出效果

对象.fadeIn();//淡入  增加不透明度

对象.fadeOut();//淡出  减少不透明度直到元素完全消失(display:none)

与show()方法不同,fadeIn()和fadeOut()方法只改变元素的不透明度.

 

3.slideUp()、slideDown()收缩、展开效果(用于层)

slideUp()、slideDown()  只会改变元素的高度

 

*动画积累问题解决*

当用户快速在某个元素上执行animate()动画时,就会出现动画积累.解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,如果元素正处于动画状态不添加动画.

 

$(function() {

//需求: 点击标题后 显示 标题下面的div

$("#panel").toggle(function(){

if(!$("#panel").find("div.content").is(":animated")){ //不处在动画状态中

$("#panel").find("div.content").slideDown("slow");

}

},function(){

if(!$("#panel").find("div.content").is(":animated")){

$("#panel").find("div.content").slideUp("slow");

}

});

 

});

自定义动画 animate()

自定义简单动画

 

animate({left:"500px"},3000,function(){alert(3);});  

 

参数1：让div向右移动500px

参数2：移动所需的时间(可以省略)

参数3:  移动完成调用回调函数(可以省略)

 

演示代码:

 

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title>演示事件</title>

<style type="text/css">

#panel {

width:100px;

height:100px;

background-color:yellowgreen;

position:relative;

cursor:pointer;

}

</style>

<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

$("#panel").click(function(){

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

$(this).fadeOut(2000);

});

});

});

</script>

</head>

 

<body>

 

<div id="panel">

保存成功

</div>

</body>

 

</html>

 

多重动画

 

同时执行多个动画

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>演示事件</title>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

#img1 {

position:relative;

}

</style>

<script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

$("#img1").click(function(){

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

});

});

</script>

</head>

 

<body>

 

<img id="img1" src="../../../image/smile.png"/>

</body>

 

</html>

 

按顺序执行多个动画

 

上例中是移动和调整宽度同时进行,如果想按顺序执行动画,例如先向右滑动,然后再放大它的高度,只需把代码拆开

 

$(function() {

$("#img1").click(function(){

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

$(this).animate({width:"200px"},3000);

});

});

 

因为animate都是对同一个jQuery对象操作的,也可以改为链式操作

 

$(function() {

$("#img1").click(function(){

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

     animate({width:"200px"},3000);

});

});

 

像这样动画效果的执行具有先后顺序,称为”动画队列”.

综合动画

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title>演示事件</title>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

#panel {

width:100px;

height:100px;

background-color: burlywood;

position:relative;

}

</style>

<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000)

.fadeOut("slow");

});

});

</script>

</head>

 

<body>

 

<div id="panel">

</div>

</body>

 

</html>

 

动画回调函数

如果想在最后一步切换元素的CSS样式,而不是隐藏元素.

需要把最后fadeOut(“slow”) 改为 .css("border","5px solid blue");

但是这样并不能得到预期效果,预期效果是在动画的最后一步改变元素的样式,而实际效果是刚开始执行的时候,css()方法就执行了.出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数(callback)对非动画方法实现排队.只要把css()方法写在最后一个动画的回调函数里即可.

代码如下:

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000,function(){

$("#panel").css("border","5px solid blue");

});

});

});

 

停止动画

$("#btn1").click(function(){

$("#panel").stop();//只能停止一个动画

});

 

延迟动画

 

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.delay(3000)

.animate({top:"200px",width:"200px"},3000,function(){

$("#panel").css("border","5px solid blue");

});

});

//停止动画

$("#btn1").click(function(){

$("#panel").stop();

});

});

其他动画方法

toggle()、slideToggle()、fadeTo()和fadeToToggle();

 

fadeTo() 把元素的不透明度调整到指定的值

$(function() {

//需求: 点击标题后 显示 标题下面的div

$("#panel h5.head").click(function(){

$(this).next().fadeTo(600,0.2);//600毫秒  不透明度调整到0.2

});

 

})

 

在css中调整不透明度

.content {

padding: 10px;

text-indent: 2em;

border-top: 1px solid #0050D0;

background-color: rgba(255,0,0,0.5);//alpha参数是介于 0.0（完全透明）与1.0（完全不透明）的数字。

}

 

 

fadeToToggle();  对应fadeIn()和fadeOut()