锋利的jQuery总结（三）

第四章，jQuery中的事件和动画

24.  $(document).ready(function(){})   简写   $(function(){})

 

25. 事件绑定

bind( type [ ,data],fn);

第一个参数为事件类型，e.g. blurfocus click load……

第二个参数为可选参数，作为event.data属性值传递给事件对象的额外参数

第三个参数为绑定的处理函数

简写绑定函数：$.bind(“click”,function(){})   -----  $.click(function(){})

 

26. 合成事件

    i   hover()   hover(enter,leave); 模拟光标悬停事件

       $.hover(function(){ } , function(){ })

    ii  toggle()  toggle(fn1,fn2,…fnN);  模拟鼠标连续单击事件

        toggle()在jQuery中还有另外一个作用：切换元素可见状态   $.toggle();

 

27. 事件冒泡

   i 事件对象（防止事件冒泡到上一级）

     $(“element”).bind(“click”,function(event){   });

   ii 停止事件冒泡 stopPropagation()

   iii 阻止默认行为  preventDefault()

      如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false

       Returnfalse;

 

28. 事件对象的属性

   event.type  事件类型

   event.preventDefault();    event.stopPropagation()

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

   event.pageX  event.pageY 获取光标相对于页面的x坐标和y坐标

   event.which 在鼠标点击事件中获取鼠标左（1），中（2），右键（3）

  event.metaKey  在键盘事件中获取ctrl键

 

29. 移除事件 unbind([type],[data]);

     第一个参数为事件类型，第二个参数为将要移除的函数

    i  如果没有参数，则删除所有绑定事件

    ii  如果提供了事件类型作为参数，则只删除该类型的绑定事件

    iii  两个参数都有时，只有这个特定的事件处理函数会被删除

 

30. 只需要触发一次的事件   one( type,[data],fn);

 

31. 模拟操作

  i  常用模拟 $.trigger(“click”)

  ii  触发自定义事件 $.trigger(“myClick”)

iii 传递数据   $.tigger(“myClick”,[“自定义”，“事件”])；

iv 如果只想触发绑定的focus事件，而不想执行浏览器默认操作，triggerHandler()

 

32. 其他方法

 i 为元素一次性绑定多个事件，

   $(“div”).bind(“mouseovermouseout”,function(){ $(this).toggleClass(“over”)});

 ii 添加事件命名空间

   $(“div”).bind(“mouseover.plugin”,function(){$(this).toggleClass(“over”)});  【Page.119】

 

33.  show() show(“slow / normal/fast”)  show(“1000”)

   hide()   hide(“slow / normal/fast”)   hide(“1000”)

 

34.  fadeIn() 升高不透明度,  fadeOut()降低不透明度

 

35.  slideUp()元素由下到上缩短隐藏，  slideDown()元素由上至下延伸显示

 

36. 自定义动画方法animate()

   animate(params,  speed,  callback)

    i params 一个包含样式属性及值的映射

    ii speed 速度参数，可选

    iiicallback  在动画完成时执行的函数，可选

   e.g. $(this).animate({left:”50px”},300);

   累加动画：$(this).animate({left:”+=50px”},300);

   多重动画：$(this).animate({left:”+=50px”，height:”200px”},300); (同时发生的)

              $(this).animate({left:”50px”},300)；

              $(this).animate({height: ”200px”},300);（按顺序进行，先向左，后放高）

 

37. 综合动画，通过联是方式对这些效果进行排队

 

38. 动画回调函数, 实现动画的排队，将动画写在animate() 中的callback()函数中即可

 

39. 停止元素的动画   stop([clearQueue],[gotoEnd]), 参数可取值为true/false

 ClearQueue 是否清空未执行完的动画队列，gotoEnd 是否将正在执行的动画跳转到末状态

  如果直接$element.stop()，立即停止正在执行的动画，以当前状态执行接下来的动画

 Stop(false,true),可以让动画直接到最终状态（正在执行的）

 

40. 判断元素是否处于动画状态  $element.is(“:animated”)

 

41. 延迟动画　delay(ms)

 

42. 其他动画，slideToggle() 通过高度变化切换匹配元素的可见性，

             fadeTo() 把元素的不同明度以渐进方式调整到指定的值 fadeTo(ms  ocpacity)

            fadeToggle() 通过不透明度变化来切换匹配元素的可见性