zoukankan      html  css  js  c++  java

  • jquery事件和动画操作集锦

    一，事件
    1,加载事件
    1
    2
    3
    4
    5
    6
    $(document).ready(function(){
      //todo
    }); //dom准备就绪后执行ready里面的函数，此时dom对应的相关文件(比如图片)可能还未加载完毕，此时图片的height和width还不能访问。
    $img.load(function(){
        //todo
    }); //图片加载完毕后执行里面的函数。
     
    2，事件绑定：
    1） 
    1
    2
    3
    4
    5
    6
    7
    8
    var $ul=$("#ulMain");
                $ul.bind("click",{name:"zy",age:22},function(event){
                    alert(event.data.name);
                });  //绑定ul的click事件，并传递一个参数（参数类型为一个对象）。bind方法可以多次调用。
    简写方式如下：
    $ul.click({name:"zy",age:22},function(event){
                    alert(event.data.name);
                });
    2）一次绑定多个事件：
    1
    2
    3
    $("#divMain").bind("mouseenter mouseleave",function(){
                    $(this).append($("<b>div append</b>"));
                });
     
    3）添加事件命名空间：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("#divMain").bind("mouseenter.divevent",function(){
                    $(this).append($("<b>div mouseenter</b><br/>"));
                }).bind("click.divevent",function(){
                    $(this).append($("<b>div click</b><br/>"));
                }).bind("dblclick.divevent",function(){
                    $(this).append($("<b>div dblclick</b><br/>"));
                });
      
                $("#btnSubmit").bind("click",function(){
                    $("#divMain").unbind(".divevent");  //解除命名空间即可
                });
     
    4）相同事件名，不通命名空间：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("#divMain").bind("click",function(){
                    $(this).append($("<b>div click</b><br/>"));
                }).bind("click.divevent",function(){
                    $(this).append($("<b>div click.divevent</b><br/>"));
                });
      
                $("#btnSubmit").bind("click",function(){
                    $("#divMain").trigger("click!"); //感叹号表示仅触发没有命名空间的事件，这里仅会触发click事件，注意：1.9及以后版本移除了该功能！
                    $("#divMain").trigger("click");  //触发所有click事件，这里会触发click和click.divevent事件。
                });
     
    3，合成事件：
    即绑定了2个事件：
    1）hover事件：模拟光标移入移出事件，它是用来替代mouseenter, mouseleave事件的，而非mouseover, mouseout事件。
    1
    2
    3
    4
    5
    6
    var $ul=$("#ulMain");
                $ul.hover(function(){
                    $(this).css({backgroundColor:"red"});//光标移入该元素时修改背景色为红色
                },function(){
                    $(this).css({backgroundColor:"white"});//光标移入该元素时修改背景色为白色
                });
     
    2）toggle事件：有两个功能：
    2.1） 鼠标连续单击同一元素依次执行相应的处理函数：toggle(fn1, fn2, fn3, ... fnN); 但是该功能在1.9及以后版本移除了，请注意。
    1
    2
    3
    4
    5
    6
    7
    $("#btnMain").toggle(function(){
                    $ul.css("color","red");
                },function(){
                    $ul.css("color","yellow");
                },function(){
                    $ul.css("color","blue");
                });  //依次单击按钮触发的事件。
     
    2.2)     控制相应元素的显示和隐藏：
    1
    2
    3
    4
    var $ul=$("#ulMain");
                $("#btnMain").click(function(){
                    $ul.toggle();
                });  //   单击按钮时，隐藏或显示ul
     
    3，事件冒泡：例如：如果span元素注册了click事件，span的父元素div也注册了click事件，div的父元素也注册了click事件，
    那么单击span会依次触发这三个事件。
    3.1） 阻止事件冒泡：
    1
    2
    3
    4
    $("#spanMain").click(function(event){
                    $("#spanSpan").text("span click");
                    event.stopPropagation();  // 阻止事件冒泡，event为事件对象
                });
     
    3.2）阻止默认行为：
    1
    2
    3
    4
    5
    6
    7
    $("#btnSubmit").click(function(event){
                    if($("txtName")=="")
                    {
                        //todo,错误提示
                        event.preventDefault();//阻止submit的默认行为，即不提交表单。
                    }
                });
     
    若要同时阻止事件冒泡和默认行为，可以在事件处理函数中返回 return false。
     
    5，事件对象的属性：
    1）type属性：
    1
    2
    3
    $("#btnPay").click(function( event ){
        alert(event.type);  //事件的类型，此处输出 click
    });
    2)  event.stopPropagation(); //阻止冒泡行为
    3）event.preventDefault();  //阻止默认行为
    4）target属性：
    1
    2
    3
    4
    5
    $("a").click(function(event){
                    var tg=event.target;//获取触发事件的元素，这里为<a/>，该对象是DOM对象
                    alert(tg.href);
                    return false;
                });
    5）relatedTarget属性：
    1
    2
    3
    4
    5
    6
    7
    8
    $("a").mouseover(function(event){
                    var reltg=event.relatedTarget; //相当于IE中的event.fromElement，即光标是从哪个元素移入的
                    alert(reltg.toString()); //
                    return false;
                }); //
    $("a").mouseout(function(event){
                    alert(event.relatedTarget.toString()); // 针对mouseout，相当于IE中的event.toElement，即光标移出后到哪个元素上了。
                });
    6)   pageX，pageY属性：获取到光标相对于页面的x坐标和y坐标。
    1
    2
    3
    4
    $("a").click(function(event){
                    alert(event.pageX+","+event.pageY);
                    return false;
                });
    7） which属性：鼠标单击事件中获取鼠标的左，中，右键对应的值，键盘事件中获取键盘的按键。
    1
    2
    3
    $("#txtMain").keyup(function(e){
                    alert(e.which); // 比如按键盘上的A，则返回65
                });
    8）特殊键属性：如ctrlKey, altKey, shiftKey，按了哪个键，就会返回true，否则返回false。
    1
    2
    3
    $("#txtMain").keydown(function(e){
                    alert(e.ctrlKey+"，"+e.shiftKey+"，"+e.altKey);
                }); 
    6，移除事件：
    1) unbind方法：
    unbind(); //删除所有事件
    unbind(eventTypeString); //只删除指定类型的事件，比如"click"
    unbind(eventTypeString, funcName); //删除指定类型事件的指定处理函数。
    下面是最后一个例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var $ul =$("#ulMain");
                $("#btnMain").click(func1= function(e){
                    $ul.append($("<li>func1</li>"));
                }).click(func2=function(){
                    $ul.append($("<li>func2</li>"));
                });
      
                $("#btnDel").click(function(){
                    $("#btnMain").unbind("click",func2);
                });
    2）one方法：仅执行一次绑定的事件，用法同bind方法。
    1
    2
    3
    4
    var $ul =$("#ulMain");
                $("#btnMain").one("click",function(){
                    $ul.append($("<li>func1</li>"));
                }); //click事件仅会触发一次。
    7，模拟操作：
    1）trigger()方法： 该方法能触发相应事件，比如：
    1
    2
    3
    4
    5
    6
    7
    $("#btnMain").bind("click",function(e,name,age){
    $(function(){
                var $ul =$("#ulMain");
                $("#btnMain").bind("click",function(e,name,age){
                    alert(name+","+age);
                }).trigger("click",["zy",11]);  // 页面加载后就会执行click事件处理函数。
            });
    另外还会执行浏览器默认操作：
    $("#txtMain").trigger("focus");  //触发元素的focus事件，同时元素本身获得焦点。
    下面的函数仅触发事件，不执行浏览器默认操作：
    $("#txtMain").triggerHandler("focus");  //触发元素的focus事件，不执行默认操作。
     
    二，动画
    jquery动画要求在标准模式下，即文件头包含如下内容：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    1， show() ,  hide(): 原理是修改元素的display样式。
    1
    2
    3
    4
    5
    6
    $divMain =$("#divMain");
                $("#btnSubmit").toggle(function(){
                    $divMain.hide(1000);  //元素在1000毫秒内隐藏掉，不带参数会立即隐藏
                },function(){
                    $divMain.show(1500); //元素在1500毫秒内显示出来
                });
     
    2，fadeIn() , fadeOut(): 原理：改变元素透明度。
    fadeIn:  在一段时间内增加元素的不透明度，直到元素完全显示出来。
    fadeOut: 在一段时间内降低元素的不透明度，直到元素完全显示消失。
     
    3，slideUp(),  slideDown(): 原理：改变元素高度。
    slideUp: 元素由下到上缩短至隐藏。
    slideDown: 元素由上到下延伸至显示。
    1
    2
    3
    4
    5
    6
    $divMain =$("#divMain");
                $("#btnSubmit").toggle(function(){
                    $divMain.slideUp();
                },function(){
                    $divMain.slideDown();
                });
     
    4，自定义动画方法animate()
    语法：animate(params, speed, callback);
    1) 向右移动500px
    样式：
    1
    2
    3
    4
    5
    6
    7
    8
    #divMain{
            position:relative;  //或者是absolute，这样才可以影响元素的top, left, bottom, right属性。
            width:300px;
            height:300px;
            border:1px solid #005000;
            background:#96E555;
            cursor:pointer;
        }
    JS脚本：
    1
    2
    3
    4
    5
    6
    $(function(){
                $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.animate({left:"500px"}, 2000,null);
                });
            });
    2）累加，累减动画：
    1
    2
    3
    4
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.animate({left:"+=200px"}, 2000);     //在当前位置累加200px
                });
     
    3)多重动画：
    1
    2
    3
    4
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.animate({left:"+=200px",height:"-=50px"}, 2000); // 位置变化的同时，高度也在变化
                });
     
    4）顺序执行动画：
    1
    2
    3
    4
    $("#btnSubmit").click(function(){
                    $divMain.animate({left:"+=100px"}, 1000)
                    .animate({height:"-=50px"},1000);
                });
     
    5，停止动画和判断是否处于动画状态：
    1）停止动画：
    1
    2
    3
    4
    5
    stop(clearQueue, gotoEnd); // clearQueue表示是否清空未执行完的队列， gotoEnd表示是否将正在执行的动画跳转到末状态。
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.stop().animate({left:"+=100px"}, 1000); // 停止当前正在执行的动画，立即执行向右移动100的动画。
                });
    2) 判断元素是否处在动画中：
    1
    2
    3
    4
    5
    6
    7
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    if(!$divMain.is(":animated"))  //元素不处于动画中才执行下面的动画
                    {
                        $divMain.animate({left:"+=100px"}, 1000);
                    }
                });
    3）延迟执行动画：delay()函数
    1
    2
    3
    4
    5
    6
    7
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    if(!$divMain.is(":animated"))
                    {
                        $divMain.delay(2000).animate({left:"+=100px"}, 1000);  //推迟2秒后才执行动画
                    }
                });
    6，其它动画函数：
    1）slideToggle(): 改变元素高度来隐藏元素
    1
    2
    3
    4
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.slideToggle();
                }); 
    2）fadeTo() 调整元素的不透明度，不改变宽高：
    1
    2
    3
    4
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.fadeTo(1000,0.2); //用1000毫秒时间将不透明度调整到20%
                }); 
    3）fadeToggle() 切换元素的不透明度：
    1
    2
    3
    4
    $divMain =$("#divMain");
                $("#btnSubmit").click(function(){
                    $divMain.fadeToggle();
                });
  • 相关阅读:
    SytemC on CentOS 5.3 64bit
    Fast Poisson Disk Sampling
    Geometry Imager Viewport Filter
    Dinornis – Rendering your Model in Mudbox by RenderMan Directly !
    Models of biological pattern formation
    OrthoLab
    如何编译ATILA GPU Emulator
    感受谷歌地图
    树状列表完成
    获取地图标记点经纬度
  • 原文地址：https://www.cnblogs.com/imap/p/3374657.html
Copyright © 2011-2022 走看看