《锋利的jQuery》学习笔记二

第4章 jQuery中的事件和动画

• $(window).load(function(){})
  等价于JS中的
  window.onload = function(){}

• bind('click',function(){})绑定事件

• unbind()解除所有绑定事件

• one()绑定后，触发一次会立即解绑

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

• mouseout与mouseleave的区别：
  mouseout，如果一个元素内部有子元素，移到子元素上也会触发
  mouseleave，离开这个元素所覆盖的区域触发

• 停止事件冒泡，event.stopPropagation()

• 阻止默认行为，event.preventDefault()

• 同时阻止事件冒泡和默认行为，return false

事件对象的属性

• event.type()，获取事件类型
• event.target()，获取触发事件的元素
• event.pageX/Y()，获取光标相对于页面的x坐标和y坐标
• event.which()，获取鼠标按键 1 = 左键，2 =中键 ， 3 = 右键
• event.metaKey()，获取按键
• event.originaEvent()指向原始的事件对象

模拟操作

• trigger(type, [,data])模拟触发事件
• triggerHandler()，类似trigger，只触发绑定事件，不执行浏览器默认操作

其他用法

1. 绑定多个事件类型

bind("mouseover mouseout ")

2. 添加事件命名空间，便于管理

如bind("click.plugin")，bind("mouseover.plugin")，删除事件的时候可以unbind(".plugin")

3. 相同事件名称，不同命名空间执行方法

如同一个元素绑定click与click.plugin事件，如果点击该元素，两个事件都会触发，trigger("click!")，只会触发click，！的作用是匹配所有不包含再命名空间中的click方法

jQuery中的动画

• hide()，将元素隐藏，相当于将display样式改为none.

• show()，将元素显示将display样式设置为之前的样式
  show与hide中可以添加时间参数，slow-600ms，normal-400ms，fast-200ms，还可以直接写数字，默认单位毫秒

• fadeIn()，只改变透明度的隐藏

• fadeOut()，只改变透明度的显示

• slideUp()，只改变高度的隐藏

• slideDown()，只改变高度的显示

自定义动画方法animate()

• 累加、累减
  {left: "+=500px"}

• css()方法不会加入动画队列，需要放到回调函数中

• stop([clearQueue], [gotoEnd])方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态，两个参数都是Boolean值

• 判断是否处于动画状态
  is(':animated')

• 延迟动画
  delay(1000)