jQuery 4 事件和动画

来源：互联网发布：鼠标垫你们的知乎编辑：程序博客网时间：2024/05/21 11:28

jQuery 4 事件和动画

一．事件

具体事件

描述

鼠标事件

click()

触发、或将函数绑定到指定元素的单击事件

dblclick()

触发、或将函数绑定到指定元素的双击事件

focus()

触发、或将函数绑定到指定元素的获得焦点事件

blur()

触发、或将函数绑定到指定元素的失去焦点事件

mousedown()

触发、或将函数绑定到指定元素的按下鼠标按钮事件

mouseup()

触发、或将函数绑定到指定元素的松开鼠标按钮事件

mousemove()

触发、或将函数绑定到指定元素的指针移动事件

mouseenter()

触发、或将函数绑定到指定元素的指针进入元素事件

mouseleave()

触发、或将函数绑定到指定元素的指针离开元素事件，常常与mouseenter()共同使用

mouseover()

触发、或将函数绑定到指定元素的指针位于上方事件

mouseout()

触发、或将函数绑定到指定元素的指针移开事件，常常与mouseover()共同使用

mouseenter，mouseleave与mouseover，moseout的区别：

mouseenter，mouseleave：只有在鼠标指针进入/离开被选元素时，才会触发

mouseover，moseout：鼠标指针位于之上/移开被选元素及其包含元素，都会触发

键盘事件

keydown()

触发、或将函数绑定到指定元素的按下键盘按钮事件

keyup()

触发、或将函数绑定到指定元素的松开键盘按钮事件

keypress()

触发、或将函数绑定到指定元素的按下键盘按钮事件

与 keypress 事件相关的事件顺序：

1.keydown -键按下的过程

2.keypress - 键被按下

3.keyup -键被松开

keypress 事件与 keydown事件类似。当按钮被按下时发生该事件。然而，keypress事件不会

触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用keydown()方法来检查这些键。

表单事件

focus()

触发、或将函数绑定到指定元素的获得焦点事件

blur()

触发、或将函数绑定到指定元素的失去焦点事件

change()

触发、或将函数绑定到指定元素的 change 事件

元素的值发生改变时，会发生 change 事件（仅适用于表单字段）。

该事件仅适用于text，以及textarea和select元素。

select()

触发、或将函数绑定到指定元素的 select 事件

当 textarea 或text类型的input元素中的文本被选择（标记）时，会发生select事件

submit()

触发、或将函数绑定到指定元素的 submit 事件。

当提交表单时，会发生 submit 事件。该事件只适用于<form>元素。

$("form").submit(function(){···});

出错事件

error()

触发、或将函数绑定到指定元素的 error 事件.

当元素遇到错误（没有正确载入）时，发生 error 事件。

文档/窗口事件

ready()

文档就绪事件（当 HTML 文档就绪可用时）

load()

触发、或将函数绑定到指定元素的 load 事件。

指定的元素已加载时，会发生 load 事件

unload()

触发、或将函数绑定到指定元素的 unload 事件

当发生以下情况下，会触发 unload 事件：

·点击某个离开页面的链接

·在地址栏中键入了新的 URL

·使用前进或后退按钮

·关闭浏览器窗口

·重新加载页面

resize()

触发、或将函数绑定到指定元素的 resize 事件。

当调整浏览器窗口大小时，发生 resize 事件。

scroll()

触发、或将函数绑定到指定元素的 scroll 事件。

当用户滚动指定的元素时，会发生 scroll 事件。

操作事件

描述

event事件

event.preventDefault()

阻止事件的默认动作。

event.isDefaultPrevented()

返回 event 对象上是否调用了event.preventDefault()。

event.pageX

相对于文档左边缘的鼠标位置。

event.pageY

相对于文档上边缘的鼠标位置。

event.result

包含由被指定事件触发的事件处理器返回的最后一个值。

event.timeStamp

该属性返回从 1970 年1月1日到事件发生时的毫秒数。

event.target

触发该事件的 DOM 元素。

event.type

描述事件的类型。

event.which

指示按了哪个键或按钮。

其他事件

bind()

向匹配元素附加一个或更多事件处理器

unbind()

从匹配元素移除一个被添加的事件处理器

delegate()

向匹配元素的当前或未来的子元素附加一个或多个事件处理器

$(selector).delegate(childSelector,event,data,function)

undelegate()

删除由 delegate() 方法添加的一个或多个事件处理程序。

one()

向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

$("p").one("click",function(){});

hover()

模拟光标悬停事件，光标移动到元素上，触发第1个函数，光标移出元素时，触发第2个函数

toggle()

绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

trigger()

触发()内的事件，比如：$("button").trigger("click");模拟点击了button按钮，可简写为$("button").click();

triggerHandler()

触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。且只影响第一个匹配元素

live()

为当前或未来的匹配元素添加一个或多个事件处理器

die()

移除所有通过 live() 函数添加的事件处理程序。

1.理解事件

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者他的某些元素发生变化时，浏览器会自动生成一个事件。例如：当浏览器装载完一个文档，或用户点击某个按钮，都会生成事件。

2.加载DOM

当浏览器页面加载完毕，浏览器会通过JavaScript为DOM元素加载事件。常规JavaScript代码中，通常使用window.onload方法。在jQuery中使用$(document).ready()方法。

二者区别：

window.onload

$(document).ready()

执行时机

必须网页所有内容都加载完毕(包括图片)才能执行

网页DOM结够绘制完毕就执行，可能DOM内容(图片，文字等)还没加载完毕

编写个数

只能有一个

window.onload = function(){};

可以有多个

$(document).ready(function(){···});

简写

没有简写

$().ready( function(){···} );

或$( function(){···} );

3.jQuery 名称冲突

jQuery 使用 $符号作为jQuery的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用$符号。

jQuery 使用名为 noConflict()的方法来解决该问题。

var jq=jQuery.noConflict(); //帮助您使用自己的名称（比如 jq）来代替 $ 符号。

4.单独文件中的函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的.js文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：

实例

<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="my_jquery_functions.js"></script></head>

5.jQuery 是为处理 HTML事件而特别设计的，遵循以下原则，使代码恰当且更易维护

·把所有 jQuery 代码置于事件处理函数中

·把所有事件处理函数置于文档就绪事件处理器中

·把 jQuery 代码置于单独的.js文件中

·如果存在名称冲突，则重命名 jQuery 库

6.绑定事件

①格式：bind( "type" , [data ,] fn);

参数：

type为事件类型，包括上面的具体事件click、dblclick、focus、blur、mousedown、mouseup、mousemove、mouseenter、mouseleave、mouseover、mouseout、keydown、keyup、keypress、change、select、submit、error、load、unload、resize、scroll。

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

fn为用于绑定的处理函数

②使用：

//绑定一个事件$("button").bind("click",function(){  $("p").slideToggle();});//改变绑定对象$("button").bind("mouseenter",function(){  //绑定事件mouseenter  $("p").show();});$("button").bind("mouseleave",function(){  //修改为绑定事件mouseleave  $("p").hide();});//绑定多个事件，格式：$(selector).bind("event1 event2" , function{···});$("button").bind( "click mouseover" , function(){    $("p").slideToggle();});//绑定多个事件，格式：$(selector).bind("event" , function{···}).bind("event" , function{···})$("button").bind( "click" , function(){    $("p").slideToggle();  }) .bind("mouseover" , function(){    $("body").css("background-color","red");  }) .bind("mouseout" , function(){    $("body").css("background-color","#FFFFFF");});//绑定多个事件，格式：$(selector).bind({event:function, event:function, ···})$("button").bind({  click:function(){$("p").slideToggle();},  mouseover:function(){$("body").css("background-color","red");},    mouseout:function(){$("body").css("background-color","#FFFFFF");}  });//添加事件命名空间$("div").bind("click.plugin" , function(){});$("div").bind("mouseover.plugin" , function(){});$("button").click(function(){  $("div").unbind(".plugin"); //"plugin"命名空间被删除，在其中的click mouseover也被删除  $("div").unbind("click").unbind("mouseover");  //与上面效果相同});

③简写：

$("button").bind("click",function(){});

可以简写为：$("button").click(function(){});

7.合成事件

jQuery有两个合成事件，hover()和toggle()。

①hover()

模拟光标悬停事件，光标移动到元素上，触发第1个函数，光标移出元素时，触发第2个函数

格式：hover(enterfn , leavefn);

使用：

$("button").hover(function(){  $("p").show();},function(){  $("p").hide();});

②toggle() ['tɑɡl]开关，切换

模拟鼠标连续单击事件，第1次单击，触发fn1；···第n次单击，触发fnN；第n+1次单击，触发fn1;···

格式：toggle(fn1 , fn2 , fn3 ···);

使用：

$("button").toggle(function(){  $("p").show();},function(){  $("p").hide();});

8.事件冒泡

①什么是冒泡

当存在嵌套元素，且这些元素被绑定了同一事件时，当内部元素被触发时，外部元素也被触发。这时会按照从内到外的顺序响应事件，成为冒泡。

例如：

<body>  <div>  外层div元素<span>内层span元素</span>  外层div元素  </div></body>$("body").click(function(){alert("body元素被点击")});$("div").click(function(){alert("div元素被点击")});$("span").click(function(){alert("span元素被点击")});

当点击span元素时，div和body的事件也会触发，click事件按照以下顺序“冒泡”：

1<span>

2<div>

3<body>

②冒泡引发的问题

比如上文，我们不想当点击span时，div和body的事件被触发。jQuery中提供了stopPropagation()方法来停止冒泡事件。

解决方法：

$("span").click(function(event){ //event事件对象

alert("span元素被点击")

event.stopPropagation(); //停止冒泡事件

});

$("div").click(function(event){ //event事件对象

alert("div元素被点击")

event.stopPropagation(); //停止冒泡事件

});

9.移除事件

格式：$(selector).unbind(event,function)

event

可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。

function

可选。规定从元素的指定事件取消绑定的函数名。

例如：

<div id="text"></div><button id="btn1">bind</button><button id="btn2">unbind</button> $("#btn1").bind("click",fn1 = function(){  $("#text").append("<p>我的绑定函数1</p>");}).bind("click",fn2 = function(){  $("#text").append("<p>我的绑定函数2</p>");}).bind("click",fn3 = function(){  $("#text").append("<p>我的绑定函数3</p>");}); $("#btn2").click(function(){ $("#btn1").unbind() });   //删除所有事件$("#btn2").click(function(){ $("#btn1").unbind("click") });   //删除所有click事件$("#btn2").click(function(){ $("#btn1").unbind("click",fn1) });   //删除click且函数名fn1的事件

二．动画

方法

描述

显示和隐藏(上下滑动且渐变透明度)

适用于通过 jQuery 隐藏的元素，或display:none的元素（但不适用于visibility:hidden的元素）

hide()

hide([speed,] [callback]);

隐藏被选的元素

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为0

callback可选，show函数执行完之后，要执行的函数。

show()

hide([speed,] [callback]);

显示被选的元素

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为0

callback可选，show函数执行完之后，要执行的函数。

toggle()

toggle([speed,][callback,][switch])

对被选元素进行隐藏和显示的切换

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为0

callback可选，show函数执行完之后，要执行的函数。

switch可选，选择时true只能显示，false只能隐藏。且选择时speed，callback不能选

显示和隐藏(上下滑动)

适用于通过 jQuery 隐藏的元素，或display:none的元素（但不适用于visibility:hidden的元素）

slideDown()

slideDown([speed,] [callback]);

通过调整高度来滑动显示被选元素

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为normal

callback可选，show函数执行完之后，要执行的函数。

slideUp()

slideUp([speed,] [callback]);

通过调整高度来滑动隐藏被选元素

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为normal

callback可选，show函数执行完之后，要执行的函数。

slideToggle()

slideToggle([speed,] [callback]);

对被选元素进行滑动隐藏和滑动显示的切换

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为normal

callback可选，show函数执行完之后，要执行的函数。

显示和隐藏(渐变透明度)

适用于通过 jQuery 隐藏的元素，或display:none的元素（但不适用于visibility:hidden的元素）

fadeIn()

fadeIn([speed,] [callback]);

逐渐改变被选元素的不透明度，淡入从隐藏到可见

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为normal

callback可选，show函数执行完之后，要执行的函数。

fadeOut()

fadeOut([speed,] [callback]);

逐渐改变被选元素的不透明度，淡出从可见到隐藏

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为normal

callback可选，show函数执行完之后，要执行的函数。

fadeTo()

fadeTo([speed,]opacity[,callback])

把被选元素逐渐改变至给定的不透明度

speed可选(毫秒，”slow”，”normal”，”fast”)，不选为normal

opacity必选，透明度，0.00 - 1.00之间

callback可选，show函数执行完之后，要执行的函数。

自定义动画

animate()

对被选元素应用“自定义”的动画

stop()

停止在被选元素上运行动画

queue()

显示被选元素的排队函数

dequeue()

运行被选元素的下一个排队函数

clearQueue()

对被选元素移除所有排队的函数（仍未运行的）

delay()

对被选元素的所有排队函数（仍未运行）设置延迟

1.animate()

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

语法：

$(selector).animate({params},speed,callback);

·必需的 params 参数定义形成动画的CSS属性。

·可选的 speed 参数规定效果的时长。（毫秒"slow" "normal" "fast"）不选normal

·可选的 callback 参数是动画完成后所执行的函数名称。

①可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！如：

backgroundPosition，outlineWidth，letterSpacing，wordSpacing，lineHeight，textIndent，

borderWidth，borderBottomWidth，borderLeftWidth，borderRightWidth，borderTopWidth，borderSpacing，

margin，marginBottom，marginLeft，marginRight，marginTop，

padding，paddingBottom，paddingLeft，paddingRight，paddingTop，

height，width，maxHeight，maxWidth，minHeight，minWidth，font，fontSize，

bottom，left，right，top，

注1：当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。

注2：只有数字值可创建动画（比如"margin:30px"）。字符串值无法创建动画（比如"background-color:red"）。

注3：也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或-=。

当使用相对值时，可以多次点击，值多次增加。

注4：使用bottom，left，right，top属性时，要把元素position设置为relative或absolute。

例如：

$(“button”).click(function(){  $("div").animate({ left:'250px'}, “slow”);  $("div").animate({ marginLeft:'+=50px'}, “slow”);  $("div").animate({ height:'+=150px' }, “slow”);});

②同时执行多个动画，以逗号隔开

$(“button”).click(function(){  $("div").animate({ left:'250px', marginLeft:'+=50px', height:'+=150px'}, “slow”);});

③按顺序执行多个动画

$(“button”).click(function(){  $("div").animate({ left:'250px'}, “slow”);  $("div").animate({ width:'+=50px'}, “slow”);  $("div").animate({ height:'+=50px' }, “slow”);});或$(“button”).click(function(){  $("div").animate({ left:'250px'}, “slow”)        .animate({ width:'+=50px'}, “slow”)        .animate({ height:'+=50px' }, “slow”);});

④动画回调函数，在动画完成之后实现这个函数。

$(“button”).click(function(){  $("div").animate({ left:'250px'}, “slow”)        .animate({ width:'+=50px'}, “slow”)        .animate({ height:'+=50px' }, “slow”);  $("div").css( {‘left’:'0px', ‘width’:’10px’,’height’:’100px’});});//不能达到效果，会立刻执行.css操作，之后再动画。$(“button”).click(function(){  $("div").animate({ left:'250px'}, “slow”)        .animate({ width:'+=50px'}, “slow”)        .animate({ height:'+=50px' }, “slow”,function(){            $("div").css( {‘left’:'0px', ‘width’:’10px’,’height’:’100px’});    });});//能达到效果，动画完成之后执行.css操作。

2.stop()

当动画没运行完毕，再次出发动画时，会将第一次的动画运行完毕，在运行第二次的动画。但我们有时需要停止未运行完毕的动画。需要使用stop()。

格式：stop(stopAll,goToEnd)

stopAll

可选。规定是否停止被选元素的所有加入队列的动画。

goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

stop()或stop(false)或stop(false,fasle)

立即停止当前正在进行的动画，并运行之后的动画

stop(true)或stop(true,false)

立即停止被选元素的所有加入队列的动画

stop(true,true)

立即停止被选元素的所有加入队列的动画，并直接到达当前动画的末状态

stop(false,true)

到达当前动画的末状态，并运行之后的动画

//例如：$("#start").click(function(){    $("#box").animate({height:300,width:300},2000);            .animate({height:50,width:50},2000);});$("#stop").click(function(){    $("#box").stop();});//或：$("#start").click(function(){$("#box").stop(true)        .animate({height:300,width:300},2000)            .animate({height:50,width:50},2000);});

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

只有元素不是动画状态，点击运行动画才有效，否者，点击无效。

if(!($(元素).is(":animate")){    //如果当前没有进行动画，则添加新动画}

0 0