一、简介

目前最流行的JavaScript函数库之一，对JavaScript进行了封装。
并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。
扩展: 目前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使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。作用1：$(function(){})
- 相当于 window.onload=function(){}，功能比window.onload更强大
- window.onload一个页面只能写一个，但是可以写多个$() 而不冲突
- window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
- 完整形式是$(document).ready(…….);
  
  jQuery(document).ready(…….);
作用2： $(selector)
- 选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍
jQuery的基本语法：$(selector).action

获取页面内容:$(selector)

操作页面的内容：action
- 控制页面样式
- 访问和操作DOM元素
- 事件处理功能
- 动画功能
- Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

三、JQuery对象和DOM对象

DOM对象和jQuery对象分别拥有一套独立的属性和函数：

DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value
jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()

互相转换：

DOM对象转换成jQuery对象 $(DOM对象)
jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

四、JQuery选择器

回顾JavaScript获取元素节点

getElementById( ) ：返回一个元素节点对象
getElementsByName( )：返回多个元素节点（节点数组）
getElementsByClassName( ) ：返回多个元素节点对象（节点数组）
getElementsByTagName( ) ：返回多个元素节点对象（节点数组）

1. 基础选择器

标签选择器 $("a")
ID选择器 $("#id") $("p#id")
类选择器 $(".class") $("h2.class")
通配选择器 $("*")
并集选择器$("elem1， elem2， elem3")
后代选择器$(ul li)
父子选择器 $(ul > li)
后面第一个兄弟元素节点 prev + next
后面所有的兄弟元素节点 prev ~ next

2. 属性选择器

[attribute] 匹配包含给定属性的元素
[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素

3. 位置选择器

针对整个页面而言的位置选择器

:first 获取第一个元素
:last 获取最后一个元素
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:even匹配所有索引值为偶数的元素，从 0 开始计数
:eq(n) 匹配一个给定索引值的元素，从0开始计数
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:nth-child(n) 匹配其父元素下的第N个子元素
:nth-child(odd|even) 匹配其父元素下的奇偶元素

4. 表单选择器

关于表单项的选择器

:text :password :radio :checkbox :hidden :file :submit
:input 匹配所有 input， textarea， select 和 button 元素

注意：$("input")和$(":input")的区别

$("input")：标签选择器，只匹配input标签
$(":input")：匹配所有 input， textarea， select 和 button 等元素

关于表单项状态的选择器

:selected :checked :disabled

五、JQuery事件机制

事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.

注意：

使用jQuery给元素绑定事件时，要写在页面加载完事件内。
这里的事件可以是 click、blur、focus等等。不要写on，因为之前在js中我们写的是onClick。

六、JQuery动画

1. 显示和隐藏动画

实现显示动画效果方法：show()

实现隐藏动画效果方法：hide()

实现切换显示和隐藏动画效果方法：toggle()

可以设置参数，单位是毫秒，代表在该时间内完成隐藏/显示

2. 滑动动画

实现向下滑动动画效果方法：slideDown()

实现向上滑动动画效果方法：slideUp()

实现滑动切换效果方法：slideToggle()

可以设置参数，单位是毫秒，代表在该时间内完成滑动动画

3. 淡入淡出动画

实现淡入动画效果方法：fadeIn()

实现淡出动画效果方法：fadeOut()

实现淡入淡出切换效果方法：fadeToggle()

实现淡入到指定透明度效果方法：fadeTo() 有两个参数，第一个是时间，第二个是透明度（0~1）

七、操作DOM

1. 操作文本

html() 相当于innerHTML
- html() 获取文本节点（标签+文本）
- html(标签) 添加标签，会覆盖原有的所有内容
text() 相当于innerText
- text() 获取文本节点（文本）
- text(文本内容) 添加文本，会覆盖原有的所有内容

2. 操作属性

attr(属性名) 获取属性值
attr(属性名, 属性值) 设置属性值
removeAttr(属性名) 移除属性
prop(属性名) 获取属性值
prop(属性名, 属性值) 设置属性值
- jQuery 1.6新增加prop()方法。如checked, selected、readonly、disabled 使用prop()时，返回值是true或者false，更加方便处理。
val() 获取value属性值
val(值) 设置value属性值

3. 操作元素

append()、appendTo() 添加子元素节点（末尾）
- 父元素节点.append(新的子元素节点)
- 新的子元素节点.appendTo(父元素节点)
prepend()、prependTo() 添加子元素节点（前置）
before() 、insertBefore() 添加平级元素节点（前面）
after()、insertAfter() 添加平级元素节点（后面）
parent() 获取父元素节点
remove() 删除元素节点
empty() 删除子元素节点