小菜鸟

java菜鸟号正在起航

0%

jQuery基本操作

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 18k 阅读时长 ≈ 16 分钟

jQuery 基本操作详解：选择器、DOM 操作与样式控制全指南

jQuery 是一款经典的 JavaScript 库，其核心价值在于 “简化 DOM 操作、统一浏览器兼容性、提供便捷的工具方法”。掌握 jQuery 的基本操作（选择器、DOM 增删改、属性与样式控制）是高效开发前端页面的基础。从 “jQuery 对象基础→选择器体系→DOM 操作→样式与属性控制” 四个维度，系统讲解 jQuery 的核心用法与实战技巧，帮你快速上手 jQuery 开发。

jQuery 基础：引入与对象概念

在使用 jQuery 前，需先理解 “如何引入库” 和 “jQuery 对象与 DOM 对象的区别”—— 这是避免后续操作报错的关键。

1. 引入 jQuery 库

jQuery 是外部库，需通过 <script> 标签引入后才能使用，常见引入方式有两种：

（1）本地引入（推荐开发环境）

将 jQuery 文件下载到本地项目，通过相对路径引入：

1
2
3
4
5
6
7
<!-- 引入本地 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）直接引入，无需下载文件，加载速度快：

1
2
<!-- 百度 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
2
3
4
5
6
7
8
// 1. 获取原生 DOM 对象
var domBtn = document.getElementById("btn");

// 2. 转为 jQuery 对象
var $jqueryBtn = $(domBtn);

// 3. 使用 jQuery 方法（如设置文本）
$jqueryBtn.text("点击我");
（2）jQuery 对象 → DOM 对象

jQuery 对象是 “类数组对象”，可通过数组下标或 get(index) 方法获取原生 DOM 对象：

1
2
3
4
5
6
7
8
9
// 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 整个页面（图片、样式表）加载完成后执行 仅执行最后一个 兼容性好（适合旧浏览器）
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
// 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" 的元素
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>（无需紧邻）
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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") 匹配当前聚焦的输入框、按钮等
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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") 匹配所有文件上传框
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 对象：

1
2
3
4
5
6
7
8
9
10
$(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"))
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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"))
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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()
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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() 替换已有节点：

1
2
3
4
5
6
7
8
9
10
$(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("张三");
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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");
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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"});
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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. 最佳实践建议

  1. 缓存选择器结果：避免重复调用选择器（如 $("#box")），将结果保存在变量中：

    1
    2
    3
    4
    5
    6
    7
    8
    // 低效：重复调用选择器
    $("#box").text("文本1");
    $("#box").css("color", "red");

    // 高效：缓存选择器结果
    var $box = $("#box");
    $box.text("文本1");
    $box.css("color", "red");

  2. 链式调用：jQuery 方法支持链式调用，简化代码：

    1
    2
    3
    4
    5
    // 链式调用：一次完成多个操作
    $("#box")
      .text("链式调用")
      .css("color", "blue")
      .addClass("active");

  3. 避免使用 \* 选择器：$("*") 匹配所有元素，性能较低，如需全局操作，可缩小范围（如 $("body *")）。

  4. 事件绑定简化：后续学习 jQuery 事件时，可结合选择器直接绑定事件（如 $("button").click(function() {})），无需单独获取元素

相关文章

欢迎关注我的其它发布渠道