jQuery复习（CSS模块/筛选模块/文档处理(CUD)模块/事件模块）

视频

1. CSS模块

• style样式
  • css(styleName): 根据样式名得到对应的值
  • css(styleName, value): 设置一个样式
  • css({多个样式对}): 设置多个样式
• 位置坐标
  • offset(): 读/写当前元素坐标(原点是页面左上角)
  • position(): 读当前元素坐标(原点是父元素左上角)
  • scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
• 尺寸
  • width()/height(): width/height
  • innerWidth()/innerHeight(): width + padding
  • outerWidth()/outerHeight(): width + padding + border

2. 筛选模块

• 过滤
  • 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
  • first()
  • last()
  • eq(index)
  • filter(selector): 对当前元素提要求
  • not(selector): 对当前元素提要求, 并取反
  • has(selector): 对子孙元素提要求
• 查找
  • 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
  • children(selector): 子元素
  • find(selector): 后代元素
  • preAll(selector): 前的所有兄弟
  • siblings(selector): 所有兄弟
  • parent(): 父元素

3. 文档处理(CUD)模块

• 增加
  • append() / appendTo(): 插入后部
  • prepend() / prependTo(): 插入前部
  • before(): 插到前面
  • after(): 插到后面
• 删除
  • remove(): 将自己及内部的孩子都删除
  • empty(): 掏空(自己还在)
• 更新
  • replaceWith()

4. 事件模块

• 绑定事件
  • 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()