jQuery中的事件与动画 (你的明天Via Via)

众所周知，页面在加载时，会触发load事件；当用户单击某个按钮时，会触发该按钮的click事件。

这些事件就像日常生活中，人们按下开关，灯就亮了(或者灭了)，往游戏机里投入游戏币就可以启动游戏一样，

通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。

在jQuery中，事件总体分为两大类：简单事件和复合事件。

jQuery中的简单事件，与JavaScript中的事件几乎一样，都含有window事件、鼠标事件、键盘事件、表单事件等，

只是其对应的方法名称有略微不同。

复合事件则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

下面总结一下jQuery中的简单事件和复合事件。

一、DOM加载事件

　　页面加载完毕后浏览器会通过javascript为Dom元素加载事件，使用Javascript时候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法,下表

展示两个事件的异同。

执行时机	window.onload方法	$(document).ready()方法
	必须等待所有内容加载完成后才能执行	页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。
绑定函数个数	该方法能够绑定一个函数，如果绑定多个只能执行最后的一个绑定。例： window.onload=function(){alert("1");} window.onload=function(){alert("2");} 执行结果只执行最后绑定的函数结果是打印：2.	能够注册多个函数，按绑定顺序执行绑定函数。例： $(document).ready(funtction(){alert("1");}); $().ready(function(){alert("2");}); 执行结果是顺序执行绑定的函数：先打印1.然后再打印2.
简化写    法	无	$().ready();$.ready()

1.$(document).ready()

$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异：

 当一个文档完全下载到浏览器中时，会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后，代码就可以运行，但并不意味着所有关联文件都已经下载完毕。

一个页面中一般只有一个onload事件处理程序，而且只能一次保存对一个函数的引用；而$(document).ready()是可以有多个。

一般来说$(document).ready()都要优于使用onload事件处理程序。但是如果关联文件还没有加载完成，则类似图像高度、宽度的属性的调用就会有问题，因此需要在不同的时候选择合适的方法。

$(document).ready()有三种写法，分别是：

•  $(document).ready(function() {
  //this is the coding...
  
  }); 
  
  >$().ready(function() {
  //this is the coding...
  });
  >$(function() { 
  //this is the coding... 
  });

 

二、事件处理

　　当文件加载完成后就可以为元素添加事件处理，进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法，主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事件绑定。bind()方法格式如下：

　　　bind(type,[ data],fun);

　　bind()方法有三个参数，各个参数说明如下：

　　第一个参数是事件类型，主要如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称，Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。

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

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

　　为按钮绑定单击事件示例：

　　　　<input type="button" id="btn1" value="单击">

　　　　$("#btn1").bind("click",function(){alert("单击事件绑定");});

　　bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样，区别在于one()方法绑定的事件只能执行一次。

　　为按钮绑定一次性事件示例：

　　　　<input type="button" id="btn1" value="单击">

　　　　$("#btn1").one("click",function(){alert("单击事件绑定");});

　　unbind()方法为元素取消事件绑定，unbind()方法的格式如下：

　　　　$(selctor).unbind([type],[data])

　　unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型，第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

　　示例:

　　　　<input type="button" id="btn1" value="click" />

　　　　<input type="button" id="btn2" value="removeBind" />

　　　　$("#btn1").bind("click", fun1 = function () { alert("事件1"); });

　　　　$("#btn1").bind("click", fun2 = function () { alert("事件2"); });

　　　　$("#btn2").bind("click", function () {
　　　　$("#btn1").unbind("click", fun2);
　　　　});

　　　　该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。

　　live()方法为元素动态绑定事件，使用该方法绑定事件后，新加对应元素也能触发相应事件。live()方法格式如下：

　　　　$(selector).live([type],[data],fun);

　  live动态绑定示例：

　　　　$("p").live("click",function(){$(this).hide();});

　　该示例为所有的p元素节点动态添加了click事件，无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作，结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后，所有动态绑定的事件将删除。

　　trigger()方法在匹配的元素上触发参数中的事件，该方法会触发浏览器默认事件，返回false阻止浏览器默认事件。trigger()方法格式如下:

　　　　$(selector).trigger([type],[data]);

　　trigger()方法示例：

　　　　$("form:first").trigger("submit");

　　该示例触发第一个from表单的submit操作。

　　triggerHandler()方法这个方法会触发绑定事件，但是不会触发浏览器默认事件。与trigger()方法触发后返回false效果一样。使用方法和trigger一样。

　三、事件

　　事件处理中已经列出了主要的事件类型如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件为例，click方法格式如下：绑定事件$(selector).click(functiron(){//函数体})，触发事件$(selector).click()。例：

　　<input type="button" id="btn1" value="绑定事件"/>

　　<input type="button" id="btn2" value="触发事件"/>

　　$("#btn1").click(function(){alert("事件绑定");});

　　$("#btn2").click(function(){$("#btn1").click();})

　　该示例为第一个按钮btn1绑定事件，为按钮btn2绑定事件同时在绑定事件中触发第一个按钮的绑定事件。其余事件类型和click类似。

　四、合成事件

　　合成事件也可以称为交互事件是JQuery自定义的方法，方法有两个hover()和toggle()。

　　hover()方法模仿鼠标悬停事件，方法格式如下：hover(enter,leave)。例：

　　$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});

　　该示例为ul的li元素绑定悬停事件，当鼠标停上ul的子元素li上时候会触发enter()函数，打印“Enter”,当鼠标移出li元素时候会打印"leave"。

　　toggle()方法切换操作循环执行绑定的函数，方法格式如下：toggle(fun1,fun2,...,funN);例:

　　<input type="button" id="btn1" value="触发切换操作"/>

　　$("#btn1").toggle(function(){alert("开始");},function(){alert("继续");},function(){alert("结束");});

　　该示例为按钮btn1绑定切换事件每次单击都会顺序触发绑定事件中的一个。该示例第一次点击打印"开始"，第二次点击打印"继续",第三次点击打印"结束"，再次点击和第一次一样打印"开始"，循环顺序执行函数。

　五、事件属性

　　Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。各个事件属性的如下：

　　事件类型event.type.该属性用于获得触发该事件的类型，对不引发事件的不同操作返回不同的结果;例：

　　　　$("p").click(function(event){alert(event.type);});

　　该示例返回元素p单击事件的事件类型，结果打印是 "click";

　　事件类型event.target该属性用于获得触发事件的元素;例：

　　　　$("a").click(function(event){alert(event.target.href);});

　　该示例返回元素a的href属性。

　　事件默认行为event.preventDefault;该属性用于阻止事件的默认属性，例：

　　　　$("a").click(function(event){event.preventDefault;});

　　使用该属性阻止元素a的默认的跳转行为，结果和return false一样。

　　事件冒泡event.stropPropagation属性用于阻止事件冒泡，例：

　　　　$("div").click(function(event){alert("里层点击");event.stopPropagation;});

　　该示例中使用stopPropagation属性阻止div的父元素的click事件被触发。

　　event.pageX和event.pageY属性，使用这两个属性可以获得鼠标的相对于页面的当前位置。例：

　　　　$("p").click(function(event){alert("current mouse location  "+event.pageX+" "+event.pageY);});

　　该示例当点击元素p的时候获得鼠标的当前位置，并打印出来。

　　event.witch属性，使用这个属性可以获得鼠标单击时候鼠标的左中右键，在键盘事件中获得键值。

　　　　$("p").mousedown(function(event){alert(event.witch);});

　　该示例当鼠标按下时候打印鼠标键值。左中右健分别对应值是1、2、3。

　　event.metaKey属性用于在事件获得键盘的ctrl键，例：

　　　　$("body").keydown(function(event){if(event.metaKey){alert("ctrl");}else{alert("no ctrl");}});

　　该示例当在页面中按下键盘时候如果按键为ctrl键就打印ctrl，否则打印"no ctrl".

 　六、事件冒泡

事件捕获： 允许多个元素响应事件的一种策略。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。

事件冒泡：另外一种相反的策略叫时间冒泡，当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。事件冒泡有时候会产生副作用，导致始料不及的行为。

　　页面中有多个绑定事件因此可能出现多个元素响应同一个事件，由此引发了事件不是我们预期的，这种现象就是事件冒泡，要处理这个问题可以对事件的作用范围进行限制，Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡示例：

　　

<body><div><span>事件冒泡</span>div内容</div>body内容</body>

　　$("body").click(function(){alert("body");});

　　$("body div").click(function(){alert("div");});

　　$("span").click(function(){alert("span");});

　　在该示例中当点击span时候会触发三个打印事件 "span" "div" "body"，如何阻止事件冒泡？可以使用Jquery事件中的stropPropagation()方法来停止事件冒泡。上面示例改成这样：

　　

$("body").click(function(event){alert("body");event.stopPropagation();});

　　$("body div").click(function(event){alert("div");event.stopPropagation();});

　　$("span").click(function(event){alert("span");event.stopPropagation();});

指定默认操作

通过调用.preventDefault()方法可以在出发默认操作之前终止事件。

调用 event.stopPropagation()停止事件传播

jQuery提供了一个.stopPropagation()方法，使用该方法可以完全阻止事件冒泡。实例代码如下：

$(document).ready(function() {
    $('switcher').click(function(event){
        if(this.id == 'switcher-narrow'){
            $('body').addClass('narrow');
        }
        else if(this.id == 'switcher-large'){
            $('body').addClass('large');
        }
        $('switcher .button').romoveClass('selected');
        $(this).addClass('selected');
        event.stopPropagation();
    };)
});

阻止：

$(document).ready(function() {
    $('switcher').click(function(event){
        if(event.target == this)
        {
            $('switcher .button').toggleClass('hidden');
        }
    };)
});

　　这样当点击不同元素时候就不会发生冒泡事件。

　七、事件命名空间

　　事件添加命名空间便于事件的管理:删除事件和触发事件。例：

　　<div>元素绑定多个事件</div>

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

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

　　$("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");});

　　$("div").bind("dbclick",function(){alert("dbclick");});

　　由于使用了命名空间可以删除指定命名空间中的事件，如移除所有plugin命名空间下的事件函数方法如下:$("button").click(function(){$("div").unbind(".plugin");});这样就移除了所有命名空间是plugin的事件函数。div中只剩下click和dbclick绑定事件。

　　使用命名空间对触发特定的事件了带来了方便，如为div绑定了两个click事件，一个是带命名空间的一个是不带命名空间。如果想要触发不包含在命名空间中的事件可以使用trigger("click!")方法，！感叹号的作用是匹配所有不包含在命名空间中的click方法。

复合：

在进行事件捕获的时候，常常需要捕获组合的用户操作，并且以多个函数作为响应，这些事件我们称为复合事件。

jQuery提供的.read()方法就是最常用的符合事件方法之一，除此之外，还有进行交互处理的时候用到的两个函数：

.hover(over,out)    一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

.toggle(fn,fn)   每次点击时切换要调用的函数。

---

---

                                                          动画

如果说行(action)胜于言，那么在JavaScript的世界里，效果则会让操作(action)更胜一筹。

通过jQuery，不仅能够轻松地为页面操作添加简单的视觉效果，甚至能创建出更为精致的动画。

jQuery效果能够增添页面的艺术性，一个元素逐渐滑入视野而不是突然出现时，带给人的美感是不言而喻的。

此外，当页面发生变化时，通过效果吸引用户的注意力，则会显著增强页面的可用性。

方法名	说明
Hide()跟show()	同时修改多个样式属性：高度、宽度、不透明度
fadeIn(),fadeout()	只修改不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
Toggle()	用来替代hide()方法和show()方法，所以会同时修改多个样式属性即高度宽度和不透明度
slideToggle()	用来代替slideUp()和slideDown()方法，所以只能改变高度
Animate()	属于自定义动画的方法，以上各种动画方法实质上都掉了了animate()方法，直接使用animate()方法还能自定义其他的属性样式，例如left,marginLeft,scrollTop等

jquery中常用的动画的方法就是hide()与show().

一、show()方法和hide()方法

　　show()方法和hide()方法是jquery中最基本的动画方法。使用show()方法会将隐藏的元素显示出来，使用hide()方法会将元素的属性设置为display:none。使用hide()方法会记住原来的display属性值，并把现在的display属性设置为none;show()方法会元素的属性设置为hide()前的属性值。

　　示例：

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

　　该示例点击button按钮时候交替切换p元素的状态为隐藏和可见状态，此时该方法同css("diplay","none/block/inline")效果一样，但是hide()和show()方法可以带有参数调整动作的执行速度。分别为"slow","normal","fast",对应时间为0.6秒、0.4秒和0.2秒。也可设置整数指定执行时间数字计数级别是毫秒。如：("p").show(1000);该示例使p元素中1秒内显示完毕。也能添加回调事件函数。

用于创建自定义动画的函数。 
返回值:jQuery animate(params, [duration], [easing], [callback]) 

如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。paramsOptions一组包

含作为动画属性和终值的样式属性和及其值的集合

params 对象{},注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left，如果使用的是“hide”、

“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。 

duration (可选)三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"

callback (可选)Function在动画完成时执行的函数

---

$(element).hide()这段代码可以与这相等element.css("display","none")

 在hide(time)与show(time)中填入事件，可以慢慢消失跟显现。可以修改元素的多个样式，高度，宽度，不透明度。

另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是，当使用hide或者show的时候会改变网页的高度，而fadeIn与fadeOut则不会。

 $("#panel h5.head").toggle(function(){
                    $(this).addClass("highlight");
                    $(this).next().fadeOut(1000);
                },function(){
                    $(this).removeClass("highlight");
                    $(this).next("div .content").fadeIn(1000);
                });

停止动画

 if($('.swaplist,.mainlist').is(':animated')){
     $('.swaplist,.mainlist').stop(true,true);
 }

二、fadeIn()方法和fadeOut()方法

　　fadeIn()方法和fadeOut()方法只改变元素的不透明度借以改变元素的显示状态。例：

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

　　该示例通过改变元素的不透明度改变元素的是显示状态，同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。

三、slideUp()方法和slideDown()方法

　　slideUp()方法和slideDown()方法通过改变元素的的显示状态。例：

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

　　该示例通过改变元素的高度改变元素的是显示状态，同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。

四、自定义动画

　　前面三种类型动画方法满足用户的各种需求，需要采取一些高级的自定义动画来解决问题，Jquery中定义了animate()方法来实现自定义动画，语法结构为：animate(params,speed,callback);

　　参数如下：params一个包含样式属性及值的映射，比如：{"500",height:"300",....};speed速度参数，可选。callback在动画完成时执行的函数，也是可选的。

　 1、自定义简单动画

　　自定义一个简单动画使元素中页面飘动,示例如下：

　　先定义样式

<style type="text/css">
.panel
{
position: relative;　　//位置样式必须为relative或者absolute.
 200px;
height: 200px;
border: 1px solid;
background: #96E555;
}
</style>

页面中定义一个div元素class="panel"。

<div class="panel"></div>

设置元素点击事件时候触发动画事件，事件绑定函数如下：

$(".panel").click(function () {
$(this).animate({ top: "100px", left: "500px" }, 1000);
});

这样一个简单的动画就完成了，页面加载完成后当点击元素时候div元素会中1秒内，移动到指定位置。

2、累加动画

上面只实现了一次性位置改变，也实现累加改变位置动画，只需要改变事件绑定函数如下:

$(".panel").click(function () {
$(this).animate({ top:"+=100px", left: "+=50px" }, 1000);
});

这样连续点击div元素时元素位置会连续改变。实现了动画的累加。

3、顺序动画

　　上面的动画top位置和left位置是同时改变的，也可以顺序执行位置改变动画，如下：

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

$(this).animate({ top: "+=50px" }, 1000);
$(this).animate({ left: "+=50px" }, 1000);
});

这样当点击div元素时候动画就会顺序执行先改变top位置，再改变left位置，连续点击连续改变。也可以改写成链式形式如下：

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

$(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000);
});

像这样的动画的执行按顺序执行，又可以称为"动画队列"。

4、回调函数

　　在动画结束后可以使用回调函数改变元素的样式、内容等来达到想要的显示效果。如在div元素示例中添加回调函数如下：

　　

 $(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000, function () { $(this).css("border", "5px solid blue"); });

　　通过在最后一个animate方法加添加回调函数，在动画结束后回调函数会改变元素的边框宽度和颜色。

　  5、停止动画和动画状态

　　上面的示例中如果连续点击div元素，动画会一直执行相应的次数后才停止，使用stop()方法可以停止正在进行的动画。stop方法结构是stop([clearqueue],[gotoEnd])两个参数都是可选参数，参数都是bool值true或false。如果clearqueue为true则方法会清除动画队列，如果gotoEnd为true动画直接跳转到结束状态。以合成事件hover为例：使用上面的div元素为元素绑定hover事件如下：

　　

$(".panel").hover(function(){$(this).stop().animate({height:"200px"},2000);},function(){$(this).stop().animate({height:"300px"},2000);});

　　该示例中使用无参数的stop()方法停止当前正在执行的动画然后执行stop()方法后面的新的动画。不带参数的stop方法停止的是当前正在执行的动画，如果是当前动画后有动画等待执行stop()方法后后面的动画会继续执行，此时需要使用带参数的stop方法停止动画并清空动画队列，或者使动画直接到达最后状态。

　　动画状态用于判断元素是否处理正在动画状态，判断方法和jquery选择器一样使用.is(":animated")方法来判断，使用该方法可以跟据元素是否处于动画状态来做出相应的操作。例：如果元素处理动画状态就不添加新的动画，否则添加新动画。

　　

if(!$(".panel").is(":animated")){$(this).animate({left:"+=300"},2000);}

　6、交互的动画方法

　　Jquery提供了3种专门用于交互的动画方法:toggle(speed,[callback])、slideToggle(speed,[callback])、fadeTo(speed,opacity,[callback])。

　　toggle方法用于切换元素的可见性状态，如果元素是隐藏的则显示元素，如果元素是可见的则隐藏状态。例：

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

$(this).prev("div.panel").toggle(3000, function () { alert($("div.panel").is(":visible")); });

});

该示例使用toogle交互方法改变div元素的可见性，在动画结束后打印元素的当前可见性状态。

slideToggle方法用于通过改变高度改变元素的可见性状态，例：

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

$(this).prev("div.panel").slideToggle(3000, function () { alert($("div.panel").is(":visible")); });

});

该示例通过使用slideToggle方法改变元素的高度实现元素的可见性改变，最后在动画执行结束后执行回调函数打印元素的当前状态。

fadeTo方法用于改变元素的透明度，使用该方法也可以实现可见性的改变。例：

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

$(this).prev("div.panel").fadeTo(3000,0.2,function () { alert($("div.panel").css("opacity"); });

});

使用方法改变元素的透明度，然后使用回调函数打印元素的当前透明度。

animate实例：

1.点击按钮后div元素的几个不同属性一同变化

1 $("#go").click(function () {
2     $("#block").animate({
3          "90%",
4         height: "100%",
5         fontSize: "10em",
6         borderWidth: 10
7     }, 1000);
8 });

2.让指定元素左右移动

$("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
});

 3.在600毫秒内切换段落的高度和透明度

$("p").animate({
    height: 'toggle', opacity: 'toggle'
}, "slow");

4.用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

$("p").animate({
    left: 50, opacity: 'show'
}, 500);

5.切换显示隐藏

$(".box h3").toggle(function(){
    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
        $(this).addClass("arrow");
        return false;
 
    },function(){
        $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
        $(this).removeClass("arrow");
        return false;
    });
});

//滚动焦点
$(window).scroll(function () {              //当前窗口的滚动事件
var winTop = $(window).scrollTop();     //获取当前窗口的大小
var objTop = $("#obj1").offset().top;   //获取当前对象的x坐标
});

关于事件和动画总结至此！

                                                                            

                                                                                                                      生命不息，编码不止。

                                                                                              爱自己 爱生活  爱代码  爱音乐 爱文字 爱交友

                                                            

   

©北京你好！

            作者：微冷的风

            出处：http://www.cnblogs.com/smbk/ 
    
            本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。