好久不用 jQuery， 来复习一下

1.1 简介

1.1.1 概述

  jQuery 是一个优秀的 JavaScript 库，是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包括核心库、UI 和插件等开发人员以及推广和网站设计维护人员。团队中有 3 个核心人物：John Resig、Brandon Aaron 和 Jorn Zaefferer。   jQuery 凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。

在这里插入图片描述

1.1.2 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 的 js 文件  ☞ jquery-xxx.js 与 jquery-xxx.min.js区别：    ♞ jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些    ♞ jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

1.1.3 jQuery 的对象

  DOM(Document Object Model，文档对象模型)，每一个 DOM 都可以表示成一棵树。jQuery 对象就是经过 jQuery 包装之后的 DOM 对象。jQuery 对象不能使用 DOM 对象的任何方法，同理 DOM 对象也不能使用 jQuery 对象的任何任何方法。

DOM 对象与 jQuery 对象互转

☞ jQuery 对象转 DOM 对象

// jq对象[索引] 或者 jq对象.get(索引)
var $jquery = $("#name");	// jQuery 对象
var dom = $jquery.get(0);	// DOM 对象

☞ DOM 对象转 jQuery 对象

// $(js对象)
var dom = document.getElementById("name");	// DOM 对象
var $jquery = $(dom);	// jQuery 对象

1.2 jQuery 选择器

  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。

1.2.1 基本选择器

  基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class 和标签名等来查找 DOM 元素。在网页中，每个 id 名称只能使用一次，class 允许重复使用。

在这里插入图片描述

1.2.2 层级选择器

  可以用 next() 方法来代替 (“prev + next”) 选择器，可以使用 nextAll() 方法来代替 (“prev ~ siblings”) 选择器。

1.2.3 过滤选择器

  过滤选择器主要是通过特定的规则筛选出 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个 : 开头。按照不同的过滤规则，过滤选择器分为：基本过滤选择器，内容过滤选择器，可见性过滤选择器，子元素过滤选择器和表单对象属性过滤选择器

☞ 基本过滤选择器

在这里插入图片描述

☞ 内容过滤选择器

在这里插入图片描述

☞ 可见性过滤选择器

在这里插入图片描述

☞ 属性过滤选择器

在这里插入图片描述

☞ 子元素过滤选择器

在这里插入图片描述

☞ 表单对象属性过滤选择器

在这里插入图片描述

1.2.4 表单选择器

  为了更加灵活地操作表单，jQuery 中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。

在这里插入图片描述

1.3 DOM 操作

1.3.1 内容操作

1.3.2 属性操作

☞ 通用属性操作

attr 和 prop 的区别  ① 如果操作的是元素的固有属性，则建议使用prop  ② 如果操作的是元素自定义的属性，则建议使用attr

☞ 对 class 属性操作

1.3.3 CRUD

1.4 jQuery 动画

1.4.1 show() 方法和 hide() 方法

  show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。在 HTML 文档里，为一个元素调用 hide() 方法，会将该元素的 display 样式改为 “none”。当把元素隐藏后，可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。

☞ 参数

show([speed，[easing]，[fn]]) hide([speed，[easing]，[fn]]) toggle([speed]，[easing]，[fn])

☞ 参数解释

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

1.4.2 fadeln() 方法和 fadeOut() 方法

  与 show() 方法不相同的是，fadeln() 方法和 fadeOut() 方法只改变元素的不透明度。fadeOut() 方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(display：none)。fadeln() 方法则相反。

☞ 参数

slideDown([speed]，[easing]，[fn]) slideUp([speed，[easing]，[fn]]) slideToggle([speed]，[easing]，[fn])

1.4.3 slideUp() 方法和 slideDown() 方法

  slideUp() 方法和 slideDown() 方法会改变元素的高度。如果一个元素的 display 属性值为"none"，当调用 slideDown() 方法时，这个元素将由上至下延伸显示。slideUp() 方法正好相反，元素将由下到上缩短隐藏。

☞ 参数

fadeIn([speed]，[easing]，[fn]) fadeOut([speed]，[easing]，[fn]) fadeToggle([speed]，[easing]，[fn]])

1.5 遍历

1.5.1 JS 遍历方式

for(初始化值;循环结束条件;步长)

1.5.2 jQuery 遍历方式

/*
* index：就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* this：集合中的每一个元素对象

* 如果当前 function 返回为 false，则结束循环(break)。
* 如果当前 function 返回为 true，则结束本次循环，继续下次循环(continue)
*/
jquery对象.each(function(index,element){});

$.each(object, [callback]);

// jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象){}	

1.6 事件

1.6.1 DOM 加载

(document).ready() 方法和 window.onload 方法有相似的功能，但是在执行时机方面是有区别的。window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行，即 JavaScript 此时才可以访问网页中的任何元素。而通过 jQuery 中的 (document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，网页的所有元素对 jQuery 而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。   另外，需要注意一点，由于在 (document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 HTML 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。示例：(windows).load(function() {})

1.6.2 标准事件绑定

☞ 语法

// 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
jq对象.事件方法(回调函数)；

☞ 示例

// 提交表单
form.submit();

1.6.3 其他事件绑定

// 绑定事件
jq对象.on("事件名称",回调函数)

// 解除绑定，如果off方法不传递任何参数，则将组件上的所有事件全部解绑
jq对象.off("事件名称")