1、jQuery是什么？
jQuery是一个快速、小巧且功能丰富JavaScript库。它使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单，并提供了一个易于使用的API，可以跨多种浏览器工作，结合了多功能性和可扩展性。
jQuery中封装了很多方法，学习jQuery就是学习当中方法的使用。
jQuery特性：隐式迭代、链式编程。
2、如何使用jQuery？
使用步骤：
（1）引入jQuery文件；
下载jQuery文件：
jQuery官网：https://jquery.com/
jQuery版本：
1.x：支持老浏览器，比如IE678，停止更新
2.x：不支持老浏览器，停止更新
3.x：不支持老浏览器，更新中
引入jQuery代码：
<script src="jQuery文件路径"></script>
（2）写一个入口函数；
入口函数有两种写法：
//写法1
$(document).ready(function(){
});
//写法2
$(function(){
});
jQuery入口函数和JavaScript的入口函数window.onload的区别：
a、jQuery入口函数可以写多个，而window.onload只能写一个；
b、执行时间不同，jQuery入口函数要先于window.onload函数执行；因为jQuery要等待页面上dom树加载完后执行，window.onload要等待页面上所有资源（dom树、外部图片、图片等）加载完执行。
（3）使用jQuery选择器找到要操作的元素，进行操作。
3、$是一个函数
jQuery文件结构：jQuery文件是一个自执行函数；
(function(){
window.jQuery=window.$=jQuery; //自执行文件给window对象添加一个jQuery属性和$属性
，$和jQuery是等价的，是一个函数
}());
$是一个函数，因此参数传递不同，效果也不同；
如果参数传递的是一个匿名函数，就成为了入口函数；
如果参数传递的是一个字符串，就成为了选择器，也有可能创建一个标签；
如果参数是一个dom对象，它就会把参数转换为jQuery对象。
$(function(){
}); //匿名函数
$('#one') //选择器
$('<div>我是一个div</div>') //创建一个标签
$(dom对象) //将dom对象转换为jQuery对象
4、dom对象和jQuery对象
dom对象（Document Object Model）：文档对象模型，定义了访问HTML文档对象的一套属性、方法和事件。
dom对象就是原生js获取到的对象，比如document.getElementById("one")；
特点：只能调用dom方法或属性，不能调用jQuery的属性或方法。
jQuery对象：利用jQuery选择器获取到的对象就是jQuery对象。
特点：只能调用jQuery对象的属性和方法，不能调用原生js的dom对象的属性和方法；
ps：定义jQuery对象的变量时，最好使用$开头。
jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集。
dom对象和jQuery对象的相互转换：
//dom对象转jQuery对象
var div1=document.getElementById("one"); /*获得dom对象*/
var $div1=$(div1); /*将dom对象转换为jQuery对象*/
console.log($div1); /*控制台输出*/
//jQuery对象转dom对象
var divs=$('div'); /*获取jQuery对象*/
//方法1：利用下标取出（jQuery对象是dom对象的一个包装集）
var div1=divs[0]; /*取出一个dom对象*/
//方法2：使用jQuery的方法：get()
var div2=divs.get(1); /*参数为下标*/
console.log(div1); /*控制台输出*/
console.log(div2); /*控制台输出*/
5、获取、设置文本内容text()
获取文本：
text()方法不给参数，获取标签的文本，会获取到这个标签中所有的文本，包括后代元素中的文本；
包含了多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到。
$('#div1').text(); /*获取id为div1的标签中的所有文本*/
$('div').text(); /*获取页面中每个div元素中的文本*/
设置文本：
text()方法含参数，参数就是要设置的文本，设置的文本将覆盖原来的文本；
如果设置的文本中包含HTML标签，不会被解析出来，仍然是以文本形式显示；
包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有dom元素的文本都设置上（隐式遍历)。
$('#div1').text('我是新设置的文本'); /*将id为div1的标签文本设置为：我是新设置的文
本*/
6、获取、设置样式css()
获取样式：
将css()的参数设置为想要获取的样式值的样式名称；
在IE浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框，比如border-top-width：上边框宽度；
获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom元素的样式。
$('#div1').css('width'); /*获取id为div1的元素的样式width*/
$('div').css('width'); /*如果页面中包含多个div元素，只能获取到第一个div的样式*/
设置样式：
css()参数为样式名、样式值用来设置元素的样式（设置的样式是行内样式）；
设置包含了多个dom元素的jQuery对象的样式，将为所有dom元素设置给定的样式。
//设置单样式
$('#div1').css('width','300px');
$('#div1').css('width',300); /*设置id为div1的元素的width为300px，两种写法都可以*/
//设置多样式
$('#div1').css({
width:300,
'height':'300px',
border:'1px solid pink'
}); /*给id为div1的元素设置多个样式
7、jQuery选择器
jQuery选择器返回的是jQuery对象。
jQuery选择器分为：基本选择器、层级选择器、过滤选择器、筛选选择器（方法）。
7.1、基本选择器
语法：类似于CSS；
分为：ID选择器、类选择器、标签选择器、并集选择器、交集选择器。
$('#id'); //（ID选择器：获取id为id的元素）
$('.class'); //（类选择器：获取类为class的元素）
$('div'); //（标签选择器：获取标签是div的所有元素）
$('div,p,li'); //（并集选择器：使用逗号隔开，获取div,p,li任一元素）
$('div.class'); //（交集选择器：获取标签是div且类为class的元素，之间不隔开）
7.2、层级选择器
语法：类似于CSS；
分为：子代选择器、后代选择器。
//子代选择器
$('ul>li'); /*使用>隔开，只获取儿子层级的元素，不包括孙子层级等后代层级的
元素，这里只获取ul标签的儿子层级的li元素*/
//后代选择器
$('ul li'); /*使用空格隔开，获取所有后代层级的元素，包括儿子、孙子等后代
层级的元素，这里获取ul标签所有后代元素li*/
7.3、过滤选择器
语法：
//:eq(index)
$('li:eq(2)'); /*获取到li的元素中，选择索引为2的元素，索引从0开始*/
//:odd
$('li:odd'); /*获取到li元素中，选择索引为奇数的元素*/
//:even
$('li:even'); /*获取到的li元素中，选择索引为偶数的元素*/
7.4、筛选选择器（方法）
语法：
//children(selector)
$('ul').children('li'); /*相当于子类选择器，这里选择ul标签的儿子层级的li元素*/
//find(selector)
$('ul').find('li'); /*相当于后代选择器，这里选择ul标签的所有后代li元素*/
//siblings(selector)
$('#first').siblings('li'); /*查找兄弟节点，不包括自己本身，这里是选择id为first的
元素的li兄弟节点*/
//parent()
$('#first').parent(); /*查找父亲节点，这里是查找id为first的元素的父亲节点*/
//eq(index)
$('li').eq(2); /*相当于$('li:eq(2)')，index从0开始*/
//next()
$('li').next(); /*找下一个兄弟*/
//prev()
$('li').prev(); /*找上一个兄弟*/
8、mouseenter事件和mouseleave事件
mouseover事件在鼠标移动到选取的元素及其子元素上时触发；
mouseenter事件只有在鼠标移动到选取的元素上时才会触发；
9、class类操作
jQuery中的类操作有：添加类、移除类、判断类、切换类；
添加类addClass()：
//添加单个类
$('#div1').addClass('.fontsize');/*为id为div1的元素添加类fontsize*/
//添加多个类
$('#div1').addClass('.fontsize widthadd');/*为id为div1的元素添加类fontsize和类
widthadd*/
移除类removeClass()：
//移除单个类
$('#div1').removeClass('.fontsize');/*为id为div1的元素移除类fontsize*/
//移除多个类
$('#div1').removeClass('.fontsize widthadd');/*为id为div1的元素移除类fontsize和
类widthadd*/
//移除所有类
$('#div1').removeClass();
判断类hasClass()：判断某个元素是否含有某个类，返回值true、false；
$('#div1').hasClass('fontsize'); /*判断id为div1的元素是否含有类fontsize*/
切换类toggleClass()：如果元素有某个类，就移除这个类；没有就添加这个类。
$('#div1').toggleClass('fontsize'); /*如果id为div1的元素没有类fontsize就为它添加
这个类，有的话就移除这个类*/
