共计 6985 个字符，预计需要花费 18 分钟才能阅读完成。
jQuery 其实就是一个 Js 文件，里面集合了很多封装好的函数。方便了我们进行开发使用。
使用 jQuery，就是为了更快速操作 DOM。
一、jQuery 前期准备
1.1 jQuery 使用的前期准备
在使用之前需要需要在项目中导入 jQuery 文件。
1、进入 jQuery 官网 www.jQuery.com，下载我们版本，一般使用压缩版就好
2、点击下载压缩版，就会跳转到文件内部
3、复制所有，在自己的项目中，创建一个 js 文件，jQuery.min.js
1.2 jQuery 的使用
1、在项目的 html 文件中引入 jQuery 文件（一定要在自己书写的 JS 之前）
2、在后续的 JS 书写中就可以使用 jQuery 中封装的函数了。
1.3 jQuery 的入口函数
等着页面 DOM 加载完毕再去执行 js 代码。
二、jQuery 使用
2.1 jQuery 的顶级对象
$ 是 jQuery 的别称（另外的名字）.
所以下面的两个代码是等效的
$(function () {$('div').hide();
alert(11);
}); jQuery(function () {jQuery('div').hide();
alert(11);
});$ 同时也是 jQuery 的 顶级对象。相当于 js 中的 window。
2.2 DOM 对象和 jQuery 对象区别
DOM 对象：用原生 js 获取过来的对象就是 DOM 对象
var myDiv = document.querySelector('div'); // myDiv 是 DOM 对象jQuery 对象：用 jquery 方式获取过来的对象是 jQuery 对象。本质：通过 $ 把 DOM 元素进行了包装
$('div'); // $('div')是一个 jQuery 对象注意：
jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。
如：1、jQuery 对象不能对行内样式直接加以修改。2、DOM 对象不能使用 jQuery 封装的函数
2.3 DOM 对象和 jQuery 对象相互转化
为了使得一个对象能既使用 DOM 方法又使用 jQuery 方法，我们需要让对象在 DOM 和 jQuery 中切换
1、DOM 对象转换为 jQuery 对象
var myvideo = document.querySelector('video');
$(myvideo)；// 转换为了 jquery 对象2、jQuery 对象转换为 DOM 对象
$('video')；// 获取 jquery 对象
// 转化方式 1：$('video')[0].play();
// 转换方式 2：$('video')。get（0）.play();因为获取的 jquery 对象以伪数组的方式存在。
2.4 jQuery 的选择器
首先，加强一个概念，符合选择器条件得到的 jquery 对象，以数组的形式存储。
2.4.1 基本选择器
按照标签名称获取：
$('div')按照类名获取：
$('.myclass1')按照 id 获取；
$('#mtid1')和 DOM 的对象获取一致。
2.4.2 子代选择器
所谓子代就是自己的亲儿子, 只选出自己的亲儿子。
这里的前四个 li 时 ol 的亲儿子，后四个 li 时 ul 的前儿子
- 我是 ol 的
- 我是 ol 的
- 我是 ol 的
- 我是 ol 的
- 我是 ul 的
- 我是 ul 的
- 我是 ul 的
- 我是 ul 的
$('ul>li')2.4.3 后代选择器
这里选出后续中所有满足条件的子代，比如使用
$('ul li')挑选
会得到所有的 li 对象。
2.5 jQuery 的隐式迭代
jquery 使用很简便的另一个大点在于，jquery 内部直接实现了对伪数组的遍历。
比如当我们对所有 div 对象设置背景颜色时，只需要获取所有的 div，然后设置一次就好。
$("div").css("background", "red");jquery 内部自动帮我们实现了循环，不需要我们自己去编写循环代码。
2.6 jQuery 的筛选器
2.6.1jQuery 的筛选器的使用
可以使用如下方式，对 jquery 对象进行筛选
2.6.2 筛选器使用方法
1、.parent（）返回父级
2、.children(选择器) 亲儿子，类似子代选择器 ul>li
3、.find(选择器) 所有子类
4、.siblings(选择器) 所有同辈兄弟，除自己！！
5、nextAll() , prevtAll() 除自己以外的，之前 or 之后的同辈元素
6、.eq(index) 伪类中某个序号的对象
7、.hasClass(‘ 类名 ’) 是否含有特定类，类名不用加 . !!!
2.6.3jQuery 里面的排他思想
核心思想：借助同辈兄弟筛选器（因为不包括自己）。所以设置自己的样式以后，清除同辈兄弟的样式。
2.7 链式编程
这样的编程方法，大大降低了代码的书写量。
一般情况下，我们这样说西安
如果换成链式编程：
只需要一句话，就可以实现 2 个功能。
三、jQuery 常用 API
3.1 jQuery 修改样式 — CSS 方法
jquery 对样式的修改，不能像 DOM 对象一样采用行内样式直接修改，而是要通过 jquery 封装的函数 .css()，进行修改。
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})或者可以是：
$("div").css("width", "300px");注意：1、属性名一定要加引号；2、如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号；
如果只有属性则返回，属性值。
console.log($("div").css("width"));3.2 jQuery 修改样式 — 类方法
如果多次重复出现某种样式，我们可以帮这个样式写成一个类。
.current {
background-color: red;
transform: rotate(360deg);
}作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。
1、添加类
$(“div”).addClass(''current'');2、移除类
$(“div”).removeClass(''current'');
3、切换类
$(“div”).toggleClass(''current'');
切换类顾名思义，事件发生以后，重复执行添加，移除的操作。
注意：所有的类都是添加！！！而不是覆盖！！！一个对象可以同时添加几个类！！！这个 addClass 相当于追加类名 不影响以前的类名！！！
原生 JS 中 className 会覆盖元素原先里面的类名。jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
3.3 jQuery 效果 — 显示与隐藏
1、显示语法规范
show([speed,[easing],[fn]])（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串 (“slow”,“normal”, or“fast”) 或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
2、隐藏语法规范
hide([speed,[easing],[fn]])参数同上。
3、切换语法规范
toggle([speed,[easing],[fn]])参数同上。
综合案例：
Document
3.4 jQuery 效果 — 滑动
1. 下滑效果语法规范
slideDown([speed,[easing],[fn]])2. 上滑效果语法规范
slideUp([speed,[easing],[fn]])3、滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])综合案例：
Document
3.5 jQuery 效果细节 —stop（）
所有的 jQuery 动画效果是一个队列，如果多次触发一个动画效果，就会在我们不触发以后，还在执行，知道队列中的效果全部执行完，这样是不利于交互的。
在每一次触发事件后，先执行一次 stop（），取消该对象之前的队列，只专注当下的效果。
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});stop（）一定写在本次动作之前，用于停止以前的队列。
3.6 jQuery 效果 — 淡入淡出
1. 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串 (“slow”,“normal”, or“fast”) 或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2. 淡出效果语法规范
fadeOut([speed,[easing],[fn]])
参数同上。
3、淡入淡出切换效果语法规范
fadeToggle([speed,[easing],[fn]])4、渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串 (“slow”,“normal”, or“fast”) 或表示动画时长的毫秒数值(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
综合案例：
3.7 jQuery 效果 — 自定义效果
使用方法：
animate(params,[speed],[easing],[fn])（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串 (“slow”,“normal”, or“fast”) 或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
3.8 jQuery 鼠标事件综合
hover([over,]out)（1）over: 鼠标移到元素上要触发的函数（相当于 mouseenter）
（2）out: 鼠标移出元素要触发的函数（相当于 mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它
1. 事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(function() {$(this).children("ul").slideDown(200);
}, function() {$(this).children("ul").slideUp(200);
});
2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数原文地址: jQuery 学习归纳 1 — jQuery 常用 API
