（一）jQurey基础知识
1、官网下载：jQuery
jQurey是一个js文件，直接存到项目文件中，然后跟平常文件js导入一致：
<script src="js/jquery-3.7.0.js"></script>2、jQurey语法
jQurey语法主要包含三个部分：工厂函数、选择器和方法,如下
$(selector).action();
- 工厂函数$( )：美元符号“$”等价于jQuery，即$( )=jQuery( )。$( )的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法
- 选择器（selector）：获取需要操作的DOM元素
- 方法action( )：jQuery把js中的一些事件，属性写成了方法，直接调用即可
3、设置CSS属性值
- jQuery对象.addClass([样式名])：添加一个或多个类样式
- $(selector).css({"属性":"属性值","属性":"属性值",……})：增加css样式（可一个）
- $(selector).removeClass(className1 className2 className3);移除css样式（可一个）
（二）选择器
选择器的作用，是选择到我们操作的dom对象，选择器的类型有：
- 基本选择器
- 层次选择器
- 属性选择器
- 基本过滤选择器
- 表单属性过滤选择器
1、基本选择器：
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 标签选择器（元素选择器） | $(“html标签名”) | 获得所有匹配标签名称的于元素 |
| id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
| 类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
2、层次选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 后代选择器 | $("A B ") | 选择A元素内部的所有B元素 |
| 子选择器 | $(“A > B”) | 选择A元素内部的所有B子元素 |
| 兄弟选择器 | $(“A ~ B”) | 选择A元素和B元素之间的所有兄弟元素(不包括A元素,此兄弟元素必须是B类型) |
3、属性选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 属性选择器 | $(“A[属性名]”) | 包含指定属性的选择器 |
| 属性选择器 | $(“A[属性名=值]”) | 包含指定属性等于指定值的选择器 |
| 复合属性选择器 | $(“A[属性名=值]… …”) | 包含多个属性条件的选择器 |
4、基本过滤选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 首元素选择器 | :first | 获得选择的元素中的第一个元素 |
| 尾元素选择器 | :last | 获得选择的元素中的最后一个元素 |
| 非元素选择器 | :not(selecter) | 不包括指定内容的元素 |
| 偶数选择器 | :even | 偶数，从 0 开始计数 |
| 奇数选择器 | :odd | 奇数，从 1 开始计数 |
| 等于索引选择器 | :eq(index) | 指定索引元素 |
| 大于索引选择器 | :gt(index) | 大于指定索引元素 |
| 小于索引选择器 | :lt(index) | 小于指定索引元素 |
| 标题选择器（h标签） | :header | 获得标题元素，固定写法 |
5、表单属性过滤选择器
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 可用元素选择器 | :enabled | 获得可用元素 |
| 不可用元素选择器 | :disabled | 获得不可用元素 |
| 选中选择器 | :checked | 获得单选/复选框选中的元素 |
| 选中选择器 | :selected | 获得下拉框选中的元素 |
（三）、DOM
js的DOM对象与jQuery对象转换
-
js的DOM对象转换成jQuery对象，语法：$(js对象)
-
jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引)
1、文本与值
| 方法 | 解释 |
|---|---|
| val([value]) | 获得/设置元素value属性相应的值 |
| text([value]) | 获得/设置元素的文本内容 |
| html([value]) | 获得/设置元素的标签体内容 |
2、插入对象
| 方法 | 解释 |
|---|---|
| $("<A></A>") | 创建A元素对象 |
| append(element) | 添加成最后一个子元素，两者之间是父子关系 |
| prepend(element) | 添加成第一个子元素，两者之间是父子关系 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系 |
3、删除对象
| 方法 | 解释 |
|---|---|
| remove() | 删除指定元素(子元素也全部被清空) |
| empty() | 清空指定元素的所有子元素 |
4、class操作
| 方法 | 解释 |
|---|---|
| addClass(value) | addClass(类样式名) 给指定的对象添加新的类样式，指定类样式名字即可 |
| removeClass(value) | removeClass(类样式名) 删除指定的类样式 |
| css(name[,value]) | 获取/设置指定的CSS样式 |
| toggleClass(value) | toggleClass(类样式名) 切换样式，如果没有类样式，则添加，如果有类样式，则删除 |
（四）、事件
jQuery中，事件分为两大类：简单事件（基础事件）和复合事件。
jQuery中的简单事件，与JavaScript中的事件一样，都有window事件、鼠标事件、键盘事件、表单事件等，只是对应的方法名称略有不同。
复合事件则是截取、组合用户操作，并且以多个函数作为响应而自定义的处理程序
1、window事件
2、鼠标事件
| 事件 | 说明 |
|---|---|
| click | 鼠标单击事件 |
| mouseover | 鼠标移入事件 |
| mouseout | 鼠标移出事件 |
| mousedown | 鼠标按下事件 |
| mouseup | 鼠标松开事件 |
| mousemove | 鼠标移动事件 |
| contextmenu | 禁用编辑 |
3、键盘事件
| 事件 | 说明 |
| keydowm | 键盘按下 |
| keyup | 键盘松开 |
4、表单事件
| 事件 | 说明 |
| focus | 获取焦点时触发的事件 |
| blur | 失去焦点时触发的事件 |
| select | 选中“单行文本框”或“多行文本框”中的内容时，触发的事件 |
| change | 用于“具有多个选项的表单元素：
|
5、事件进阶
| 事件 | 说明 |
| 绑定事件 | $().on(type, fn) type：事件类型。例如单击事件是"click"， |
| 解绑事件 | $().off(type) |
| 合成事件 | $().hover(fn1, fn2) fn2：表示鼠标（指针）移出事件触发的处理函数 |
| 一次事件 | $().one(type, fn) |
| 自定义事件 | on()方法：定义一个事件。 rigger()方法：触发自定义事件。 |
6、event对象
event对象：保存一个事件发生时，与这个事件有关的详细信息
event属性：
