JavaScript交互式网页设计-T7（jQuery操作DOM）
jQuery API：https://jquery.cuishifeng.cn/
一、jQuery 事件
jQuery 基本事件和原生 JavaScript 是保持一致的，区别在于：
- 原生 JavaScript 事件是使用属性，如：
onclick- JQuery 使用的是函数，如：
click()
原生 JavaScript 与 jQuery 事件对照表：
| 事件 | JavaScript | jQuery |
|---|---|---|
| 单击事件 | onclick | click() |
| 获得焦点事件 | onfocus | focus() |
| 失去焦点事件 | onblur | blur() |
| 下拉框改变事件 | onchange | change() |
| 鼠标光标悬停事件 | onmouseover | mouseover |
| 鼠标光标移开事件 | onmouseout | mouseout |
| 鼠标悬停事件 | / | hover() |
二、jQuery 元素内容操作
1、jQuery 元素文本和值操作
- 设置或获取元素的文本值：
text()或html()- 设置或获取元素的 value 值：
val()
2、jQuery 元素属性操作
- 设置或获取元素属性值：
attr()- 删除元素属性：
removeAttr()
-
同时设置多个属性的方法：
3、jQuery 元素样式操作
3.1 直接设置样式
直接添加样式：
css
3.2 先创建样式，再设置
**【注意】**样式只能设置类样式（class）
- 添加类（样式）：
addClass()- 删除类（样式）：
removeClass()- 切换类（样式）：
toggleClass()
- 添加样式和删除样式：
-
切换样式：
切换样式：在添加样式和删除样式之间相互切换
