search

Liudongge / JavaScript_Notes

learn and work by JS
0 stars 0 forks source link

jQuery中的事件和动画 #2

Open Liudongge opened 7 years ago

Liudongge commented 7 years ago

jQuery中的事件

  1. 加载DOM $(document).ready(function(){}) 简化为$(function(){}) 或者 $().ready(function(){}) 可多次调用，区别于window.onload()的一次调用。

  2. 事件绑定 bind(type, [, data], fn); 简化为.click(), .mouseover(), .mouseout()等

  3. 合成事件 hover(enter, leave)和toggle(fn1, fn2, ...fn). hover控制鼠标滑过事件，toggle模拟鼠标连续点击事件，另外也可切换元素的可见状态。

  4. 事件冒泡 DOM多个层次有绑定事件，触发时事件按照DOM层次结构向上至顶端。 为事件添加参数event，之后调用event.stopPropagation()方法停止冒泡事件，调用event.preventDefault()方法来阻止元素的默认行为。 可以使用return false来简写上面两个方法。

  5. 事件对象的属性 event.type()获取事件类型，event.target()获取触发事件的元素，event.pageX()和event.pageY()获取光标相对于页面的x,y坐标，event.which()获取鼠标按键或者键盘按键。其余略

  6. 移除事件 unbind([type], [ , data]) 第一个参数是事件类型，第二个参数是要移除的函数，若无参，则移除所有。 另外，对于只触发一次，使用后立即解除的事件，使用one()方法。使用方式同bind()一致。

  7. 模拟操作 trigger()

  8. 其他用法 绑定多个事件类型 添加事件命名空间，便于管理 相同事件名称，不同命名空间执行方法

Liudongge commented 7 years ago

JQuery中的动画 所有动画方法都可传参数slow,normal,fase 分别代表600,400,200 时间单位毫秒。 也可以直接传数字如1000 代表1s。

  1. show()和hide() hide()改变高度，宽度，不透明度，直至属性为0。

  2. fadeIn()和fadeOut() 只改变透明度，淡入淡出效果。

  3. slideUp()和slideDown() 只改变高度，slideDown()由上至下延伸显示，slideUp()由下至上缩短隐藏。

Liudongge commented 7 years ago

自定义动画animate() animate(params, speed, callback) params: 一个包含样式属性和值的映射，如{property1:"value1", property2:"value2", ...} speed: 速度参数，可选 callback: 在动画完成时执行的函数，可选

  1. 累加累减动画：+=value或-=value
  2. 多重动画：同时执行（params），顺序执行（链式）
  3. 综合动画：多种组合
  4. 回调函数：callback

停止动画 stop([clearQueue][, gotoEnd]) 参数均为可选的Boolean型 clearQueue判断是否清空未执行完的动画队列 gotoEnd代表是否直接将正在执行的动画跳转到末状态 无参时，直接停止当前动画，若有后续动画，开始后续。

判断元素是否处于动画状态 if(!$(element).is(":animated")) { // 判断元素是否处于动画状态 // 如果当前无动画，则添加新动画 }

Liudongge commented 7 years ago

其他动画方法

  1. toggle(speed, [callback])　替代show()和hide()
  2. slideToggle(speed, [callback]) 替代slideUp()和slideDown()
  3. fadeTo(speed, opacity, [callback]) 替代fadeIn()和fadeOut()