1 jQuery 的基础
官网地址：jquery.com/
在线手册地址：jquery.cuishifeng.cn/
1.1 jQuery 的版本
不同的开发版本
jquery-3.4.1.js 完整版本
jquery-3.4.1.min.js 压缩版（去掉了空格换行，简化了变量名）（适合于生产环境）
jquery-3.4.1.slim.js 瘦身版（不再兼容IE，去掉了动画等功能）
版本号
1.x.x 版本： 可以兼容 IE8
2.x.x/3.x.x 版本： 不兼容 IE8
1.2 如何使用 jQuery
① 导入本地的 jQuery 文件
<script src="../jquery/jquery-3.4.1.js"></script>
把 jQuey 从官网下载到本地，使用相对路径导入到页面中。
② 导入 CDN 上的 jQuery 文件
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
③ 根据浏览器版本加载不同版本的 jQuery
<!--IE9及以上以及其他浏览器-->
<!--[if gt IE 8]><!-->
<script src="../../dist/jquery-3.1.1.min.js"></script>
<!--<![endif]-->
<!--IE8以及以下浏览器-->
<!--[if lte IE 8]>
<script src="../../dist/jquery-1.12.4.min.js"></script>
<![endif]-->
1.3 核心函数 / jQuery 对象
① 使用核心函数获取页面中的元素
$('选择器');
参数是字符串，里面写 jQuery 选择器（基本与 CSS 选择器一致）
核心函数返回获取到元素对象（jQuery DOM）
② 把原生 DOM 转为 jQuery DOM
$(原生dom对象)
参数是原生 DOM 对象
返回时 jQuery DOM 对象（对应的元素与元素DOM对应的元素一致）
③ 文档就绪事件的简写
$(function() {
code ...
});
参数是回调函数！
④ 创建新元素
$('<div>'); // 创建了空的元素 没有内容
$('<div>文本内容</div>'); // 如果创建元素的时候需要指定里面的文本内容，把双标签写完成
参数是字符串，但是字符串内容是 html 标签。
返回包含了新创建的元素的 jQuery DOM 对象。
1.4 jQuery DOM 对象
① jQuery DOM 对象
使用jQuery 方式获取的元素对象就是jQuery DOM。
② 原生 DOM
使用原生 js 方式获取的元素对象，就是原生DOM
③ 原生 DOM 和 jQuery DOM 互相转换
原生DOM 和 jQuery DOM 是不同类型的对象，方法属性都不一致，但是都是用于操作文档结构中的元素
把原生 DOM 转为 jQuery DOM： 使用 jQuery 核心函数。
把 jQuery DOM 转为原生 DOM： jQuery 是个伪数组，是由原生 DOM 组成的集合，通过索引取出其中的成员就可以得到原生 DOM。
1.5 文档就绪事件
① 语法
// 完整的写法
$(document).ready(function() {
code ...
});
// 简写
$(function() {
code ...
});
② ready 事件与 load 的事件区别
ready 事件： 等到页面中所有的元素加载完毕触发事件，类似于 DOMContentLoaded 事件。
load 事件： 等到页面中所有的一切加载完毕（包括所有的元素和外部的其他资源）。
1.6 链式调用（连贯操作）
$(dom).css().width().height()
实现原理： 方法中返回 this 即可（谁调用方法，方法就返回谁）
2 jQuery 选择器
2.1 基本选择器
#ID ID 名选择器
.className 类名选择器
tagName 标签名选择器
* 全局选择器
selector01,selector02 并集选择器
li.item 交集选择器
与 css3 基本选择器一致！
2.2 层级选择器
selector01 selector02 后代元素选择器
selector01>selector02 子元素选择器
selector01+selector02 相邻兄弟元素选择器（后面紧邻的一个兄弟元素）
selector01~selector02 通用兄弟元素选择器（后面所有的兄弟元素）
与 CSS3 层级选择器一致！
2.3 过滤选择器
与 CSS3 选择器一致的：
:root
:lang()
:target
:focus
:not(selector)
jQuery 所特有的：
:first
:last
:eq(n) n 从 0 开始
:odd
:even
:lt(n)
:gt(n)
:header 选择h1~h6
:animated 选择正在执行动画的元素（jQuery动画）
2.4 内容选择器
与 CSS3 选择器一致：
:empty 选择既没有后代也没有内容的元素
jQuery 所独有的选择器：
:parent 选择有后代或者有内容的元素，与 :empty 相反
:contains(text) 选择包含指定文本内容的元素（自己包含或者后代元素包含）
:has(选择器) 选择包含指定后代的某个元素（根据儿子找老子）
2.5 可见性选择器
:hidden 选择不可见的元素（display设置为none的元素或者隐藏域）
:visible 选择可见的元素（不满足 :hidden,就满足 :visible）
2.6 属性选择器
与 CSS3 选择器一致：
[attrName] 选择包含指定属性的元素
[attrName="value"] 选择属性的值是value的元素
[attrName^="value"] 选择属性的值以value开头的元素
[attrName$="value"] 选择属性的值以value结尾的元素
[attrName*="value"] 选择属性的值中包含value的元素
jQuery选择器所特有：
[attrName!="value"] 选择属性的值不是 value 的元素
2.7 子元素选择器
jQuery 中的子元素选择器与 CSS3 中结构伪类一致
:first-child
:last-child
:nth-child()
:nth-last-child()
:only-child()
:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
:only-of-type()
与 CSS3 结构伪类选择器一致
2.8 表单选择器
:text 选择到 type 值是 text 的 input 元素 input[type="text"]
:password 选择到 type 值是 password 的 input 元素
:radio 选择到 type 值是 radio 的 input 元素
:checkbox 选择到 type 值是 checkbox 的 input 元素
:submit 选择到 type 值是 submit 的 input 元素或者 button 元素
:reset 选择到 type 值是 reset 的 input 元素或者 button 元素
:button 选择到 type 值是 button 的 input 元素或者 button 元素
:input 选择到所有的表单控件
2.9 表单对象选择器
:enabled 选择可用的表单控件
:disabled 选择不可用的表单控件（设置了属性 disabled）
:checked 选择被选中的单选按钮或者复选框
:selected 选择被选中的下拉选项
与 CSS3 UI 伪类选择器一致
2.10 注意事项
:first 与 :first-child 区别：
1. :first 从所有满足条件的元素中选择第一个
2. :first-child 分别从相同父元素的兄弟元素中选择第一个
li:first 与 li :first 区别：
1. li:first,先找到所有的 li，再从里面选择第一个。
2. li :first,先找到 li 所有的后代，再从里面选择第一个
注意：
不论是 CSS 选择器还是 jQuery 选择器，带 : 的选择器，都没有找后代元素或者祖先元素的； 都是对已经选择到的元素中进行过滤。
3 jQuery 筛选器方法
3.1 过滤方法
first() 返回集合中的第一个
last() 返回集合中的最后一个
eq(n) 返回集合中的第 n 个， n 从 0 开始数
filter('选择器') 返回集合中满足条件的元素
not('选择器') 排除满足条件的元素
has('选择器') 返回包含指定后代元素的元素
slice(start, end) 从集合中截取一部分
总结：
- 过滤方法返回的仍然是一个 jQuery DOM 对象，但是所包含的元素与调用该方法的 jQuery DOM 包含的元素并不一致。
- 过滤方法返回的 jQuery DOM 是调用该方法的 jQuery DOM 的子集。
3.2 查找方法
后代元素：
children([选择器]) 返回子元素中所有满足条件的，如果不写参数就返回所有的子元素
find(选择器) 返回后代元素中所有满足条件的，参数必写。
祖先元素（父元素）：
parent([选择器]) 返回父元素
parents([选择器]) 返回所有的满足条件祖先元素，不写参数就是所有的祖先元素
parentsUnti([选择器]) 从父元素开始向上查找知道满足选择器条件的祖先元素，所有组成的集合（满足选择器条件的是不包含在内的） 不写参数，返回所有的祖先元素
兄弟元素：
next([选择器]) 返回紧邻在后面的兄弟元素
nextAll([选择器]) 返回后面所有满足条件的兄弟元素，没有参数就是所有后面的兄弟元素
nextUntil([选择器]) 后面的兄弟元素，直到满足选择器条件的就停下来（满足条件的元素不包含在内） 不写参数就是后面所有的兄弟元素
prev([选择器]) 返回紧邻在前面的兄弟元素
prevAll([选择器]) 返回前面所有的满足条件的兄弟元素，没有参数返回前面所有的兄弟元素
prevUntil([选择器]) 往前找兄弟元素，知道碰到满足条件的就停下来（满足条件的元素不包含在集合中），如果不写参数，就返回前面所有的兄弟元素
siblings([选择器]) 返回所有满足条件的兄弟元素（不包括自己）， 不写参数就返回所有的兄弟元素。
注意事项：
- 如果调用查找方法的 jQueryDOM 中包含多个元素，就分别选择到各个元素的亲戚元素，把它们的亲戚元素放在一起组成新的集合返回
- 查找方法返回的仍然是 jQuery DOM 对象，所包含的元素与调用查找方法的jQuery DOM 所包含的元素不一样。
- 查找方法返回的 jQuery DOM 不是调用该方法的 jQuery DOM 的子集。
3.3 串联方法
add(选择器) 返回新的 jQueryDOM，新的 jQueryDOM 中由调用add方法的jQueryDOM中的元素和满足条件的元素组成。
addBack() 返回新的 jQueryDOM，新的 jQueryDOM包含调用 addBack 的jQuery DOM 中元素 和 上一次破坏性操作前面的 jQuery DOM 中的元素
end() 返回最近的一次破坏性操作前面的jQuery DOM
破坏性操作： 方法返回的 jQuery DOM 与调用该方法的 jQuery DOM 包含的元素不一致， 如过滤方法和查找方法就是破坏性操作。
非破坏性操作： 方法返回的 jQueryDOM 与调用该方法的 jQuery DOM 一致。 样式操作、属性操作 等大部分 jQuery 方法都是非破坏性的。
3.4 其他方法
is(选择器) 返回布尔值，判断调用该方法的jQueryDOM是否满足选择器条件
map(callback) 返回新的jQueryDOM，jQueryDOM的成员个数与调用该方法的jQueryDOM成员个数一致，里面的组成取决于函数的返回值
4 元素的创建、添加、删除、克隆
4.1 内部插入
append() 父元素调用最后面追加子元素，参数：jQueryDOM、原生DOM、HTML标签形式的字符串
appendTo() 子元素调用追加到指定的父元素中， 参数：jQueryDOM、原生DOM、选择器形式的字符串
prepend() 父元素调用在最前面添加子元素，参数：jQueryDOM、原生DOM、HTML标签形式的字符串
prependTo() 子元素调用添加到指定父元素的最前面， 参数：jQueryDOM、原生DOM、选择器形式的字符串
4.2 外部插入
after() 在元素的后面添加兄弟元素 参数：jQueryDOM、原生DOM、HTML标签形式的字符串
insertAfter() 新元素调用，作为兄弟元素添加到元素的后面 参数：jQueryDOM、原生DOM、选择器形式的字符串
before() 在元素的前面面添加兄弟元素 参数：jQueryDOM、原生DOM、HTML标签形式的字符串
insertBefore() 新元素调用，作为兄弟元素添加到元素的前面 参数：jQueryDOM、原生DOM、选择器形式的字符串
4.3 包裹
wrap() 给jQueryDOM中每个元素的外面包裹一层元素 参数：jQueryDOM、原生DOM、HTML标签形式的字符串
wrapAll() 给jQueryDOM所有元素的最外面包裹一层元素， 参数类型同上
wrappInner() 在元素和原来的内容之间添加一层，参数类型同上。
unwrap() 去掉包裹元素，不需要参数
4.4 替换
repalceWith() 旧的元素调用，参数是新元素； 参数：jQueryDOM、原生DOM、HTML标签形式的字符串
replaceAll() 新元素调用，参数是旧元素； 参数：jQueryDOM、原生DOM、选择器形式的字符串
4.5 删除
empty() 清空元素内所有的内容
remove() 谁调用删除谁
4.6 克隆
clone() 克隆，深度克隆
5 属性和样式操作
5.1 属性操作
① 属性操作
prop(属性名 [,值]) 设置或获取内置属性
removeProp(属性名) 删除内置属性
attr(属性名 [,值]) 设置或获取自定属性
removeAttr(属性名) 删除自定属性
② data- 开头的自定义属性
$(dom).data('属性名' [,值]); // 属性名只写 data- 后面的即可 读取或设置data-开头的自定义属性的值
使用该方法设置属性值的时候，无法设置 html 标签上的属性值，值可以设置 jQuery DOM 对象上的属性值。
③ 类名操作
addClass() 新增一个类名
removeClass() 删除一个类名
toggleClass() 切换一个类名（有就删除，没有就添加）
hasClass() 判断是否存在某个类名 返回布尔值
注意：
addClass()、removeClass()、toggleClass() 都是谁调用返回谁，不是破坏性操作。
hasClass() 返回布尔值
④ 代码/文本/值
html([value]) 读取或设置元素内的代码内容 类似于原生DOM的 innerHTML 属性
text([value]) 读取或设置元素内的文本内容 类似于原生DOM的 textContent/innerText 属性
val([value]) 读取或设置输入框中输入的内容 类似于原生DOM的 value 属性
5.2 样式操作
① css 方法
css() 读取或设置元素的样式； 设置的样式会设置到行内，读取样式读取的是计算样式。
// 设置 box 元素的样式
$('#box').css('border', '5px solid red');
// 使用 CSS 方法同时多个样式
$('#box').css('margin-top', '100px').css('box-shadow', '5px 5px 15px');
// 同时设置多个样式
$('#box').css({
'background-image': 'url(../dist/images/db02.jpeg)',
'margin-left': '200px'
});
② 元素的尺寸
width() / height() 设置或者获取元素内容的尺寸
innerWidth() / innerHeight() 设置或获取元素内容+内边距的尺寸
outerWidth() / outerHeight() 设置或获取元素整体尺寸（内容+内边距+边框宽度）
③ 元素的位置
offset() 设置或读取元素在整个页面上的位置
scrollLeft() / scrollTop() 设置或读取元素中内容的位置
没有参数就是获取元素的位置，返回一个对象，对象中有 left 和 top 两个属性。
想要设置元素的位置，需要给一个有left和top属性的对象作为参数
$('#box').offset({
left: 10,
top: 20
});
5.3 注意：属性和样式操作方法的特点
1. 如果设置属性值或者样式，jQuery 有几个元素就设置几个元素的属性值或样式。
2. 如果读取属性值或者样式，读取 jQuery DOM 中第一元素的属性值或样式。
3. 属性和样式操作的方法都既可以读取值也可以设置值； 读取值的时候，方法返回的是属性或样式的值； 使用方法设置属性或样式的时候，方法仍然返回调用该方法的 jQueryDOM，可以进行链式调用。
6 事件机制
6.1 添加事件监听
注意： jQuery 添加事件的方法仍然返回 jQueryDOM对象，谁调用返回值！可以链式调用。
① 事件作为方法
$(dom).事件名(回调函数)
② 使用 on 方法
$(dom).on('事件名', 回调函数)
③ 事件只能触发一次
$(dom).one('事件名', 回调函数)
6.2 移除事件监听
jQuery中，不论是采用哪种方式添加的事件监听，都使用 off 方法解除事件监听。
off() 方法返回 jQuery DOM 对象，谁调用返回谁，支持链式调用。
off('事件名'); // 解除元素上指定的事件监听
off(); // 没有参数，解除元素上所有的事件监听
6.3 使用代码触发事件
// 第一种方式 把事件作为方法调用，不要给参数
$(dom).事件名();
// 第二种方式 使用 trigger()
$(dom).trigger('事件名');
注意： 这两种方法，谁调用返回谁，支持链式调用！
6.4 事件委托
$('#box').on('click', 'li', function() {
$(this).toggleClass('active');
});
基本原理，与原生DOM中的事件委托一致；把事件委托给要触发事件元素的父元素或者其他祖先元素。
jQuery 中直接使用 on 方法可以实现事件委托，要实现事件委托 on 方法需要指定三个参数，分别是事件名、选择器（选择到目标元素）、回调函数
jQuery on 实现事件委托，回调函数中的 this 指向具体触发了事件的元素。
6.5 jQuery 中的事件
原生 DOM 中有什么事件，jQuery 中也有什么事件！
相比于原生DOM，jQuery中定义了几个独有的事件：
ready 文档就绪事件，监听给 $(document)
hover 鼠标进入和离开都会触发，mouseenter 和 mouseleave 集合在一起
focusin 当表单控件获取焦点，监听表单控件的父元素（祖先元素）
focusout 当表单控件失去焦点，监听表单控件的父元素（祖先元素）
6.6 Event 对象
jQuery 事件中得到的 Event 对象与原生 JS 事件中得到的 Event 对象类型不一致，但是属性和方法都是一样，Event 对象的获取方式也是一样。
属性：
clientX / clientY 鼠标在视口上的位置
pageX / pageY 鼠标在整个页面上的位置
screenX / screenY 鼠标在屏幕上的位置
offsetX / offsetY 鼠标在目标元素上的位置
target 返回目标元素，原生DOM
button 鼠标按键的值， 0 1 2
keyCode 键盘按键的 ascii 码
which 键盘按键的 ascii 码
key 键盘按键的值
方法：
stopPropagation() 阻止事件冒泡
preventDefault() 阻止默认行为
注意：
jQuery 事件的回调函数中，如果
return false, 既可以阻止事件冒泡又可以阻止默认行为。原生 JS 事件，如果是事件名作为方法方式监听的事件，回调函数中
return false只能够阻止默认行为无法阻止冒泡； 如果使用addEventListener()方式监听的事件，回调函数中return false既不能阻止默认行为也不能阻止冒泡。
7 动画效果
7.1 动画效果方法
① 基本效果
hide() 隐藏
show() 显示
toggle() 如果元素隐藏就显示，如果元素显示就隐藏
注意：
- 设置动画执行的时间： 给动画方法设置参数，使用关键字指定：fast、normal、slow，使用数字指定（单位是毫秒），不指定默认瞬间完成。
- 给动画方法第二个参数设置为回调函数，该回调函数在动画执行完毕后调用。
- 动画执行过程，与宽高有关的（width、height、内边距、边框宽度）和 opacity 在变化。
② 滑动效果
slideUp() 隐藏
slideDown() 显示
slideToggle() 如果元素隐藏就显示，如果元素显示就隐藏
注意：
- 设置动画执行的时间： 给动画方法设置参数，使用关键字指定：fast、normal、slow，使用数字指定（单位是毫秒），不指定默认 noraml
- 给动画方法第二个参数设置为回调函数，该回调函数在动画执行完毕后调用。
- 动画执行过程，与元素高度有关（height、上下内外边距、上下边框宽度）在变化。
③ 淡入淡出效果
fadeOut() 隐藏
fadeIn() 显示
fadeToggle() 如果元素隐藏就显示，如果元素显示就隐藏
fadeTo(s, o [,fn]) 把元素的不透明度变化到指定的位置 第一个参数是动画时间，第二个参数是oapcity的值
注意：
- 设置动画执行的时间： 给动画方法设置参数，使用关键字指定：fast、normal、slow，使用数字指定（单位是毫秒），不指定默认 noraml
- 给动画方法第二个参数设置为回调函数，该回调函数在动画执行完毕后调用。(fadeTo 是第三个参数)
- 动画执行过程，只有 opacity 的值在变化。
④ 自定义动画效果
animate(对象，时间, 回调函数)
注意：
- 第一个参数，指定对象，对象中的属性就是发生变化的 css 属性（长度）
- 第二个参数指定动画持续时间，默认是 normal
- 指定动画执行完毕后的回调函数。
7.2 动画控制方法
delay() 延迟动画的执行，参数指定时间
stop() 停止动画，动画执行到哪里就停到哪里
finish() 瞬间完成动画，瞬间显示为动画的最终状态（动画队列中的最终状态）
注意事项：
- 如果元素调用了多个动画方法，会按照调用顺序加入动画队列，动画会依次执行，上一个动画执行结束下一个动画开始执行。
- 如果元素触发事件执行jQuery动画，通常执行动画之前先调用 stop()，防止事件触发频繁，导致动画队列加入的动画过多。
8 jQuery 工具方法
$(dom).index() 返回jQueryDOM中元素的索引位置， 如果jQueryDOM包含多个元素，返回第一元素的索引位置
$(dom).each(callback) 遍历jQuery DOM
9 自定义 jQuery 插件
9.1 给 jQueryDOM 扩展方法 (重点)
$.fn.extend({
方法名: function() {
}
})
9.2 给 jQuery 对象本身扩展方法
$.extend({
方法名: function() {
}
})
