第7章 jQuery操作DOM

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()

• 添加样式和删除样式：

• 切换样式：

  切换样式：在添加样式和删除样式之间相互切换