• jQuery-事件以及动画


    事件:

    1、//方法1

    $(window).load(function(){

    })

    window.onload=function(){

    }

    //方法2

    function one(){

          alert("one");

    }

    function two(){

          alert("two");

    }

    //这样的执行结果应该是two,因为onload事件只会保存对一个函数的引用

    window.onload = one;

    window.onload = two;

    修改为以下格式:

    window.onlaod=function(){

          one();

          two();

    }

    在jQuery中,还可以这样,jQuery的onlaod事件是可以执行多个函数的

    function one(){

          alert("one");

    }

    function two(){

          alert("two");

    }

    $(document).ready(function(){

          one();

    })

    $(document).ready(function(){

          two();

    })

    2、

    $(document).ready(function(){

          two();

    })

    可以简写成:

    $(function(){

    })

    $().ready(function(){

    })

    //$()的默认情况下就是document

    3、事件绑定:bind(事件类型 ,可选参数(作为event.data属性值传递给事件对象的额外数据对象,处理函数fn)

    bind()方法可以多次调用,this引用的是携带相应行为的DOM元素$(this)

    方法1:

    $(function(){

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

               if($(this).next().is(":visible")){

                     $(this).next().hide();

               }else{

                     $(this).next().show();

               }

          })

    })

    方法2:

    $(function(){

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

               $(this).next().show();

          }).bind("mouseout",function(){

               $(this).next().hide();

          })

    })

    方法3:

    $(function(){

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

               $(this).next().show();

          }).mouseout(function(){

               $(this).next().hide();

          })

    })

    4、jQuery有两个合成事件:hover()以及toggle()方法

    hover(enter,laeve)

    $(function(){

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

               $(this).next().show();

          }.function(){

               $(this).next().hide();

          })

    })

    5、toggle()方法

    方法1:

    $(function(){

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

               $(this).next().show();

          },function(){

               $(this).next().hide();

          })

    })

    方法2:

    //toggle()还有一个作用是切换元素的可见性,如果元素可见,切换后则为隐藏,隐藏切换后则是可见的

    $(function(){

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

               $(this).next().toggle();

          },function(){

               $(this).next().toggle();

          })

    })

    6、事件冒泡:

    停止事件冒泡:event.stopPropagation()

    阻止事件默认行为:event.preventDefault()

    如果想对事件对象停止冒泡以及默认行为,在可以事件处理函数中返回false:

    event.stopPropagation()改成  return false

    event.preventDefault() 改成 return false

    7、在jQuery中不支持事件捕获,如果需要事件捕获,使用原生的js代码

    8、event.type 事件类型

    event.target    获取触发事件的元素

    event.pageY以及event.pageX 是获取到光标相对于页面的y坐标以及x坐标,如果页面有滚动条还要加上滚动条的宽度以及高度

    event.which   是在鼠标事件中获取到鼠标的左右中键,分别返回1,2,3,

    9、移除事件:unbind(“click”)

    $(function(){

          $("#btn").bind("click",myFun1 = function(){

               $("#test").append("<p>wwwww</p>");

          }).bind("click",myFun2 = function(){

               $("#test").append("<p>wwwwssw</p>");

          }).bind("click",myFun3 = function(){

               $("#test").append("<p>wwwwqw</p>");

          })

    })

    //单独删除某一事件

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

          $("#btn").unbind("click",myFun2);

    })

    10、one()方法是对于只需要触发一次的,触发一次后就会解除绑定,也就是说只要在用户第一次点击的时候,处理函数才会生效

    11、trigger(”click”)   -----eg:用户在进入页面后就会触发click事件,不需要用户去主动点击

    $(“#btn”).trigger(“click”) 等价于$(“#btn”).click()

    另外还可以通过传递数据参数:

    $("#btn").bind("myClick",function(event,message1,message2){

          $("#test").append("<p>"+message1+message2+"</p>");

    });

    $("#btn").trigger("myClick",["我的自定义","事件"]);

    trigger()方法执行事件后会执行浏览器的默认事件,如果不想执行默认事件,需要使用以下方法:

    $("input").triggerHandler("focus")---取消聚焦事件

    12、还可以一次性为元素绑定多个事件

    $(function(){

          $("div").bind("mouseover mouseout",function(){

               $(this).toggleClass("over");

          })

    })

    13、为事件添加命名空间

    $(function(){

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

               $("body").append("<p>click</p>");

          });

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

               $("body").append("<p>click</p>");

          });

          $("div").bind("dbclick",function(){

               $("body").append("<p>click</p>");

          });

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

               $("div").unbind(".plugin");

               //会删除含有命名空间.plugin的事件,不会删除dbclick事件

          })

    })

    14、

    $(function(){

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

               $("body").append("<p>click</p>");

          });

          $("div").bind("click",function(){

               $("body").append("<p>click</p>");

          });

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

               $("div").trigger("click!");

               //点击button按钮只会触发click事件,click后面的感叹号是用来匹配所有不包含在命名空间的click方法

              //当将感叹号去了之后会触发两个click事件,包含在命名空间中的click事件

          })

    })

    jQuery中的动画:

    1、show()以及hide()方法

    相当于display = none /block/inline-block

    在两个方法中添加参数,slow,fast,normal,获取是一个数值

    2、fadeIn()以及fadeOut()方法:只改变元素的透明度

    3、slideUp()以及slideDown()方法:只改变元素的高宽,slideUp是由下到上缩短隐藏,slideDown是由上到下显示

    4、animate()方法:

    animation(params(样式属性),speed,callback)

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

          $(this).animate({left:"500px",height:"200px"},300);

    })

    5、停止元素的动画:stop([clearQuere],[gotoEnd]),两个参数都是一个布尔值

    6、判断元素是否处于动画状态:

    if(! $(element).is(":animated")){

    }

    7、延迟动画:delay(10000)

    8、toggle(speed,[callBack])

    slideToggle(speed,[easing],[callback])—通过高度变化切换匹配元素的可见性

    fadeTo(speed,opacity,[callBack])---将元素的不透明度以渐进方式调整到指定值

    fadeToggle(speed,[easing],[callBack])---通过透明度变化切换匹配元素的可见性

  • 相关阅读:
    回调函数仿360开机
    封装运动框架基本函数(多个属性包括透明度和zIndex)
    封装运动框架基本函数(单个属性)
    返回当前样式的函数
    MacOs High Sierra 升级失败解决办法
    Easy-RSA 3 Quickstart README
    Easily use UUIDs in Laravel
    OAuth2.0 原理流程及其单点登录和权限控制
    细说SSO单点登录
    单点登录
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5185607.html
Copyright © 2020-2023  润新知