jQuery基本操作
jQuery 基本操作详解：选择器、DOM 操作与样式控制全指南
jQuery 是一款经典的 JavaScript 库，其核心价值在于 “简化 DOM 操作、统一浏览器兼容性、提供便捷的工具方法”。掌握 jQuery 的基本操作（选择器、DOM 增删改、属性与样式控制）是高效开发前端页面的基础。从 “jQuery 对象基础→选择器体系→DOM 操作→样式与属性控制” 四个维度，系统讲解 jQuery 的核心用法与实战技巧，帮你快速上手 jQuery 开发。
jQuery 基础：引入与对象概念
在使用 jQuery 前，需先理解 “如何引入库” 和 “jQuery 对象与 DOM 对象的区别”—— 这是避免后续操作报错的关键。
1. 引入 jQuery 库
jQuery 是外部库，需通过 <script> 标签引入后才能使用，常见引入方式有两种：
（1）本地引入（推荐开发环境）
将 jQuery 文件下载到本地项目，通过相对路径引入：
<!-- 引入本地 jQuery 文件（版本为 3.5.1，可替换为其他版本） -->
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<!-- 注意：自定义 JS 必须在 jQuery 之后引入，否则无法使用 jQuery 语法 -->
<script type="text/javascript">
// 此处可编写 jQuery 代码
</script>（2）CDN 引入（推荐生产环境）
通过公共 CDN（如百度、谷歌、BootCDN）直接引入，无需下载文件，加载速度快：
<!-- 百度 CDN 引入 jQuery 3.5.1 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>版本选择：
- 1.x 版本：兼容 IE 6/7/8 等旧浏览器，功能稳定；
- 2.x/3.x 版本：不兼容旧 IE，体积更小、性能更好（推荐现代项目使用）。
2. jQuery 对象与 DOM 对象的互转
jQuery 操作的是 “jQuery 对象”（通过 $() 包装 DOM 对象得到），而非原生 “DOM 对象”，二者方法不能混用（如 DOM 对象的 innerHTML 不能在 jQuery 对象上使用）。
（1）DOM 对象 → jQuery 对象
通过 $(DOM 对象) 包装即可将原生 DOM 对象转为 jQuery 对象：
// 1. 获取原生 DOM 对象
var domBtn = document.getElementById("btn");
// 2. 转为 jQuery 对象
var $jqueryBtn = $(domBtn);
// 3. 使用 jQuery 方法（如设置文本）
$jqueryBtn.text("点击我");（2）jQuery 对象 → DOM 对象
jQuery 对象是 “类数组对象”，可通过数组下标或 get(index) 方法获取原生 DOM 对象：
// 1. 获取 jQuery 对象（匹配所有 button 标签）
var $btns = $("button");
// 2. 转为 DOM 对象（两种方式）
var domBtn1 = $btns[0]; // 方式1：数组下标（推荐）
var domBtn2 = $btns.get(1); // 方式2：get() 方法
// 3. 使用 DOM 方法（如获取文本）
console.log(domBtn1.innerText); // 输出按钮文本关键约定：
为区分 jQuery 对象和 DOM 对象，通常在 jQuery 对象变量前加 $ 前缀（如 $btn、$list）—— 这是行业通用约定，可提升代码可读性。
3. 文档就绪事件（$(function())）
与原生 JS 的 window.onload 类似，jQuery 提供 $(function()) 确保 “DOM 加载完成后再执行代码”，避免因 DOM 未解析导致的元素获取失败。
语法对比：
| 方式 | 触发时机 | 执行次数 | 优势 |
|---|---|---|---|
$(function()) |
DOM 解析完成后执行（无需等待图片、样式表） | 可多次执行 | 执行时机早、支持多回调 |
window.onload |
整个页面（图片、样式表）加载完成后执行 | 仅执行最后一个 | 兼容性好（适合旧浏览器） |
示例：
// jQuery 文档就绪事件（推荐写法）
$(function() {
// 此处代码会在 DOM 解析完成后执行
var $btn = $("button");
$btn.click(function() {
alert("按钮被点击了！");
});
});
// 等价写法（完整语法）
$(document).ready(function() {
// 与上面功能一致
});jQuery 核心：选择器体系
选择器是 jQuery 定位 DOM 元素的 “工具”，通过简洁的语法匹配页面中的元素。jQuery 选择器体系丰富，可分为基本选择器、层次选择器、过滤选择器、表单选择器四大类，覆盖绝大多数定位场景。
1. 基本选择器（按 ID、Class、标签定位）
基本选择器是最常用的选择器，通过元素的 id、class 或标签名匹配元素，语法与 CSS 选择器一致。
| 选择器语法 | 作用描述 | 示例 | 匹配结果 |
|---|---|---|---|
#id |
匹配指定 id 的元素（id 唯一） |
$("#content") |
匹配 id="content" 的元素 |
.class |
匹配指定 class 的所有元素 |
$(".active") |
匹配所有 class="active" 的元素 |
element |
匹配指定标签名的所有元素 | $("div") |
匹配所有 <div> 标签 |
* |
匹配页面中所有元素 | $("*") |
匹配所有元素（慎用，性能较低） |
selector1,selector2 |
匹配多个选择器的结果（并列） | $("#content, .active") |
匹配 id="content" 和 class="active" 的元素 |
示例：
<div id="content">内容区</div>
<p class="active">活跃文本</p>
<p class="active">另一个活跃文本</p>
<span>普通文本</span>
<script>
$(function() {
// 1. 匹配 id="content" 的元素
$("#content").css("color", "red"); // 内容区文本变红
// 2. 匹配所有 class="active" 的元素
$(".active").css("font-weight", "bold"); // 活跃文本加粗
// 3. 匹配所有 p 标签和 span 标签
$("p, span").css("font-size", "16px"); // 文本大小改为 16px
});
</script>2. 层次选择器（按 DOM 层级定位）
层次选择器通过元素在 DOM 树中的 “父子、后代、兄弟关系” 匹配元素，适合定位嵌套或相邻的元素。
| 选择器语法 | 作用描述 | 示例 | 匹配结果 |
|---|---|---|---|
ancestor descendant |
匹配祖先元素下的所有后代元素（包括子、孙） | $("div span") |
匹配 <div> 下所有 <span>（无论嵌套层级） |
parent > child |
匹配父元素下的直接子元素（仅一级） | $("div > span") |
匹配 <div> 直接子级的 <span>（孙级不匹配） |
prev + next |
匹配紧接在 prev 后的第一个兄弟元素 |
$("p + span") |
匹配 <p> 后面紧邻的第一个 <span> |
prev ~ siblings |
匹配 prev 后面的所有兄弟元素 |
$("p ~ span") |
匹配 <p> 后面所有 <span>（无需紧邻） |
示例：
<div id="content">
<span>子级 span</span> <!-- 1. div > span 匹配此元素 -->
<p>
<span>孙级 span</span> <!-- 2. div span 匹配此元素，div > span 不匹配 -->
</p>
<p>
<span>另一个孙级 span</span> <!-- 3. div span 匹配此元素 -->
</p>
</div>
<script>
$(function() {
// 1. 后代选择器：div 下所有 span（共 3 个）
var $allSpan = $("div span");
console.log($allSpan.length); // 输出：3
// 2. 父子选择器：div 直接子级的 span（仅 1 个）
var $childSpan = $("div > span");
console.log($childSpan.length); // 输出：1
// 3. 直接兄弟选择器：div > span 后面的第一个 p（仅 1 个）
var $nextP = $("div > span + p");
console.log($nextP.length); // 输出：1
// 4. 后续兄弟选择器：div > span 后面的所有 p（共 2 个）
var $allNextP = $("div > span ~ p");
console.log($allNextP.length); // 输出：2
});
</script>补充：兄弟元素方法
除选择器外，jQuery 还提供方法简化兄弟元素定位：
$element.next()：等价于prev + next，获取下一个兄弟元素；$element.nextAll()：等价于prev ~ siblings，获取后面所有兄弟元素；$element.siblings()：获取所有兄弟元素（无论前后）。
3. 过滤选择器（按条件筛选元素）
过滤选择器通过 “索引、内容、可见性、属性” 等条件筛选元素，语法以 : 开头，是 jQuery 选择器的核心特色。
（1）基本过滤选择器（按索引或状态筛选）
| 选择器语法 | 作用描述 | 示例 | 匹配结果 |
|---|---|---|---|
:first |
匹配第一个元素 | $("li:first") |
匹配所有 <li> 中的第一个 |
:last |
匹配最后一个元素 | $("li:last") |
匹配所有 <li> 中的最后一个 |
:not(selector) |
排除匹配 selector 的元素 |
$("li:not(.active)") |
匹配所有 <li> 中 class 不是 active 的元素 |
:even |
匹配索引为偶数的元素（索引从 0 开始） | $("li:even") |
匹配 <li> 索引 0、2、4… 的元素 |
:odd |
匹配索引为奇数的元素（索引从 0 开始） | $("li:odd") |
匹配 <li> 索引 1、3、5… 的元素 |
:eq(index) |
匹配索引等于 index 的元素 |
$("li:eq(2)") |
匹配 <li> 索引为 2 的元素（第三个） |
:gt(index) |
匹配索引大于 index 的元素 |
$("li:gt(2)") |
匹配 <li> 索引 > 2 的元素 |
:lt(index) |
匹配索引小于 index 的元素 |
$("li:lt(2)") |
匹配 <li> 索引 < 2 的元素 |
:header |
匹配所有标题元素（h1~h6） | $(":header") |
匹配页面中所有 <h1> 到 <h6> 标签 |
:focus |
匹配当前获得焦点的元素 | $(":focus") |
匹配当前聚焦的输入框、按钮等 |
示例：
<ul>
<li class="active">列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<li class="active">列表项 4</li>
<li>列表项 5</li>
</ul>
<script>
$(function() {
// 1. 匹配第一个 li
$("li:first").css("color", "red"); // 列表项 1 变红
// 2. 匹配索引为 2 的 li（第三个）
$("li:eq(2)").css("font-weight", "bold"); // 列表项 3 加粗
// 3. 匹配索引小于 2 的 li（前两个）
$("li:lt(2)").css("background", "#f5f5f5"); // 列表项 1、2 加背景
// 4. 匹配 class 不是 active 的 li（列表项 2、3、5）
$("li:not(.active)").css("text-decoration", "underline"); // 加下划线
});
</script>（2）内容过滤选择器（按元素内容筛选）
根据元素的文本内容或子元素特征匹配元素：
| 选择器语法 | 作用描述 | 示例 | 匹配结果 |
|---|---|---|---|
:contains(text) |
匹配包含指定文本的元素 | $("p:contains('jQuery')") |
匹配所有包含 “jQuery” 文本的 <p> 标签 |
:empty |
匹配无文本且无子元素的元素 | $("div:empty") |
匹配空 <div>（如 <div></div>） |
:has(selector) |
匹配包含指定子元素的元素 | $("div:has(.active)") |
匹配包含 class="active" 子元素的 <div> |
:parent |
匹配有文本或有子元素的元素（与 :empty 相反） |
$("div:parent") |
匹配非空 <div> |
示例：
<div class="box">包含文本的 div</div>
<div class="box"></div> <!-- 空 div -->
<div class="box">
<p class="active">包含 active 类的 p</p>
</div>
<script>
$(function() {
// 1. 匹配包含“文本”的 div
$("div:contains('文本')").css("color", "blue"); // 第一个 div 变蓝
// 2. 匹配空 div
$("div:empty").css("border", "1px solid red"); // 第二个 div 加红边框
// 3. 匹配包含 .active 子元素的 div
$("div:has(.active)").css("background", "#e8f5e9"); // 第三个 div 加绿背景
});
</script>（3）属性过滤选择器（按元素属性筛选）
根据元素是否有指定属性或属性值匹配元素，语法以 [] 括起：
| 选择器语法 | 作用描述 | 示例 | 匹配结果 |
|---|---|---|---|
[attribute] |
匹配有指定属性的元素 | $("input[id]") |
匹配所有有 id 属性的 <input> 标签 |
[attribute=value] |
匹配属性值等于 value 的元素 |
$("input[name='username']") |
匹配 name="username" 的 <input> |
[attribute!=value] |
匹配属性值不等于 value 的元素 |
$("input[name!='username']") |
匹配 name 不是 username 的 <input> |
[attribute^=value] |
匹配属性值以 value 开头的元素 |
$("input[name^='user']") |
匹配 name 以 user 开头的 <input>（如 username、userage） |
[attribute$=value] |
匹配属性值以 value 结尾的元素 |
$("input[name$='name']") |
匹配 name 以 name 结尾的 <input>（如 username、realname） |
[attribute*=value] |
匹配属性值包含 value 的元素 |
$("input[name*='ser']") |
匹配 name 包含 ser 的 <input>（如 username） |
[attr1][attr2=value] |
匹配同时满足多个属性条件的元素 | $("input[id][name='age']") |
匹配有 id 属性且 name="age" 的 <input> |
示例：
<input type="text" name="username" id="user1">
<input type="password" name="password" id="pwd1">
<input type="text" name="userage" id="age1">
<input type="text" name="realname">
<script>
$(function() {
// 1. 匹配 name 以 user 开头的 input（username、userage）
$("input[name^='user']").css("border", "1px solid green");
// 2. 匹配有 id 且 name 是 password 的 input（password 输入框）
$("input[id][name='password']").css("background", "#fff3cd");
// 3. 匹配 name 包含 name 的 input（username、realname）
$("input[name*='name']").css("padding", "5px");
});
</script>（4）表单选择器（专门定位表单元素）
为表单元素量身定制的选择器，简化表单元素定位：
| 选择器语法 | 作用描述 | 示例 | 匹配结果 |
|---|---|---|---|
:input |
匹配所有表单元素（input、textarea、select、button） | $(":input") |
匹配所有表单元素 |
:text |
匹配单行文本框（type="text"） |
$(":text") |
匹配所有单行文本框 |
:password |
匹配密码框（type="password"） |
$(":password") |
匹配所有密码框 |
:radio |
匹配单选框（type="radio"） |
$(":radio") |
匹配所有单选框 |
:checkbox |
匹配复选框（type="checkbox"） |
$(":checkbox") |
匹配所有复选框 |
:submit |
匹配提交按钮（type="submit"） |
$(":submit") |
匹配所有提交按钮 |
:reset |
匹配重置按钮（type="reset"） |
$(":reset") |
匹配所有重置按钮 |
:button |
匹配普通按钮（type="button" 或 <button>） |
$(":button") |
匹配所有普通按钮 |
:file |
匹配文件上传框（type="file"） |
$(":file") |
匹配所有文件上传框 |
示例：
<form id="loginForm">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="radio" name="gender" value="male"> 男
<input type="checkbox" name="remember" value="1"> 记住我
<button type="submit">登录</button>
<button type="button">取消</button>
</form>
<script>
$(function() {
// 1. 匹配表单中的所有单行文本框（用户名输入框）
$("#loginForm :text").css("width", "200px");
// 2. 匹配表单中的所有单选框（性别选择）
$("#loginForm :radio").css("margin", "0 5px");
// 3. 匹配表单中的提交按钮（登录按钮）
$("#loginForm :submit").css("background", "#2c7be5").css("color", "white");
});
</script>jQuery DOM 操作：增删改查
jQuery 简化了原生 DOM 的增删改操作，提供了直观的方法用于 “创建节点、插入节点、删除节点、替换节点”。
1. 创建节点
通过 $(HTML 字符串) 直接创建 DOM 节点，并包装为 jQuery 对象：
$(function() {
// 1. 创建 <li> 节点（包含文本和属性）
var $newLi = $("<li id='hk' class='city'>香港</li>");
// 2. 创建 <div> 节点（包含子元素）
var $newDiv = $("<div class='box'><p>新创建的 div</p></div>");
// 3. 后续可通过插入方法添加到文档中
$("#cityList").append($newLi);
});2. 插入节点
创建节点后，需通过插入方法将其添加到文档树中。jQuery 提供两类插入方法（“内部插入” 和 “外部插入”），满足不同位置需求。
（1）内部插入（添加到元素内部）
将节点添加到目标元素的 “内部开头” 或 “内部结尾”：
| 方法名 | 作用描述 | 示例 |
|---|---|---|
$parent.append($child) |
将 $child 追加到 $parent 内部结尾 | $("#cityList").append($newLi) |
$child.appendTo($parent) |
将 $child 追加到 $parent 内部结尾（反向） | $newLi.appendTo($("#cityList")) |
$parent.prepend($child) |
将 $child 插入到 $parent 内部开头 | $("#cityList").prepend($newLi) |
$child.prependTo($parent) |
将 $child 插入到 $parent 内部开头（反向） | $newLi.prependTo($("#cityList")) |
示例：
<ul id="cityList">
<li>北京</li>
<li>上海</li>
</ul>
<script>
$(function() {
var $newLi1 = $("<li>广州</li>");
var $newLi2 = $("<li>深圳</li>");
// 1. 追加到内部结尾（北京、上海、广州）
$("#cityList").append($newLi1);
// 2. 插入到内部开头（深圳、北京、上海、广州）
$newLi2.prependTo($("#cityList"));
});
</script>（2）外部插入（添加到元素外部）
将节点添加到目标元素的 “前面” 或 “后面”：
| 方法名 | 作用描述 | 示例 |
|---|---|---|
$target.after($newNode) |
将 $newNode 插入到 $target 后面 | $("#beijing").after($newLi) |
$newNode.insertAfter($target) |
将 $newNode 插入到 $target 后面（反向） | $newLi.insertAfter($("#beijing")) |
$target.before($newNode) |
将 $newNode 插入到 $target 前面 | $("#shanghai").before($newLi) |
$newNode.insertBefore($target) |
将 $newNode 插入到 $target 前面（反向） | $newLi.insertBefore($("#shanghai")) |
示例：
<ul id="cityList">
<li id="beijing">北京</li>
<li id="shanghai">上海</li>
</ul>
<script>
$(function() {
var $newLi = $("<li>广州</li>");
// 1. 插入到北京后面（北京、广州、上海）
$("#beijing").after($newLi);
// 2. 插入到上海前面（北京、广州、深圳、上海）
$("<li>深圳</li>").insertBefore($("#shanghai"));
});
</script>3. 删除节点
jQuery 提供两种删除节点的方法，区别在于是否保留元素本身：
| 方法名 | 作用描述 | 示例 |
|---|---|---|
$element.remove() |
删除 $element 及其所有子节点（完全移除） | $("#beijing").remove() |
$element.empty() |
清空 $element 的所有子节点（保留自身） | $("#cityList").empty() |
示例：
<ul id="cityList">
<li id="beijing">北京</li>
<li id="shanghai">上海</li>
<li id="guangzhou">广州</li>
</ul>
<script>
$(function() {
// 1. 删除北京节点（从文档中完全移除）
$("#beijing").remove();
// 2. 清空 cityList 的所有子节点（cityList 本身保留）
$("#cityList").empty();
});
</script>4. 替换节点
通过 replaceWith() 或 replaceAll() 替换已有节点：
$(function() {
// 1. 创建新节点
var $newLi = $("<li>重庆</li>");
// 2. 替换上海节点（上海 → 重庆）
$("#shanghai").replaceWith($newLi);
// 3. 等价写法（反向）
$("<li>天津</li>").replaceAll($("#guangzhou"));
});jQuery 属性与样式控制
jQuery 提供便捷的方法用于 “操作元素属性、文本内容、样式”，无需手动处理原生 DOM 的属性读写差异。
1. 文本与 HTML 内容操作
| 方法名 | 作用描述 | 示例 |
|---|---|---|
$element.text() |
读取元素的文本内容（不含 HTML 标签） | var text = $("#box").text(); |
$element.text(value) |
设置元素的文本内容（HTML 标签会被转义） | $("#box").text("新文本"); |
$element.html() |
读取元素的 HTML 内容（含 HTML 标签） | var html = $("#box").html(); |
$element.html(value) |
设置元素的 HTML 内容（HTML 标签会解析） | $("#box").html("<p>新 HTML</p>"); |
$element.val() |
读取表单元素的 value 属性（如输入框、下拉框） | var username = $("input[name='username']").val(); |
$element.val(value) |
设置表单元素的 value 属性 | $("input[name='username']").val("张三"); |
示例：
<div id="box">原始文本 <span>带标签</span></div>
<input type="text" name="username" placeholder="请输入用户名">
<script>
$(function() {
// 1. 读取文本内容（不含 HTML 标签）
var text = $("#box").text();
console.log(text); // 输出："原始文本 带标签"
// 2. 设置 HTML 内容（解析 <strong> 标签）
$("#box").html("新 HTML <strong>加粗文本</strong>");
// 3. 设置输入框值
$("input[name='username']").val("李四");
// 4. 读取输入框值
var username = $("input[name='username']").val();
console.log(username); // 输出："李四"
});
</script>2. 元素属性操作
通过 attr() 和 removeAttr() 操作元素的自定义属性或原生属性：
| 方法名 | 作用描述 | 示例 |
|---|---|---|
$element.attr(name) |
读取元素的指定属性值 | var id = $("#box").attr("id"); |
$element.attr(name, value) |
设置元素的指定属性值 | $("#box").attr("class", "active"); |
$element.attr({name1: value1, name2: value2}) |
批量设置属性 | $("#box").attr({id: "newBox", title: "新盒子"}); |
$element.removeAttr(name) |
删除元素的指定属性 | $("#box").removeAttr("class"); |
示例：
<img id="img1" src="old.jpg" alt="旧图片">
<script>
$(function() {
// 1. 读取图片的 src 属性
var oldSrc = $("#img1").attr("src");
console.log(oldSrc); // 输出："old.jpg"
// 2. 批量设置属性（更换图片 src 和 alt）
$("#img1").attr({
src: "new.jpg",
alt: "新图片",
title: "点击查看大图" // 新增 title 属性
});
// 3. 删除 alt 属性
$("#img1").removeAttr("alt");
});
</script>3. 样式操作
jQuery 提供四类样式操作方法，覆盖 “添加、移除、切换、判断” 场景：
| 方法名 | 作用描述 | 示例 |
|---|---|---|
$element.addClass(className) |
为元素添加一个或多个类（多个类用空格分隔） | $("#box").addClass("active big"); |
$element.removeClass(className) |
为元素移除一个或多个类 | $("#box").removeClass("active"); |
$element.toggleClass(className) |
切换元素的类（有则移除，无则添加） | $("#box").toggleClass("active"); |
$element.hasClass(className) |
判断元素是否包含指定类（返回布尔值） | var hasActive = $("#box").hasClass("active"); |
$element.css(property) |
读取元素的 CSS 样式值 | var color = $("#box").css("color"); |
$element.css(property, value) |
设置元素的 CSS 样式 | $("#box").css("color", "red"); |
$element.css({prop1: val1, prop2: val2}) |
批量设置 CSS 样式 | $("#box").css({color: "red", fontSize: "16px"}); |
示例：
<style>
.active { color: red; font-weight: bold; }
.big { font-size: 20px; }
</style>
<div id="box">测试样式</div>
<button id="toggleBtn">切换样式</button>
<script>
$(function() {
// 1. 为 box 添加 active 和 big 类
$("#box").addClass("active big");
// 2. 读取 box 的 color 样式
var color = $("#box").css("color");
console.log(color); // 输出："rgb(255, 0, 0)"（red 的 RGB 值）
// 3. 点击按钮切换 active 类
$("#toggleBtn").click(function() {
$("#box").toggleClass("active");
// 判断是否包含 active 类
var hasActive = $("#box").hasClass("active");
$(this).text(hasActive ? "移除样式" : "添加样式");
});
});
</script>总结与最佳实践
1. 核心总结
- jQuery 对象：通过 前缀；
- 选择器：优先使用 CSS 兼容选择器（如
#id、.class），复杂场景用过滤选择器，避免过度依赖:eq等索引选择器（易因 DOM 结构变化失效）； - DOM 操作：创建节点后批量设置属性，再插入文档（减少重排）；删除节点用
remove()/empty()，避免内存泄漏； - 属性与样式：文本用
text()，HTML 用html()，表单值用val()；样式优先用addClass()/removeClass()（便于维护），而非直接css()。
2. 最佳实践建议
缓存选择器结果：避免重复调用选择器（如
$("#box")），将结果保存在变量中：// 低效：重复调用选择器 $("#box").text("文本1"); $("#box").css("color", "red"); // 高效：缓存选择器结果 var $box = $("#box"); $box.text("文本1"); $box.css("color", "red");链式调用：jQuery 方法支持链式调用，简化代码：
// 链式调用：一次完成多个操作 $("#box") .text("链式调用") .css("color", "blue") .addClass("active");避免使用
\*选择器：$("*")匹配所有元素，性能较低，如需全局操作，可缩小范围（如$("body *")）。事件绑定简化：后续学习 jQuery 事件时，可结合选择器直接绑定事件（如
$("button").click(function() {})），无需单独获取元素