jquery 用法

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

选择器：

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

属性：

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

事件：

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()

元素操作：

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()

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)

样式：

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

尺寸与偏移：

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()

动画：

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()

数据操作：

1. 设置：
   .data(name,value)
2. 获取：
   .data(name)
3. 移除：
   .removeData(name)

遍历：

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)

索引：

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

工具：

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();