jQuery中的事件与动画

一、事件

　　　　1、加载Dom事件

　　　　　　执行时机

　　　　　　　　$(document).ready()方法和window.onload方法有相似的功能，但在执行时机方面是有区别的。　　　　　　

　　　　　　　　window.onload:在网页中所有的元素（包括元素所有的关联文件）完全加载到浏览器后才执行，即javascript此时才可以访问网页中的任何元素，只执行一次。

  　　　　　　　$(document).ready():通过$(document).ready处理，DOM完全就绪后可以被任意调用，可执行多次。

　　　　2、事件绑定和移除事件

　　　　事件绑定　　　　　

　　　　　　　　Bind()的调用格式：Bind( type [,data] , fn);　　　　　　　

　　　　　　　　第1个参数是事件类型，类型包括：blur、focus 、load 、resize 、scroll 、unloand 、click 、dblclick 、mousedown 、mouseup 、mousemove 、

　　　　　　　mouseover 、mouseout 、mouseenter 、mouseleave 、change 、select 、submit 、keydown 、keypress 、keyup 和error等，也可以是自定义名称　

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

　　　　　　　　第3个参数则是用来绑定的处理函数，Fn

　　　　　　使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。也就是说，只处理已存在的事件，后面动态添加的就不处理了。

　　　　注意：在jQuery中的事件绑定类型比普通的JavaScript事件中少了“on”  如:click与onclick()函数

　　　　　　例：

　　　　　　　　　　$(function() {

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

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

            　　　　　　});

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

                　　　　　　　　$(this).next("div.content").show();   })  })

　　　　　　　　　　这样，当我们用鼠标指上标题时，内容就会显示，当鼠标移开标题是，内容就会自动收缩。

　　　　　　事件移除:

　　　　　　　　移除按钮上以前注册的事件:unbind([type],[data]) 　　　　　　

　　　　　　　　同时移除多个事件:unblind(type1).unbind(type2)......unbind(typeN)

　　　　3、合成事件

　　　　　　　　a、hover()方法　　　　　　　　　　

　　　　　　　　　　语法　　　　　　 hover(enter,leave);

　　　　　　　　　　用途　　　　　　模拟光标悬停事件。也就是当光标移动到元素上时，会触发指定的第一个函数（enter）；移除时触发第二个函数（leave）。

　　　　　　　　　　例：　　　　

　　　　　　　　　　　　　　　　$(function(){

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

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

     　　　　　　　　　　　　　　 },function(){

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

    　　　　　　　　　　　　 　　 });

　　　　　　　　　　　　　　  });

　　　　　　b、Toggle()方法　　　　　　　　

　　　　　　　　　　语法　　　　　　toggle(fn1,fn2,fn3……fnN) 

　　　　　　　　　　用途　　　　　　 模拟鼠标连续单击事件，第一次单击触发函数fn1，第二次fn2…….

　　　　　　　　　　例（添加和移除高亮效果）

　　　　　　　　　　　　　　$(funcion){                                                   

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

  　　　　　　　　　　　　　　$(this).addclass("highlight").show();

　　　　　　　　　　　　　　},function(){

  　　　　　　　　　　　　　　$(this).remove("highlight");

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

      　　　　　　　　　　　　});

　　　　　　　　　　　　});

　　　　4、事件冒泡

　　　　　　　　定义:子元素和父元素绑定同样的事件,子元素该事件被触发了,父元素也相应的触发,事件按照特定顺序由里往外响应

　　　　　　　　引发的问题及解决方案: 问题:引起预料之外的结果 解决方案:1 事件注册之后return false;     2 event.stopPropagation();  注:event是由函数中传下来的

　　　　　　　　阻止默认行为:preventDefault()　　　　或者 return false

　　　　　　停止事件冒泡

　　　　　　　　$("span").bind("click", function(even) {

               　　　　 var txt = $('#msg').html() ;

                　　　　$('#msg').html(txt);

  　　　　　　　　even.stopPropagation();//停止

　　　　5、事件对象的属性　　　　　

　　　　　　　　1.    Event.type()方法.　　　　可以获取到事件的类型

　　　　　　　　2.   Event.preventDefault().方法　　　　阻止默认的事件行为.

　　　　　　　　3.Event.stopPropagation()方法.　　　　停止事件冒泡：

　　　　　　　　4.Event.target()方法.　　　　

　　　　　　　　　　　　获取到触发事件的元素.jQuery对其封装后

　　　　　　　　　　　　避免了w3c.IE和safari浏览器不同标准的差异.

　　　　　　　　5.Event.relatedTarget()方法.

　　　　　　　　6.Event.pageX()方法/event.pageY()方法.　　　　获取的光标相对于页面的 x 坐标和y 坐标。

　　　　　　　　7.Event.which()方法.　　　　在鼠标单击事件中获取到鼠标的左. 中. 右键

　　　　　　　　8.Event.metaKey()方法.　　　　针对不同浏览器对键盘中的<ctrl>按键解释不同

　　　　　　　　9.Event.originalEvent()方法.　　　　指向原始的事件对象

二、jQuery中的动画

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

　　　　　　　　定义：这两种方法可控制”内容“显示和隐藏，其实这两种方法也可以让元素动起来　　　　　　　　

　　　　　　　例子：　$(“#panle h5.head”).toggle(function(){

　　　　　　　　$(this).next(“div.content”).hide(600);//在600毫秒内隐藏起来

　　　　　　　　},function(){

　　　　　　　　$(this).next(“div.content”).show(600);//在600毫秒内显示出来起来

　　　　　　});

　　　　　　这样，元素就动起来了，除了可以直接写数字外，还有速度参数，eg：slow（600毫秒）normal（400毫秒），fast（200毫秒）

　　　　　　注意：在用show()方法和hide()方法时，一般把css样式display属性的值设置为none

　　　　2、fadeln()方法和fadeOut()方法

　　　　　　　　定义：这两种方法只改变元素的不透明度，fadeout()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:none”）,

　　　　　　　　　　　　 fadeln()方法则相反。

　　　　　　　　例子：$(“#panle h5.head”).toggle(function(){

　　　　　　　　　　　　$(this).next(“div.content”).fadeOut();//单击连接后，“内容”慢慢的消失了（淡出），

　　　　　　　　　　　　},function(){

　　　　　　　　　　　　$(this).next(“div.content”).fadeIn()//当再次单击连接，“内容”又慢慢的显示出了（淡入）

　　　　　　　　　　});

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

　　　　　　　　方法简介： slideUp()方法和slideDown()方法智慧改变元素的高度

　　　　　　　　用　　法：如果将一个元素的display属性值为“none”，当调lideDown()方法时，这个元素将由上到下延伸显示。slideUp()方法则相反，

　　　　　　　　　　　　　元素将由由下到上缩短显示。

　　　　　　　　例　　子：$(“#panle h5.head”).toggle(function(){

　　　　　　　　　　　　　　$(this).next(“div.content”).slideUp();

　　　　　　　　　　　　　　},function(){

　　　　　　　　　　　　　　$(this).next(“div.content”).slideDown()

　　　　　　　　　　　　});　　　

　　　　注意：JQuery中的任何动画效果，都可以指定3种速度参数，即“slow”，“normal”和“fast”（时间分别为0.6秒，0.4秒，0.2秒），  

                     当使用关键字时要加引号，如：show（slow），如果用数字作为时间参数时就不需要加引号，如：show（1000）。

　　　　4、自定义动画方法animate(动画参数，执行时间，回调函数)

　　　　　　　　注意要执行元素的移动   position: absolute;

　　　　　　　　下面是关于animate的代码：　　　　　　　　　

<!DOCTYPE html>

<html> <head>

    <title></title>

    <style type="text/css">

        #panel{

            position: relative;height: 100px; border: 1px solid #0050D0;background: #96E555; cursor: pointer; 100px; }

    </style>

    <script type="text/javascript" src="jquery-1.4.1-vsdoc.js"></script>

    <script type="text/javascript">

        $(function(){

            //图片向右运动            /* $("#panel").click(function(){   $(this).animate({left:"+=500px"},3000); });*/

            //图片向左运动            /* $("#panel").click(function(){  $(this).animate({left:"-=500px"},3000); });*/

            //同时执行多个动画             /*$("#panel").click(function(){  $(this).animate({left:"500px",height:"200px"},3000);});*/

            //综合动画

           /* $("#panel").css("opacity","0.5");

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

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

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

                        .fadeOut("slow"); });*/

            //动画回调函数

         /*   $("#panel").css("opacity","0.5");

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

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

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

                            $(this).css("border","5px solid blue");}) });*/ 

            //停止元素的动画

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

                $(this).stop(true)

                        .animate({"150"},200)

                .animate({"300"},300);

            },function(){

                $(this).stop()

                .animate({height:"22"},300)

                        .animate({"60"},300);  });  });

    </script> </head>

<body><div id="panel"></div> </body> </html>

　　　　5、其他的jQuery的动画方法　　　　　　　　

　　　　　　a、fadeTo（）说明：只改变不透明度

　　　　　　b、Totggle（）说明：用来代替hide（）方法和show（）方法，所以会同时修改多个样式即高度、宽度和不透明度。

　　　　　　c、slideToggle（）说明：用来代替slideUp（）方法，所以只能改变高度

 

　总结：学了这一章之后，做了两个小的测试，一个是视频展示效果（点击按钮，电影或者视频列表会左右滚动），另一个是淘宝商城商品类别列表的效果。虽然这

　　　　两个做得都不是很完整（比如说：样式没有调好.....），但基本效果还是有的，还是有一点点的成就感。另外，在做动画的过程中，需要特别注意动画的执

　　　　行顺序，也要注意非动画方法会捅对，可以通过动画方法的回调函数解决这个问题。