jQuery第四章-充满魅力的事件与动画

  • 一、jQuery中的事件
  1. a)         window.load与$(function(){ // do something})的区别,前者一个页面存在多个,只能执行最后一个,后者全部执行;前者在所有元素加载完成后执行(包括图片),后者在DOM模型建立后执行;
  2. b)         事件绑定:bind(type,[,data],fn)第一个参数是事件类型,包括blur,focus,load,resize,
  3. scroll,unload,click,dblckick,mouseover,mousemove,mouseout,mouseup,mousedown
    ,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等;第二个是可选参数,传递给事件的其他参数;第三个用来绑定事件参数;该方法可以简写,即常见的$(“selector”).click/hover/mouseover/…
  4. c)         合成事件:hover(enter,leave),当鼠标指上去的时候,会触发第一个函数,当鼠标移除的时候,会触发第二个函数;toggle(“fn1,fn2,fnN…”),用于模拟鼠标连续单击事件,第一次点击,触发第一个函数,第二次点击触发第二个函数..
  5. d)         事件冒泡:加入对p标签绑定了单击事件,又对他外围的DIV绑定了单击事件,这样在单击P标签的时候,会将两个事件都触发。这里包括以下知识点:事件对象:在函数中增加一个参数event比如$(“#demo”).click(function(event){})。停止冒泡可以使用event.stopPropagation();获取对象的属性,可以用event.type()方法,
  6. event.preventDefault()阻止默认行为,event.target()获取到触发事件元素的属性,event.PageX,event.PageY获取到光标相对于页面的x位置和y位置。event.which()从单击事件中获取到左中右键
  7. e)         移除事件:unbind([type](,data))第一个参数是事件类型,不设置则移除所有事件,第二个参数是要移除的函数。one(type,[data],fn);
  8. f)          模拟操作:trigger(type[,data]),页面载入后,模拟type设定的操作,同时也可以触发自定义的事件,data可以传递参数过去,通常用来区别是认为操作还是模拟操作;

 

  • 二、jQuery中的动画
  1. a)         show()和hide()方法:两函数作用相反,效果同CSS种display:none或者其他的,可用参数slow,fast,normal,获取数值表示毫秒;
  2. b)         fadeIn()和fadeOut()方法。通过控制不透明度,逐渐消失或者逐渐出现,参数同上;
  3. c)         slideUp()和slideDown()方法。通过控制高度,逐渐伸开或者逐渐收缩,参数同上;
  4. d)         animate():自定义动画的方法,animate(params,speed,callback)。第一个参数设定动画效果,可以是一个样式或者属性,第二个设置动画速度,第三个设置动画结束后的调用的函数。
  5. e)         动画的停止:stop(clearQueue,gotoEnd)方法,两参数均为boolean型,第一个参数设置是否清空未完成的动画列队,第二个参数设置是否跳到最后的画面。
  6. f)          判断元素是否处于动画状态:$(“#demo”).is(:animated);
  7. g)         其他动画方法:toggle(speed,callback),slideToggle(speed,callback),
  8. fadeTo(speed,callback)
原文链接:,转发请注明来源!

发表评论

  • 2 Responses to “jQuery第四章-充满魅力的事件与动画”