当前位置：首页 > news >正文

零基础学习jQuery第二天

news 2025/8/11 10:05:08

一、复习：jQuery 核心语法回顾

二、今日核心：DOM 操作（重点！）

1. 查找 DOM 元素（选择器进阶）

2. 修改 DOM 内容 / 属性

3. 增删 DOM 元素

三、事件处理（让页面 “动” 起来）

1. 常用事件方法

2. 绑定事件的语法

3. 实战小案例：点击按钮切换文本

四、今日练习（必做！）

恭喜你开启 jQuery 学习的第二天！经过第一天的基础认知（比如引入 jQuery、基础语法 $() 等），今天我们可以聚焦 DOM 操作 和 事件处理—— 这两块是 jQuery 最核心、最常用的功能，也是提升前端开发效率的关键。

一、复习：jQuery 核心语法回顾

在开始新内容前，先快速回顾第一天的核心点：

jQuery 的核心是 选择器 + 方法，语法结构：$(选择器).方法()

引入方式：本地文件或 CDN（推荐开发阶段用 CDN 快速测试）

html

预览

<!-- 引入 jQuery（百度 CDN 示例） -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

$ 是 jQuery 的别名，所以 $(selector) 等价于 jQuery(selector)

二、今日核心：DOM 操作（重点！）

DOM（文档对象模型）是 HTML 页面的结构树，jQuery 简化了原生 JS 对 DOM 的增、删、改、查操作。

1. 查找 DOM 元素（选择器进阶）

第一天我们学了基础选择器（如 $("#id")、$(".class")、$("tag")），今天补充几个高频实用的：

层级选择器：

$("parent child")：选中父元素下的所有子元素（包括孙子辈）

html

预览

<ul><li>item1</li><li>item2 <span>子元素</span></li>
</ul>
<script>$("ul li").css("color", "red"); // 所有 li 变红（包括嵌套的）
</script>

$("parent > child")：只选中父元素的直接子元素（不包括孙子辈）
javascript
```
$("ul > li").css("font-size", "20px"); // 只有直接子 li 变大
```

过滤选择器（以 : 开头）：
- $("li:first")：选中第一个 li 元素
- $("li:last")：选中最后一个 li 元素
- $("li:eq(2)")：选中索引为 2 的 li（索引从 0 开始）
javascript
```
$("li:first").css("background", "yellow"); // 第一个 li 加黄背景
```

2. 修改 DOM 内容 / 属性

修改内容：
- text()：获取或设置元素的文本内容（类似原生 innerText）
- html()：获取或设置元素的 HTML 内容（类似原生 innerHTML）
javascript
```
// 获取内容
let text = $("p").text(); // 获取第一个 p 的文本
// 设置内容
$("p").html("<strong>加粗文本</strong>"); // 所有 p 变成加粗文本
```

修改属性：

attr("属性名")：获取属性值
attr("属性名", "值")：设置属性值

html

预览

<img src="默认图.jpg" alt="图片">
<script>$("img").attr("src", "新图片.jpg"); // 更换图片$("img").attr("alt", "更换后的图片"); // 修改 alt 文字
</script>

修改样式：
- css("样式名", "值")：单个样式
- css({样式1: "值1", 样式2: "值2"})：多个样式（对象形式）
javascript
```
$("div").css("width", "200px");
$("div").css({"height": "100px","background": "blue"
});
```

3. 增删 DOM 元素

添加元素：

append("内容")：在元素内部末尾添加内容
prepend("内容")：在元素内部开头添加内容

html

预览

<div id="box">原有内容</div>
<script>$("#box").append("<p>后面添加</p>");$("#box").prepend("<p>前面添加</p>");// 结果：<div><p>前面添加</p>原有内容<p>后面添加</p></div>
</script>

删除元素：
- remove()：删除元素本身及所有子元素
- empty()：清空元素内的所有子元素（保留自身）
javascript
```
$("p").remove(); // 删除所有 p 标签
$("#box").empty(); // 清空 box 内的内容，但 box 本身还在
```

三、事件处理（让页面 “动” 起来）

事件是用户与页面的交互（如点击、鼠标移动等），jQuery 简化了事件绑定。

1. 常用事件方法

click()：点击事件
mouseover()：鼠标移入事件
mouseout()：鼠标移出事件
input()：输入框内容变化事件

2. 绑定事件的语法

javascript

// 格式：$(选择器).事件方法(处理函数)
$("button").click(function() {// 点击按钮后执行的代码alert("按钮被点击了！");
});// 鼠标移入div时变色，移出时恢复
$("div").mouseover(function() {$(this).css("background", "pink"); // $(this) 表示当前触发事件的元素
}).mouseout(function() {$(this).css("background", ""); // 清空背景色
});

3. 实战小案例：点击按钮切换文本

html

预览

<button id="toggleBtn">点击切换</button>
<p id="text">原始文本</p><script>$("#toggleBtn").click(function() {let currentText = $("#text").text();// 如果当前是原始文本，就换成新文本，反之亦然if (currentText === "原始文本") {$("#text").text("切换后的文本");} else {$("#text").text("原始文本");}});
</script>

四、今日练习（必做！）

写一个 HTML 页面，包含一个 ul 列表（3 个 li），用 jQuery 实现：
- 给第一个 li 加红色文字
- 给最后一个 li 加黄色背景
- 点击第二个 li 时，在控制台输出 “被点击了”
实现一个简单的 “开关灯” 效果：
- 页面有一个按钮，点击时切换 body 的背景色（黑 ↔ 白）