jQuery第三天

1. 事件模块

• 绑定事件
  • eventName(function(){})
  • on('eventName', function(){})
  • 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
  • hover(function(){}, function(){})
• 解绑事件
  • off('eventName')
• 事件委托
  • 理解: 将子元素的事件委托给父辈元素处理
    • 事件监听绑定在父元素上, 但事件发生在子元素上 *　事件会冒泡到父元素
    • 但最终调用的事件回调函数的是子元素: event.target
  • 好处
    • 新增的元素没有事件监听
    • 减少监听的数量(n==>1)
  • 编码
    • delegate(selector, 'eventName', function(event){}) // 回调函数中的this是子元素
    • undelegate('eventName')
• 事件坐标
  • event.offsetX: 原点是当前元素左上角
  • event.clientX: 原点是窗口左上角
  • event.pageX: 原点是页面左上角
• 事件相关
  • 停止事件冒泡: event.stopPropagation()
  • 阻止事件的默认行为: event.preventDefault()

• 动画效果

  • 在一定的时间内, 不断改变元素样式
  • slideDown()/slideUp()/slideToggle()
  • fadeOut()/fadeIn()/fadeToggle()
  • show()/hide()/toggle()
  • animate({结束时的样式}, time, fun)
  • stop()

• 插件机制

  • 扩展jQuery函数对象的方法 $.extend({ xxx: fuction () {} // this是$ }) $.xxx()
  • 扩展jQuery对象的方法 $.fn.extend({ xxx: function(){} // this是jQuery对象 }) $obj.xxx()

• jQuery文档的结构图