jQuery02(学习笔记)

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(): 插入后部
    • preppend() / preppendTo(): 插入前部
    • 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()

5. 区别:window.onload 与 $(document).ready()

  • window.onload
    • 包括页面的图片加载完才会回调(晚)
    • 只能有一个监听回调
  • $(document).ready()
    • 等同于:$(function(){})
    • 页面加载完就回调(早)
    • 可以有多个监听回调

6. 动画效果

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

7. 插件机制(自定义插件)

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

8. jQuery插件

  • 声明式验证(jquery.validete插件)
    程序员只需要声明各种验证规则,可以自定义验证错误信息
    //对表单开户验证
    • 加入jquery.validete.js插件
$('#myForm').validate({
     message: {
            username: {}, //name属性值
            pwd1: {} //name属性值
     }
})
  • jQueryUI插件
    1. 手风琴效果.accordion()
    2. 自动搜索匹配.autocomplete()
    3. 选项卡tabs()
$('#autocomplete').autocomplete({ //input的id
   source: datasource //数据源
});

你可能感兴趣的:(jQuery02(学习笔记))