当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jQuery中的事件与动画

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
摘要: 一、事件     1、加载Dom事件       执行时机         $(document).ready()方法和window.onload方法有相似的功能,但在执行时机方面是有区别的。               window.onload:在网页中所有的元素(包括元素所有的关联文件)完全加载到浏览器后才执行,即javascript此时才可以访问网页中的任何元素,只执行一次。 &

一、事件

    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;width: 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",width:"200px"},3000)

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

            //动画回调函数

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

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

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

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

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

            //停止元素的动画

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

                $(this).stop(true)

                        .animate({width:"150"},200)

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

            },function(){

                $(this).stop()

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

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

    </script> </head>

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

    5、其他的jQuery的动画方法        

      a、fadeTo()说明:只改变不透明度
      b、Totggle()说明:用来代替hide()方法和show()方法,所以会同时修改多个样式即高度、宽度和不透明度。
      c、slideToggle()说明:用来代替slideUp()方法,所以只能改变高度
 

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

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

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

    

        

          

 

 

 

        

               

 

jQuery中的事件与动画

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
4.1 jQuery中的事件 4.1.1 加载DOM 1. 执行时机 在常规的JavaScript代码中,通常使用window.onload
4.1 jQuery中的事件 4.1.1 加载DOM 1. 执行时机 在常规的JavaScript代码中,通常使用window.onload
4.1 jQuery中的事件 4.1.1 加载DOM 1. 执行时机 在常规的JavaScript代码中,通常使用window.onload
4.1 jQuery中的事件 4.1.1 加载DOM 1. 执行时机 在常规的JavaScript代码中,通常使用window.onload
目录: 一、事件机制 二、页面载入事件 2.1、ready()方法的工作原理 2.2、ready()方法的几种相同写
事件中的冒泡现象 严格来说,事件在出发后分为两个阶段,一个是捕获,一个是冒泡,但有些遗憾的是,
一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动
jQuery中的事件与动画 一、事件     1、加载Dom事件       执行时机         $(d
<a href="javascript:void(0)" id="show">show</a> javascript:void(0) 防止页面单击以
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号