Study JQuery《4、事件和动画》

最新推荐文章于 2022-06-01 12:49:17 发布

原创最新推荐文章于 2022-06-01 12:49:17 发布 · 499 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JQuery/JS

本文介绍了JQuery中处理事件的基本方法，包括事件绑定、事件冒泡、事件移除及模拟事件等，并详细讲解了JQuery提供的动画效果，如显示隐藏、淡入淡出、滑动、自定义动画及动画队列控制。

一、基本概念
事件：JavaScript与HTML之间的交互及文档中的元素发生变化时生成一个事件。
二、JQuery中的事件
1、加载DOM
  window.onload()：在JavaScript中，网页中所有元素完全加载完成后执行。
  $(document).ready()：在JQuery中用，在DOM结构加载完成时执行。
  $(function(){})；是$(document).ready()的简写。
  $().ready(function(){})：与$(document).ready()相同。$()为$(document)的简写。
2、事件绑定
  bind(type,[data],fn)：对匹配元素进行特定事件的绑定，可执行多次。
   第一个参数为事件类型。
   第二个参数为可选参数，作为event.data属性传递额外数据。
   第三个参数为绑定的处理函数。
  //$("#test1").bind("click",function(){})
  one()：与bind相似，但只可执行一次。
  //$("#test2").one("click",function(){})
  toggle(fn1,fn2,...fnN)：单击事件时轮番调用内部函数。
  //$("#test2").toggle(function(){},function(){})
3、事件冒泡
  event.stopPropagation()：停止事件冒泡。
  event.preventDefault()：阻止默认行为，表单提交。
  event.type()：获取事件类型。
  event.target()：获取触发事件的元素。
4、事件移除
  unbind()：移除指定的事件或者所有事件。
5、模拟事件
  trigger()：触发指定的事件。
三、JQuery中的动画
1、show与hide：元素显示与隐藏，高度、宽度、不透明度同时改变。
//$("element").show(600);
//$("element").hide("slow");
(normal:400毫秒,slow:600毫秒,fast:200毫秒)
2、fadeIn与fadeOut：只增加与降低不透明度。
//$("element").fadeOut(600);
//$("element").fadeIn(300);
3、slideUp与slideDown：只向上与向下改变高度。
//$("element").slideUp(600);
//$("element").slideDown(300);
4、自定义动画
  animate(params,speed,callback);
  参数params：包含样式属性及值的映射，{property1:"val",property2:"val"}
  参数speed：速度参数，可选。
  参数callback：在动画完成时执行的函数，可选。
  /*
  $("#test3").bind("click",function(){
   $("#panel").animate({left:"500px"},3000);
  });
  */
5、综合动画，如：
  $("#test4").bind("click",function(){
   $("#panel").css({"opacity":"0.5","left":"0px"});
   $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
    .animate({top:"200px",width:"200px"},3000)
    .fadeOut("slow");
  });
6、停止元素的动画
  stop([clearQueue],[gotoEnd])
  参数clearQueue：是否要清空未执行完的动画队列，Boolean值。
  参数gotoEnd：是否直接将正在执行的动画跳忖到末状态，Boolean值。
  //$("#panel").stop(true,true)
7、判断动画状态，如下
  $("element").is(":animated")
8、其他动画方法
  toggle(speed,[callback])：以speed速度自动切换元素可见状态。
  slideToggle(speed,[callback])：以speed速度自动切换元素可见性，通过高度。
  fadeTo(speed,opacity,[callback])：以speed速度改变透明度到指定的值。
  //$("element").toggle(600)
  //$("element").slideToggle(600)
  //$("element").fadeTo(600,0.2)
9、动画执行队列
  注意非动画方法的插队。