JQuery

Jquery基础

1. 概念
2. 快速入门
3. Jquery对象和JS对象区别于转换
4. 选择器
5. DOM操作

Jquery高级

1. 动画
2. 遍历
3. 事件绑定
4. 案例
5. 插件

Jquery基础

1. 概念

   • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
     jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
   • JavaScript框架：本质上就是一些js文件，封装了js的原生代码

2. 快速入门

   1. 下载Jquery
      • 版本说明
      • 目前Jquery有三个大版本：
        • 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
          功能不再新增。因此一般项目来说，使用1.x版本就可以了，
          最终版本：1.12.4 (2016年5月20日)
        • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
          功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
          最终版本：2.2.4 (2016年5月20日)
        • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
          一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
          目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
      • jquery-xxx.min.js 与 jquery-xxx.js的区别
        1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释
        2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进，体积小，程序加载更快。
   2. 导入Jquery的js文件
   3. 使用
      • var div1 = $("#div1"); id选择器 #id

3. Jquery对象和JS对象区别与转换

   1. jquery在操作时，更加方便
   2. jquery对象和js对象方法是不通用的
   3. jq与js的转换
      • js ——> jq 转换方式： $(js对象)
      • jq ——> js 转换方式：jq对象[索引] 或者jq对象.get(索引)

4. 选择器：筛选具有相似特征的元素（html标签）

   1. 基本语法学习
      1. 事件绑定
      2. 入口函数：js中的函数 window.onload = function() {}
         • js实现：window.onload = function() {}
         • jq实现：$(function() {});
         • 上述两种写法的区别：
           • window.onload 只能定义一次。若定义多次，则后面的覆盖前面的。
           • $(function() {}); 可以定义多次，按定义的顺序依次执行。
      3. 样式控制
   2. 分类
      1. 基本选择器
         1. 标签选择器（元素选择器）
            • 语法： $(“html标签名”) 获得所有匹配标签名称的元素
         2. id选择器
            • 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
         3. 类选择器
            • 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
         4. 并集选择器：
            • 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
      2. 层级选择器
         1. 后代选择器
            • 语法： $(“A B”) 选择A元素内部的所有B元素(包括B元素的子选择器)
         2. 子选择器
            • 语法： $(“A > B”) 选择A元素内部的所有子元素B（不包括B的子选择器）
      3. 属性选择器
         1. 属性名称选择器
            • 语法： $(“A[属性名]”) 包含指定属性的选择器
         2. 属性选择器
            • 语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
            • 语法： $(“A[属性名!=‘值’]”) 匹配所有不含有指定的属性，或者属性不等于特定值的元素。或者使用 [attr]:not([attr=value])
            • 语法： $(“A[属性名^=‘值’]”) 匹配给定的属性是以某些值开始的元素
            • 语法： $("A[属性名$=‘值’]") 匹配给定的属性是以某些值结尾的元素
            • 语法： $(“A[属性名*=‘值’]”) 匹配给定的属性是以包含某些值的元素
         3. 复合属性选择器
            • 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
      4. 过滤选择器
         1. 首元素选择器
            • 语法： :first 获得选择的元素中的第一个元素
         2. 尾元素选择器
            • 语法： :last 获得选择的元素中的最后一个元素
         3. 非元素选择器
            • 语法： :not(selector) 不包括指定内容的元素
         4. 偶数选择器
            • 语法： :even 偶数，从 0 开始计数
         5. 奇数选择器
            • 语法： :odd 奇数，从 0 开始计数
         6. 等于索引选择器
            • 语法： :eq(index) 指定索引元素
         7. 大于索引选择器
            • 语法： :gt(index) 大于指定索引元素
         8. 小于索引选择器
            • 语法： :lt(index) 小于指定索引元素
         9. 标题选择器
            • 语法： :header 获得标题（h1~h6）元素，固定写法
      5. 表单过滤选择器
         1. 可用元素选择器
            • 语法： :enabled 获得可用元素
         2. 不可用元素选择器
            • 语法： :disabled 获得不可用元素
         3. 选中选择器
            • 语法： : 获得单选/复选框选中的元素checked
         4. 选中选择器
            • 语法： :selected 获得下拉框选中的元素

5. DOM操作

   1. 内容操作
      1. html()：获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
      2. text()：获取/设置元素的标签提纯文本内容
      3. val()
   2. 属性操作

      1. 通用属性操作

         1. attr(); 设置或设置被选元素的属性值。
         2. removeAttr(); 删除属性
         3. prop(); 设置或设置被选元素的属性值。
         4. removeProp(); 删除属性
         • attr与prop区别
           • 如果操作的是元素的固有属性(查看HTML标签手册，)，则建议使用prop
             • 比如:
             • 北京
             • ，参考手册中规定了li固有属性只有两个type和value，所以name不是固有属性，属于自定义属性。
         • 如果操作的是元素自定义的属性，则建议使用attr

   3. 对class类属性的操作

      1. addClass(); 为每个匹配的元素添加指定的类名。
      2. removeClass() 从所有匹配的元素中删除全部或者指定的类。
      3. toggleClass(); 如果存在（不存在）就删除（添加）一个类。
      4. css();
6. CRUD操作
   1. append();
      • $(A).append(B); 将对象B添加到对象A元素内部，并且在末尾
   2. prepend();
      • $(A).prepend(B); 将对象B添加到对象A元素内部，并且在开头
   3. appendTo();
      • $(A).appendTo(B); 将对象A添加到对象B元素内部，并且在末尾
   4. prependTo();
      • $(A).prepend(B); 将对象A添加到对象B元素内部，并且在开头
   5. after(); 在每个匹配的元素之后插入内容。
      • HTML代码：

        I would like to say:

      • jquery代码：$(“p”).after(“Hello”)
      • 结果：

        I would like to say:

        Hello p标签和b标签是同级。
   6. before(); 在每个匹配的元素之前插入内容。
      • HTML代码：

        I would like to say:

      • jquery代码：$(“p”).before(“Hello”);
      • 结果：Hello

        I would like to say:

        p标签和b标签是同级。
   7. insertAfter();把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
      • HTML代码：

        I would like to say:

        Hello
      • jquery代码：$(“p”).insertAfter("#foo");
      • 结果：
        Hello

        I would like to say:

   8. insertBefore(); 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
      • HTML代码：
        Hello

        I would like to say:

      • jquery代码：$(“p”).insertBefore("#foo");
      • 结果：

        I would like to say:

        Hello
   9. remove(); 从DOM中删除所有匹配的元素。
      • HTML代码：

        Hello

        how are

        you?

      • jquery代码：$(“p”).remove();
      • 结果：how are
   10. empty(); 删除匹配的元素集合中所有的子节点。但是保留当前对象和属性节点。
       • HTML代码：

         Hello, Person and person

       • jquery代码：$(“p”).empty();
       • 结果：

---

Jquery高级

1. 动画
   1. 三种方式显示和隐藏元素

      1. 默认显示和隐藏方式

         1. show([speed,[easing],[fn]])

            1. 参数：
               1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
               2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
                  • swing：动画执行时效果是 先慢，中间快，最后又慢
                  • linear：动画执行时速度是匀速的
               3. fn：在动画完成时执行的函数，每个元素执行一次。

         2. hide([speed,[easing],[fn]])

         3. toggle([speed],[easing],[fn])

      2. 滑动显示和隐藏方式

         1. slideDown([speed],[easing],[fn])
         2. slideUp([speed,[easing],[fn]])
         3. slideToggle([speed],[easing],[fn])

      3. 淡入淡出显示和隐藏方式

         1. fadeIn([speed],[easing],[fn])
         2. fadeOut([speed],[easing],[fn])
         3. fadeToggle([speed,[easing],[fn]])
2. 遍历
   1. js遍历方式
      • for(初始化值; 循环条件; 步长)
   2. jquery遍历方式
      1. jquery对象.each(callback)
      2. $.each(object, [callback])
      3. for…of
3. 事件绑定

   1. jquery 标准的绑定方式

      • jq对象.事件方法(回调函数);

   2. on绑定事件、off解除事件绑定

      • jq对象.on(“事件名称”,回调函数);
      • jq对象.off(“事件名称”,回调函数);

   3. 事件切换

      • jq对象.toggle(fn1, fn2…);

      注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

4. 案例
5. 插件机制：增强JQuery功能
   1. 实现方式
      1. $.fn.extend(object)
         • 增强通过jquery获取对象的功能 $("#id")
      2. $.extend(object)
         • 增强jquery自身的功能 $/jQuery