当你在追女生时，你们都聊些什么？
在吗，干嘛，吃了没。
哎呀，心疼，喝热水。
多穿，快回，外面冷。
你忙，好梦，早点睡。
知道为啥单身了吗？
一、jQuery简介
1、jQuery 是一个JavaScript库，也就是一个js文件。
2、jQuery官网：jquery.com
3、jQuery的特点：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
4、文件的下载方式：https://cdnjs.com/libraries/jquery/1.12.0
5、文件的形式
未压缩版本：jquery-1.12.4.js 具有大量注释，适用于开发和学习阶段。
压缩版本：jquery-1.12.4.min.js 几乎不具有可读性，体积小，适用于上线的项目中使用。
二、DOM对象和jQuery对象的关系
1、DOM对象时通过DOM方式获取的标签，jQuery对象时通过jQuery方式获取的标签。
2、jQuery对象实际是一个伪数组形式的数据，内部保存了DOM对象，所以jQuery对象是DOM对象的包装集。
3、DOM对象只能使用DOM的功能，jQuery对象只能使用jQuery中的功能。
4、DOM对象转换为jQuery对象：在$()中传入一个DOM对象。
5、jQuery对象转换为DOM对象：$box[0]或者$box.get(2)
6、BOM顶级对象window，DOM顶级对象document，jQuery顶级对象$和jQuery，且$和jQuery全等。
7、$是一个函数结构，且$函数根据传入的参数不同，可以实现不同的功能：
选择器功能：$('div');
入口函数功能：$(function () {});
将DOM对象转换为jQuery对象：$(document).ready(function () {});
三、选择器功能
1、基本选择器
① id选择: 使用#标识
$('#box').text('这是box的内容');
② 标签选择器：标签名
$('div').text('这是div');
③ 类选择器：使用.标识
$('.box').text('这是类名为box的元素');
④ 交集选择器：
$('div.box').text('这是类名为box的div');
⑤ 并集选择器：使用,逗号表示
$('div.box,p').text('这是获取的标签');
2、层级选择器
① 子代选择器
$('#list>li').css('backgroundColor', 'red');
② 后代选择器
$('#list li').css('backgroundColor', 'red');
3、索引选择器
① :even - 用于获取多个元素中索引值为偶数的元素
$('#list2>li:even').text('这是索引值为偶数的li的内容');
② :odd - 用于获取多个元素中索引值为奇数的元素
$('#list2>li:odd').text('这是索引值为奇数的li的内容');
③ :eq() - 用于获取某个指定索引的元素
$('#list2>li:eq(2)').text('这是第三个li');
四、jQuery的两大特性
1、隐式迭代
在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
2、链式编程
任意的设置形操作后都可以继续操作当前对象。
$('#box').css('width', '100px').text('这是box的内容').css('backgroundColor', 'red');
五、筛选选择器
筛选选择器和前面的选择器结构不太相同，都是方法形式，用于完善链式编程操作。
1、上下级操作
① children() 子代选择器
参数：选择器字符串，可选，不传默认选择所有
$('#list').css('width', '300px').children('.item').css('backgroundColor', 'red');
② find() 后代选择器
参数：选择器字符串，必选，不传就会被忽略
③ parent() 父元素选择器
参数：选择器字符串，可选
④ parents() 祖先元素选择器
参数：选择器字符串，可选，不传参数可以使用，但是会将html和body等标签均进行操作，没有意义，推荐使用时进行参数设置。
2、同级操作
① siblings() - 获取所有同级元素
参数：选择器字符串，可选
② next() - 获取下一个同级元素
参数：选择器字符串，可选
③ prev() - 获取上一个同级元素
参数：选择器字符串，可选
④ nextAll() - 获取后面的所有li
参数：选择器字符串，可选
⑤ prevAll() - 获取前面的所有li
参数：选择器字符串，可选
3、索引操作
① eq() - 用于按照指定索引获取元素
$('li').eq(2).text('这是第三个li');
② index() - 用于获取某个元素在同级元素中的索引值
$(function () {
$('span').click(function () {
console.log($(this).index());
});
});