Study JQuery《4、事件和动画》

一、基本概念
 事件：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、动画执行队列
  注意非动画方法的插队。

------------------------------------------------------------------------------------------------------------