1. jQuery介绍

介绍

+ #### jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team
+ #### jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是：WRITE LESS,DO MORE!
+ #### jQuery是一个轻量级的、兼容多浏览器的JavaScript库
+ #### jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互
+ #### jQuery文档说明很全，各种应用说得也很详细，同时还有许多成熟的插件可供选择

优势

+ #### 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度
+ #### 丰富的DOM选择器，jQuery的选择器用起来很方便
+ #### 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁
+ #### 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强
+ #### Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信
+ #### 跨浏览器兼容。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，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本
+ ##### 说明：维护IE6/7/8是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对IE6/7/8的支持

2. jQuery对象

描述：jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是 jQuery独有的
说明：虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法
声明：声明一个jQuery对象变量的时候在变量名前面加上'$'
var $variable = jQuery对像
var variable = DOM对象
$variable[0]
// jQuery对象转成DOM对象
语法示例：
$("#test").html()
// 获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码：document.getElementById("test").innerHTML;
// 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法，乱使用会报错
// 约定：如果获取的是jQuery对象，那么要在变量前面加上$

3.jQuery的使用

jQuery的基础语法：
$(selector).action()
// $(选择器).方法()
引用jQuery文件：
本地文件方式：
<script src="jquery-3.2.1.min.js"></script>
<script>按照jQuery的规则写代码</script>
网络CDN文件方式：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>按照jQuery的规则写代码</script>

4. jQuery选择器

标签选择器：
$("tagName")
id选择器：
$("#id")
class选择器：
$(".className")
所有元素选择器：
$("*")
组合选择器：
$("#id,.className,TagName")
层级选择器：
// x和y为任意选择器
#("x y") // 子孙选择器(x中的所有子y和孙子y等所有层级的y)
$("x>y") // 子选择器(x中的所有子y，只包含子级，不包括其他层级的y)
$("x+y") // 毗邻选择器(紧邻x之后的y)
$("x~y") // 兄弟选择器(x所在当前层级之后的所有兄弟y，不包含其他层级)

5. jQuery筛选器

基本筛选器

:first // 第一个元素
:last // 最后一个元素
:eq(index) // index为索引值，匹配等于指定索引值的元素
:gt(index) // index为索引值，匹配大于指定索引值的元素
:lt(index) // index为索引值，匹配小于指定索引值的元素
:even // 从0开始，匹配所有索引值为偶数的元素
:odd // 从0开始，匹配所有索引值为奇数的元素
:not(元素选择器) // 匹配非指定元素选择器的元素标签
:has(元素选择器) // 匹配子标签中包含指定元素选择器的元素标签