1. 下载地址:
    http://file.job520.net/other/jquery/jquery-1.12.4.min.js

  2. 选择器:

    1. 基础选择器:
      1. 元素选择器:
        $('div')
      2. 类选择器:
        $('.class-name')
      3. ID选择器:
        $('#id-name')
      4. 多类型选择器:
        $('select-1,select-2...')
    2. 属性选择器:
      1. 包含:
        1. 模糊搜索:
          ele[name*=str]
        2. 开头:
          ele[name^=str]
        3. 结尾:
          ele[name$=str]
      2. 相等:
        ele[name=str]
      3. 不相等:
        ele[name!=str]
      4. 含有某个属性:
        ele[name]
      5. 不含有某个属性:
        ele:not([name])
    3. 层级选择器:
      1. 后代:
        1. 所有:
          $('ele1 ele2')
        2. 直接:
          $('ele1 > ele2')
      2. 兄弟:
        1. 所有:
          $('ele1 ~ ele2')
        2. 直接:
          $('ele1 + ele2')
    4. 表单选择器:
      1. 输入框:
        :input
      2. 文本框:
        :text
      3. 单选框:
        :radio
      4. 复选框:
        :checkbox
      5. 密码框:
        :password
      6. 文件:
        :file
      7. 提交按钮:
        :submit
      8. 重置:
        :reset
      9. 按钮:
        :button
      10. 状态:
        1. 选中:
          :checked
        2. 可用:
          :enabled
        3. 禁用:
          :disabled
        4. 聚焦:
          :focus
        5. 选中:
          :selected
        6. 正在播放动画:
          :animated
      11. 图片元素:
        :image
      12. 标题选择器:
        :header
    5. 过滤选择器:
      1. 基础过滤:
        1. 奇数:
          :odd
        2. 偶数:
          :even
        3. 开头:
          :first
        4. 结尾:
          :last
        5. 相等:
          :eq(n)
        6. 不相等:
          :not(n)
        7. 大于:
          :gt(n)
        8. 小于:
          :lt(n)
      2. 内容过滤:
        1. 包含文本:
          :contains(str)
        2. 包含元素:
          :has(ele)
        3. 空元素:
          :empty
        4. 非空元素:
          :parent
      3. 子元素过滤:
        1. 第一个子元素:
          :first-child
        2. 最后一个子元素:
          :last-child
        3. 唯一子元素:
          :only-child
        4. 第 n 个元素:
          :nth-child(n|odd|even|xn)
      4. 可见性过滤:
        1. 可见:
          :visible
        2. 不可见:
          :hidden
  3. 属性:

    1. 包含自定义属性:
      1. 设置:
        .attr(name,val)
      2. 获取:
        .attr(name)
      3. 移除:
        .removeAttr(name)
    2. 不包含自定义属性:
      1. 设置:
        .prop(name,val)
      2. 获取:
        .prop(name)
      3. 移除:
        .removeProp(name)
  4. 事件:

    1. 鼠标事件:
      1. 点击事件:
        .click(fn)
      2. 双击事件:
        .dblclick(fn)
      3. 鼠标按下:
        .mousedown(fn)
      4. 鼠标释放:
        .mouseup(fn)
      5. 鼠标移入:
        .mouseenter(fn)
      6. 鼠标移出:
        .mouseleave(fn)
      7. 鼠标移动:
        .mousemove(fn)
    2. 键盘事件:
      1. 按键按压:
        .keypress(fn)
      2. 按键按下:
        .keydown(fn)
      3. 按键弹起:
        .keyup(fn)
    3. 表单事件:
      1. 聚焦:
        .focus(fn)
      2. 失去焦点:
        .blur(fn)
      3. 内容改变:
        .change(fn)
      4. 文字选中:
        .select(fn)
      5. 表单提交:
        .submit(fn)
    4. 浏览器事件:
      1. 窗口改变:
        .resize(fn)
      2. 滚动条滚动:
        .scroll(fn)
      3. 错误事件:
        .error(fn)
    5. 文档事件:
      1. 加载:
        .load(fn)
      2. 卸载:
        .unload(fn)
    6. 绑定事件:
      1. 绑定:
        .bind(event,fn)
      2. 解除:
        .unbind(event)
      3. 触发:
        .trigger(event)
    7. 事件对象:
      1. 触发事件的元素:
        event.target
      2. 鼠标距左部的位置:
        event.pageX
      3. 鼠标距顶部的位置:
        event.pageY
      4. 鼠标/键盘按键码:
        event.which
      5. meta 键是否被按下:
        event.metaKey
      6. 阻止冒泡:
        event.stopPropagation()
      7. 阻止默认事件:
        event.preventDefault()
  5. 元素操作:

    1. 复制:
      .clone(bool)
    2. 插入:
      1. 包裹:
        1. 外层:
          .wrap(element)
        2. 内层:
          .wrapInner(element)
        3. 取消:
          .unwrap()
      2. 兄弟:
        1. 向前:
          .before(element)
        2. 向后:
          .after(element)
      3. 父子:
        1. 向前:
          .prepend(element)
        2. 向后:
          append(element)
        3. 插入 html:
          .html(str)
        4. 插入纯文本:
          .text(str)
    3. 替换:
      .replaceWith(element)
    4. 移除:
      .remove()
  6. AJAX:

    1. 原生:
      $.ajax({
       url : 'http://www.test.com',
       type : 'get | post',
       data : {},
       beforeSend : function(){
       },
       xhr: function () {
           var xhr = $.ajaxSettings.xhr();
           xhr.upload.onprogress = function (e) {
               var percentage = (100 * e.loaded / e.total) + '%';  // 上传百分比
               console.log(percentage);
           }
           return xhr;
       },
       success : function(){
       },
       error : function(){
       }
      });
    2. GET :
      $.get(url,function(data){
      });
    3. POST :
      $.post(url,obj,function(data){
      });
    4. 加载:
      .load(url)
  7. 样式:

    1. 设置样式:
      .css(name,value)
    2. 添加类:
      .addClass(name)
    3. 移除类:
      .removeClass(name)
    4. 判断类是否存在:
      .hasClass(name)
    5. 添加/移除类
      .toggleClass(name)
  8. 尺寸与偏移:

    1. 尺寸:
      1. 高度:
        1. 设置:
          .height(value)
        2. 获取外部高度:
          .innerHeight()
        3. 获取内部高度:
          .outerHeight()
      2. 宽度:
        1. 设置:
          .width(value)
        2. 获取外部宽度:
          .innerWidth()
        3. 获取内部宽度:
          .outerWidth()
    2. 偏移:
      1. 位移:
        1. 设置:
          .offset({
          left : num,
          top : num
          })
        2. 获取:
          .offset()
      2. 滚动条:
        1. 距左部:
          1. 设置:
            .scrollLeft(num)
          2. 获取:
            .scrollLeft()
        2. 距顶部:
          1. 设置:
            .scrollTop(num)
          2. 获取:
            .scrollTop()
  9. 动画:

    1. 原生:

      .animate(
       {
      
       },
       millisecond
      )
    2. 显示/隐藏:

      1. 显示:
        .show(millisecond)
      2. 隐藏:
        .hide(millisecond)
      3. 显示或隐藏:
        .toggle(millisecond)
    3. 淡入/谈出:

      1. 淡入:
        .fadeIn(millisecond)
      2. 淡出:
        .fadeOut(millisecond)
      3. 设置透明度:
        .fadeTo(millisecond,opacity)
      4. 淡入或淡出:
        .fadeToggle(millisecond)
    4. 滑下/滑上:

      1. 滑下:
        .slideDown(millisecond)
      2. 滑上:
        .slideUp(millisecond)
      3. 滑下或滑上:
        .slideToggle(millisecond)
    5. 停止:
      .stop()

  10. 数据操作:

    1. 设置:
      .data(name,value)
    2. 获取:
      .data(name)
    3. 移除:
      .removeData(name)
  11. 遍历:

    1. 过滤:
      1. 等于:
        .eq(element)
      2. 不等于:
        .not(element)
      3. 第一个:
        .first()
      4. 最后一个:
        .last()
      5. 包含:
        .has()
      6. 截取:
        .slice(start,end)
      7. 判断:
        .is(element)
    2. 遍历:
      1. 为每个元素执行一次事件:
        .each(function(){
        $(this)...
        })
      2. 返回每个元素中的数据:
        .map(function(){
        return $(this)...
        }).get();
      3. 父子:
        1. 父亲:
          1. 一层:
            .parent()
          2. 多层:
            .parents(element)
        2. 儿子:
          1. 一层:
            .children(element)
          2. 多层:
            .find(element)
      4. 兄弟:
        1. 向前:
          1. 一层:
            .prev()
          2. 多层:
            .prevAll(element)
        2. 向后:
          1. 一层:
            .next()
          2. 多层:
            .nextAll(element)
        3. 所有:
          .siblings(element)
  12. 索引:

    $("#parent a").click(function(){
    var _index = $("#parent a").index(this);
    });
  13. 工具:

    1. 数组操作:
      1. 过滤:
        $.grep(arr,function(val){
        });
      2. 对每个元素进行操作:
        $.map(arr,function(val){
        });
      3. 合并数组2到数组1:
        $.merge(arr1,arr2);
    2. 合并对象2到对象1:
      $.extend(obj1,obj2);
    3. 判断数据类型:
      1. 值是否在数组中:
        $.inArray(val,arr);
      2. 是否是数组:
        $.isArray(arr);
      3. 是否是函数:
        $.isFunction(fn);
      4. 是否是数字:
        $.isNumeric(num);
    4. 获取数据类型:
      $.type(obj)
    5. AJAX 相关:
      1. 构造查询参数:
        $.param(obj);
      2. 序列化:
        .serializeArray();
文档更新时间: 2020-10-23 09:26   作者:lee