首页 > 代码库 > 锋利的jQuery第四章:jQuery中的事件和动画
锋利的jQuery第四章:jQuery中的事件和动画
第一部分
1,
(1)$()是$(document)的简写，默认参数是document.
$(function(){}是$(document).ready(function(){})的简写。
2,
(1)事件绑定 bind(type [,data],fn);
type是事件类型，有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,
mouseover,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,
keypress,keyup和error等，也可是是自定义名称。
(2)下面是一个有关bind的例子，实现单击标题是显示内容：
View Code 
<script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $("#panel h5.head").bind("click",function(){ var $content = $(this).next(); if($content.is(":visible")){ $content.hide(); }else{ $content.show(); } });//bind }); //$(document) </script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继prototype之后的有一个优秀的javascript类库 </div></div></body></html>
对于click,mouseover,mouseout这类事件，可以使用下面的简写方法：
View Code <script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); }); }); //$(document) </script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继prototype之后的有一个优秀的javascript类库 </div></div></body></html>
(3)合成事件 hover()方法，语法结构是 hover(enter,leave);用于模拟光标悬停事件。当光标移动到元素上，触发enter函数，当光标移出这个元素触发第二个函数leaver.下面例子同样效果：
View Code <script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }); }); //$(document) </script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继prototype之后的有一个优秀的javascript类库 </div></div></body></html>
(4)toggle()方法，toggle(fn1,fn2,---fnN);模拟鼠标连续单击事件，第一个触发fn1,第二次触发fn2,然后依次向后触发，循环触发。下面使用toggle实现例子
View Code <script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $("#panel h5.head").toggle(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }); }); //$(document) </script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继prototype之后的有一个优秀的javascript类库 </div></div></body></html>
toggle()方法另外一个作用是：切换元素的可见状态，如果可见单击后隐藏；如果隐藏，单击后可见。例子：
View Code <script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ //等待所有dom绘制完成后就执行 $("#panel h5.head").toggle(function(){ //两个函数依次触发 $(this).next().toggle(); //下一个元素在显示和隐藏之间交替 },function(){ $(this).next().toggle(); //下一个元素在显示和隐藏之间交替 }); }); //$(document) </script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继prototype之后的有一个优秀的javascript类库 </div></div></body></html>
3,事件冒泡
(1)事件冒泡，因为多个元素绑定同一事件，而且有嵌套关系，事件触发时就会按照dom的层次结构像水泡
一样不断向上直至顶端。下面就是冒泡的例子：
View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src=http://www.mamicode.com/"jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function () { //等待所有dom绘制完成后就执行 //为span绑定click事件 $("span").bind("click", function () { var txt = $("#msg").html() + "<p>内层span元素被单击</p>"; $("#msg").html(txt); //为msg赋值 }); //bind $("#content").bind("click", function () { var txt = $("#msg").html() + "<p>外层div元素被单击</p>"; $("#msg").html(txt); //为msg赋值 }); //bind $("body").bind("click", function () { var txt = $("#msg").html() + "<p>body元素被单击</p>"; $("#msg").html(txt); //为msg赋值 });//bind }); //$(document) </script></head><body> <div id="content"> 外层div元素 <br /> <span>内层span元素</span> <br /> 外层div元素 <br /> </div> <div id="msg"></div></body></html>
(2)事件对象：当单击元素element时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕，事件对象就销毁了。
$("element").bind("click",function(event){ //event事件对象});
(3)停止冒泡事件，阻止默认行为，添加如下代码即可：
event.stopPropagation(); //阻止冒泡，event是function(event)的参数，也可以是任意的参数如e
event.preventDefault();//阻止默认行为，如阻止表单提交
return false;//同样可以阻止冒泡，也可以阻止表单提交
(4)事件捕获与事件冒泡相反，从顶端body向div再向span捕获，jQuery不支持。
4,事件对象的属性：
(1)event.type 获取事件类型
$("a").click(function (event) { alert(event.type); //获取事件属性 输出"click" return false; //阻止连接跳转 });
(2)event.target 获取触发事件的元素。
$("a[href=http://www.mamicode.com/‘http://google.com‘]").click(function (event) { var tg = event.target; alert(tg.href); //在页面添加一个a,单击输出http://google.com return false;});
(3)event.relatedTarget 访问相关元素。
(4) event.pageX 和 event.pageY 获取光标相对于页面的x坐标和y坐标。
$("body").click(function (event) { alert("当前位置:" + event.pageX + "," + event.pageY);});
(5)event.witch 在鼠标单击时获取鼠标的左右中键(对应1，2，3)，在键盘事件中获取键盘事件。
$("a").mousedown(function (e) { //鼠标按下 alert(e.which)});$("input").keyup(function (e) { //键盘按下 alert(e.which); //输入a弹出65});
(6)event.metaKey 不同浏览器对ctrl解释不同，在jQuery中就是为键盘事件获取ctrl按键。
5,移除事件
(1)$("#btn").unbind("click");//移除click事件
$("#btn").unbind();//移除所有的事件
语法结构：unbind([type],[data]);//type是事件类型，data是要移除的函数。
a,如果没有参数，移除所有绑定事件。
b,如果提供事件类型做为参数，只删除该类型的绑定事件。
c,如果把绑定时传递的参数做为第2个参数，则只有这个特定的事件处理函数被删除。
(1)下面是例子
$("#content").bind("click", fun2 = function () { //给函数命名 var txt = $("#msg").html() + "<p>外层div元素被单击</p>"; $("#msg").html(txt); //为msg赋值}); //bind$("#content").click(function () { //单击自己时，自己解绑 $("#content").unbind("click", fun2);});
(3)one(type,[data],fn);//type是事件类型 one()方法绑定的事件只触发一次就自动解绑。
$("#btn").one("click", function () { $("#test").append("绑定函数1");}).one("click", function () { $("#test").append("绑定函数1");});
另外jquery1.7添加了on(),off(),delegate(),undelegate()事件绑定。
6 模拟事件
(1)常用模拟,使用trigger()方法模拟用户操作，比如页面加载完毕，触发后相当于用户单击
$("#content").trigger("click");//触发click事件，模拟事件
(2)触发自定义事件
$("body").bind("myClick", function () { //自定义名称的事件 alert("自定义事件触发了");});$("body").trigger("myClick"); //触发
(3)传递参数：trigger(type,[data])方法 type是事件类型，data是传递给处理函数的附加数据。
$("body").bind("myClick", function (event, msg1, msg2) { //自定义名称的事件 alert(msg1+msg2);});$("body").trigger("myClick",["自定义事件参数1","参数2"]); //触发
(4)执行默认操作：
$("input").trigger("focus");不但触发input的focus事件，还会是input得到焦点。
$("input").triggerHandle("focus"); 触发input的focus事件 ，但是不会使input得到焦点。
triggerHandle()方法触发事件但是不执行浏览器默认操作。
(5)绑定多个事件类型：
添加如下样式.over{ background-color:Red;}$("div").bind("mouseover mouseout", function () { $(this).toggleClass("over");});//当鼠标移过来class=over,div变红，移走消失。
(6)添加事件命名空间：
$("div").bind("click.plugin", function () { alert("click事件");});$("div").bind("mouseover.plugin", function () { alert("mouseover事件");});$("div").bind("dbclick", function () { alert("dbclick事件");});$("body").click(function () { $("div").unbind(".plugin");//解除命名空间plugin的所有事件});
(7)相同事件名称，不同命名空间执行方法：
$("div").bind("click", function () { alert("click事件");});$("div").bind("click.plugin", function () { alert("click.plugin事件");});$("body").click(function () { $("div").trigger("click!");//叹号匹配所有不包含在命名空间中的click方法});//如果去掉叹号，两者都触发。
第二部分 动画
1,
(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。
可以加参数fast,slow,normal,时间整数(毫秒)。
(2)fadeOut()改到透明度到消失，fadeIn()相反。
(3)slideDown()向下显示，slideUp()向上隐藏。
(4)animate(params,speed,callback)自定义动画，params为样式如{property1:"value1",property2:"value2"}
speed速度，可选；callback动画执行完执行的函数，可选。
2 下面是有关动画的一个综合的例子：
样式：#panel { position:relative; width:100px; height:300px; border:1px solid #0050D0; background:#96e555; cursor:pointer;}html代码：<div id="panel"></div>jQuery代码：$("#panel").click(function () { $(this).animate({ left: "+=500px" }, 3000) //累计从左移动，先执行 .animate({ height: "-=100px" }, 2000) //累计减少高度，后执行 .animate({ opacity: "0.5" }, 3000)//透明度降低到0.5 .fadeOut("slow", function () { //动画都可以带有回调函数 $(this).css("display", "block"); //显示,css方法不加入到动画队列，因此在callback中 $(this).animate({ opacity: "1" }, 3000); //改变透明度 });});
(1)+=和-=可以累计改变属性的值，如果直接写数字则改变一次。
(2)animate中的left是从左，top是从上；
(3)css()方法不会加入到动画队列，而是立即执行。
(4)将多个属性放到animate中会同时执行这些动画。
3,停止动画和判断是否正在动画
(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列；gotoEnd代表
是否直接跳转到 当前动画 的末状态。 如果直接使用stop()就停止当前正在进行的动画，后面的动画继续。
(2)hover(enter,leave)是鼠标悬停事件,进入执行enter，出来执行leave;下面的例子防止动画效果与鼠标不一致：
$("#panel").hover(function () { $(this).stop() //终止当前动画.animate({ height: "150px", width: "300px" }, 2000);}, function () { $(this).stop() //终止当前动画.animate({ height: "22px", width: "60px" }, 2000);});
如果有多个动画，想在enter时停止，可以将参数clearQueue设为true ,像这样stop(true)
stop(false,true)让当前动画直接到末状态。
stop(true,true)让当前动画直接到末状态，并清空动画队列。
(3)判断是否处于动画状态
if (!$(element).is(":animated")) { //判断是否处于动画状态}; //如果当前没有进行动画，添加新动画
(4)延迟动画 delay(1000) 延迟1秒。
4,其他动画
(1)toggle()在显示和隐藏之间切换。
(2)slideToggle()通过高度切换可见行。
(3)fadeTo(2000,0.5)通过透明度调到指定值,2秒透明度到0.5
(4)fadeToggle()通过不透明度切换可见性。
最后一个例子挺好的，实现播放页面的转动，但是我敲出来html后，一看没有css修饰，难看的很，于是什么都不想写了，下面是网上下载的源代码：
html+jQuery<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> </title><link href=http://www.mamicode.com/"style.css" rel="stylesheet" type="text/css" /><script src=http://www.mamicode.com/"http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">$(function(){ var page = 1; var i = 4; //每版放4个图片 //向后 按钮 $("span.next").click(function(){ //绑定click事件 var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域” var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素 var v_width = $v_content.width() ; var len = $v_show.find("li").length; var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画 if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。 $v_show.animate({ left : ‘0px‘}, "slow"); //通过改变left值，跳转到第一个版面 page = 1; }else{ $v_show.animate({ left : ‘-=‘+v_width }, "slow"); //通过改变left值，达到每次换一个版面 page++; } } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); }); //往前 按钮 $("span.prev").click(function(){ var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域” var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素 var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画 if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。 $v_show.animate({ left : ‘-=‘+v_width*(page_count-1) }, "slow"); page = page_count; }else{ $v_show.animate({ left : ‘+=‘+v_width }, "slow"); page--; } } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); });});</script></head><body><div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href=http://www.mamicode.com/"#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/01.jpg" alt="海贼王" /></a><h4><a href=http://www.mamicode.com/"#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/01.jpg" alt="海贼王" /></a><h4><a href=http://www.mamicode.com/"#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/01.jpg" alt="海贼王" /></a><h4><a href=http://www.mamicode.com/"#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/01.jpg" alt="海贼王" /></a><h4><a href=http://www.mamicode.com/"#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/02.jpg" alt="哆啦A梦" /></a><h4><a href=http://www.mamicode.com/"#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/02.jpg" alt="哆啦A梦" /></a><h4><a href=http://www.mamicode.com/"#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/02.jpg" alt="哆啦A梦" /></a><h4><a href=http://www.mamicode.com/"#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/02.jpg" alt="哆啦A梦" /></a><h4><a href=http://www.mamicode.com/"#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/03.jpg" alt="火影忍者" /></a><h4><a href=http://www.mamicode.com/"#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/03.jpg" alt="火影忍者" /></a><h4><a href=http://www.mamicode.com/"#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/03.jpg" alt="火影忍者" /></a><h4><a href=http://www.mamicode.com/"#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/03.jpg" alt="火影忍者" /></a><h4><a href=http://www.mamicode.com/"#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/04.jpg" alt="龙珠" /></a><h4><a href=http://www.mamicode.com/"#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/04.jpg" alt="龙珠" /></a><h4><a href=http://www.mamicode.com/"#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/04.jpg" alt="龙珠" /></a><h4><a href=http://www.mamicode.com/"#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"img/04.jpg" alt="龙珠" /></a><h4><a href=http://www.mamicode.com/"#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div></div></body></html>
css* { margin:0; padding:0; word-break:break-all; }body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }h1, h2, h3, h4, h5, h6 { font-size:1em; }a { color:#2B93D2; text-decoration:none; }a:hover { color:#E31E1C; text-decoration:underline; }ul, li { list-style:none; }fieldset, img { border:none; }/* v_show style */.v_show { width:595px; margin:20px 0 1px 60px; }.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }.v_caption .cartoon { background-position: 0 -100px; }.v_caption .variety { background-position:-100px -100px; }.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }.highlight_tip .current { background-position:0 -220px; }.change_btn { float:left; margin:7px 0 0 10px; }.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }.change_btn .prev { background-position:0 -400px; }.change_btn .next { width:31px; background-position:-30px -400px; }.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }.v_content ul {float:left;}.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }.v_content ul li img { width:128px; height:96px; }.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }.v_content ul li h4 a { display:inline !important; height:auto !important; }.v_content ul li span { color:#666; }.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。