Python
jQuery 核心知识详解：基础、DOM 操作与插件应用
jQuery 核心知识详解：基础、DOM 操作与插件应用 文章目录 从零开始学 jQuery jQuery 核心知识 一、jQuery 简介：为什么选择它？ 核心用途 核心优势 下载与引入 二、jQuery 语法：基础与选择器 常用选择器 ready 方法：确保文档加载完成 三、DOM 元素操作：内容、属性、样式 操作元素内容 操作元素属性 操作元素样式 （1）操作宽度与高度 （2）操作行内样式…
jQuery 核心知识详解：基础、DOM 操作与插件应用 文章目录 从零开始学 jQuery jQuery 核心知识 一、jQuery 简介：为什么选择它？ 核心用途 核心优势 下载与引入 二、jQuery 语法：基础与选择器 常用选择器 ready 方法：确保文档加载完成 三、DOM 元素操作：内容、属性、样式 操作元素内容 操作元素属性 操作元素样式 （1）操作宽度与高度 （2）操作行内样式…
在前端开发中，JavaScript 虽能实现 DOM 操作、事件处理等核心功能，但代码往往冗长繁琐，且浏览器兼容性问题突出。而 jQuery 的出现，以'write less, do more'为设计理念，对 JavaScript 进行了高效封装，极大简化了前端开发流程。
jQuery 由美国人 John Resig 于 2006 年创建，是对 JavaScript 对象和函数的轻量级封装库，至今仍是前端开发中处理 DOM、事件的常用工具。
append()、remove()）。$("li").css("color", "red") 可将所有 <li> 文字设为红色）。引入：在 HTML 文件中通过 <script> 标签引入本地 jQuery 文件，需注意引入顺序（先引入 jQuery，再引入自定义 JS）：
<!-- 引入本地 jQuery 文件（路径需根据实际项目结构调整） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 引入自定义 JS（需在 jQuery 之后） -->
<script type="text/javascript" src="js/custom.js"></script>
jQuery 的核心语法是 $(选择器|DOM 元素)，返回的是一个jQuery 对象集合（即使仅匹配一个元素，也会封装为集合），需通过 jQuery 方法操作（而非原生 DOM 方法）。
jQuery 支持多种选择器，覆盖大多数场景，以下是高频用法及示例：
| 选择器类型 | 语法示例 | 说明 |
|---|---|---|
| 标签选择器 | $("h1") | 选择页面中所有 <h1> 标签 |
| 类选择器 | $(".box") | 选择所有类名为 box 的元素 |
| ID 选择器 | $("#loginBtn") | 选择 ID 为 loginBtn 的元素（仅返回第一个，ID 应唯一） |
| 并集选择器 | $("h1, div, .box") | 选择所有 <h1>、<div> 标签及类名为 box 的元素 |
| 后代选择器 | $(".box input") | 选择类名为 box 的元素下所有层级的 <input>（含子、孙级） |
| 子代选择器 | $(".box > input") | 选择类名为 box 的元素下直接子级的 <input>（仅一级） |
| 属性选择器 | $("[type='text']") | 选择所有 type 属性值为 text 的元素 |
| 过滤选择器 - 首/尾 | $("div:first")/$("div:last") | 选择所有 <div> 中的第一个/最后一个 |
| 过滤选择器 - 奇偶下标 | $("div:even")/$("div:odd") | 选择所有 <div> 中下标为偶数/奇数的元素（下标从 0 开始） |
| 过滤选择器 - 指定下标 | $("div:eq(2)") | 选择所有 <div> 中下标为 2 的元素（精准匹配单个元素） |
| 过滤选择器 - 范围下标 | $("div:gt(1)")/$("div:lt(1)") | 选择所有 <div> 中下标大于 1/小于 1 的元素 |
| 过滤选择器 - 焦点 | $("input:focus") | 选择当前获得焦点的 <input> 元素 |
| 文档选择器 | $(document) | 选择整个文档对象（常用于绑定文档加载事件） |
注意：jQuery 选择器返回的是 jQuery 对象集合，若需使用原生 DOM 方法（如
innerHTML、textContent），需通过下标（$("div")[0]）或get(0)转换为原生 DOM 元素。
ready 方法用于指定'DOM 树加载完成后执行的代码'，避免因 DOM 未加载而导致的元素查找失败问题，有两种常用写法：
// 1. 完整写法：明确绑定 document 对象
$(document).ready(function(){
// DOM 加载完成后执行的代码（如操作 DOM、绑定事件）
console.log("DOM 已加载完成（完整写法）");
});
// 2. 简化写法（推荐）：省略 document 和 ready 关键字
$(function(){
// 功能与完整写法一致，代码更简洁
console.log("DOM 已加载完成（简化写法）");
});
区别于
window.onload：ready仅需 DOM 树加载完成即可执行，无需等待图片、样式表等资源；而window.onload需等待所有资源加载完成后才执行，因此ready执行时机更早。
jQuery 提供了简洁的方法操作 DOM 元素的内容、属性和样式，无需手动处理原生 DOM 对象的兼容性问题。
根据需求选择 text() 或 html() 方法，前者处理纯文本，后者支持 HTML 标签解析：
text()：获取/设置元素的纯文本内容（不解析 HTML 标签）。html()：获取/设置元素的HTML 内容（会解析 HTML 标签，生成对应 DOM 结构）。示例：
<body>
<div class="error"></div>
<div class="info"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 设置纯文本（不解析 HTML 标签）
$(".error").text("账号或密码错误");
// 若用 text() 设置 HTML 标签，会原样显示标签文本
// $(".error").text("<span>账号或密码错误</span>"); // 显示：<span>账号或密码错误</span>
// 2. 设置 HTML 内容（解析 HTML 标签）
$(".info").html("<h1>欢迎登录系统</h1>");
// 会生成 <h1> 标签并显示
// 3. 获取内容
console.log($(".error").text()); // 输出：账号或密码错误
console.log($(".info").html()); // 输出：<h1>欢迎登录系统</h1>
// 4. 处理 jQuery 集合：若匹配多个元素，text()/html() 会批量操作
$("div").text("批量设置文本"); // 所有 <div> 都会显示'批量设置文本'
});
</script>
</body>
根据属性类型选择对应方法，val() 专门处理表单元素的 value 属性，attr() 处理普通属性和自定义属性：
val()：获取/设置 <input>、<select>、<textarea> 等表单元素的 value 属性。attr(属性名)：获取元素指定属性的值（支持原生属性和自定义属性）。attr(属性名，属性值)：设置元素指定属性的值。removeAttr(属性名)：删除元素指定属性（包括自定义属性）。示例：
<body>
<!-- 表单元素 -->
<input type="text" value="初始值" id="userInput" data-user="admin">
<!-- 自定义属性元素 -->
<div id="content" data-info="这是测试内容"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 操作表单元素的 value 属性（推荐用 val()）
let inputVal = $("#userInput").val();
console.log("初始 value：", inputVal); // 输出：初始值
$("#userInput").val("修改后的 value"); // 设置新的 value
// 2. 操作普通属性（如 type）
let inputType = $("#userInput").attr("type");
console.log("input 类型：", inputType); // 输出：text
$("#userInput").attr("type", "password"); // 将 text 改为 password
// 3. 操作自定义属性（data-* 开头的属性）
let userData = $("#userInput").attr("data-user");
console.log("自定义属性 data-user：", userData); // 输出：admin
let contentInfo = $("#content").attr("data-info");
console.log("自定义属性 data-info：", contentInfo); // 输出：这是测试内容
// 4. 修改自定义属性
$("#content").attr("data-info", "修改后的测试内容");
// 5. 删除属性
$("#content").removeAttr("data-info");
console.log("删除后 data-info：", $("#content").attr("data-info")); // 输出：undefined
});
</script>
</body>
jQuery 支持操作行内样式和类样式，类样式更适合批量样式管理，行内样式适合动态修改单个样式。
width() 和 height() 方法用于获取/设置元素的宽高，默认操作'内容区'尺寸（不含 padding、border、margin）：
width()：获取/设置元素宽度。height()：获取/设置元素高度。innerWidth()（内容区+padding）、outerWidth()（内容区+padding+border）、outerWidth(true)（内容区+padding+border+margin），高度同理。示例：
<body>
<div class="box" style="width: 200px;padding: 10px;border: 2px solid #000;margin: 5px;"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let box = $(".box");
// 1. 获取宽度（默认获取内容区宽度，不含 padding、border）
let contentWidth = box.width();
console.log("内容区宽度：", contentWidth); // 输出：200
// 2. 获取包含 padding 的宽度
let innerW = box.innerWidth();
console.log("内容区+padding 宽度：", innerW); // 输出：200 + 10*2 = 220
// 3. 获取包含 padding+border 的宽度
let outerW = box.outerWidth();
console.log("内容区+padding+border 宽度：", outerW); // 输出：220 + 2*2 = 224
// 4. 获取包含 padding+border+margin 的宽度
let outerWWithMargin = box.outerWidth(true);
console.log("完整宽度（含 margin）：", outerWWithMargin); // 输出：224 + 5*2 = 234
// 5. 设置宽度（默认设置内容区宽度）
box.width("300px");
console.log("设置后内容区宽度：", box.width()); // 输出：300
});
</script>
</body>
css() 方法用于获取/设置元素的行内样式，支持单个样式和批量样式设置，需注意样式属性的命名规则（驼峰命名法）：
css(样式属性名)：获取元素指定行内样式的值（若未设置行内样式，会返回计算后的样式值）。css(样式属性名，样式属性值)：设置元素指定行内样式。css({样式 1: 值 1, 样式 2: 值 2, ...})：批量设置行内样式（样式属性含中横线时，需改为驼峰命名，如 font-size → fontSize）。示例：
<body>
<div class="info">这是测试文本</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let info = $(".info");
// 1. 单个样式设置（驼峰命名）
info.css("backgroundColor", "skyblue"); // 等价于 CSS 中的 background-color: skyblue
info.css("fontSize", "18px"); // 等价于 CSS 中的 font-size: 18px
// 2. 批量样式设置（对象形式）
info.css({
color: "white", // 文本颜色（无中横线，直接写 color）
padding: "10px 15px", // 内边距（无中横线，直接写 padding）
border: "1px solid #ccc", // 边框（复合属性可直接写）
borderRadius: "5px" // 等价于 CSS 中的 border-radius: 5px
});
// 3. 获取样式值
let bgColor = info.css("backgroundColor");
console.log("背景色：", bgColor); // 输出：rgb(135, 206, 235)（浏览器计算后的颜色值）
let fontSize = info.css("fontSize");
console.log("字体大小：", fontSize); // 输出：18px
});
</script>
</body>
类样式通过预定义 CSS 类来管理样式，适合批量样式切换（如'激活态''隐藏态'），常用方法如下：
addClass(类名)：为元素添加指定类样式（可添加多个类，用空格分隔，如 addClass("active highlight")）。removeClass(类名)：为元素移除指定类样式（可移除多个类，用空格分隔）。toggleClass(类名)：切换类样式（元素有该类则移除，无则添加）。hasClass(类名)：判断元素是否包含指定类样式，返回布尔值（true 包含，false 不包含）。示例：
<style>
/* 预定义类样式 */
.active {
background-color: #4CAF50;
color: white;
padding: 8px 12px;
border-radius: 4px;
}
.highlight {
border: 2px solid #ff9800;
box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}
</style>
<body>
<button id="btn">点击切换样式</button>
<div class="text">这是一段可激活的文本</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let btn = $("#btn");
let text = $(".text");
// 按钮点击事件：切换类样式
btn.click(function(){
// 1. 切换 active 类（有则移除，无则添加）
text.toggleClass("active");
// 2. 判断是否包含 active 类，决定是否添加 highlight 类
if(text.hasClass("active")){
text.addClass("highlight");
} else {
text.removeClass("highlight");
}
// 3. 打印当前类状态
console.log("包含 active 类：", text.hasClass("active"));
console.log("包含 highlight 类：", text.hasClass("highlight"));
});
});
</script>
</body>
jQuery 简化了事件绑定流程，支持直接绑定（静态元素）和委托绑定（动态元素），覆盖大多数用户交互场景。
| 事件名 | 说明 | 适用元素 |
|---|---|---|
click | 鼠标左键单击 | 所有可交互元素（按钮、链接、div 等） |
dblclick | 鼠标左键双击 | 同 click |
blur | 元素失去焦点 | 表单元素（input、select、textarea 等） |
focus | 元素获得焦点 | 同 blur |
keydown | 键盘按键按下（按住时持续触发） | 所有可获取焦点的元素 |
keyup | 键盘按键释放 | 同 keydown |
mouseenter | 鼠标移入元素（不冒泡，子元素不触发） | 所有元素 |
mouseleave | 鼠标移出元素（不冒泡，子元素不触发） | 同 mouseenter |
mousemove | 鼠标在元素内移动（持续触发） | 所有元素 |
change | 元素内容改变（失去焦点后触发） | 表单元素（input、select、textarea 等） |
submit | 表单提交（点击提交按钮或按 Enter 触发） | <form> 元素 |
静态元素指页面加载时已存在的元素，可通过'事件名方法'或 on() 方法直接绑定事件：
$(选择器).事件名 (回调函数)。on() 方法）：$(选择器).on("事件名", 回调函数)（更灵活，支持解绑）。示例：
<body>
<input type="text" id="userInput" placeholder="请输入内容">
<button id="submitBtn">提交</button>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 输入框焦点事件（focus + blur）
$("#userInput").focus(function(){
// 获得焦点：添加边框样式
$(this).css("border", "2px solid #4CAF50");
}).blur(function(){
// 失去焦点：恢复默认边框
$(this).css("border", "1px solid #ccc");
// 失去焦点时获取输入值
let inputVal = $(this).val();
console.log("输入内容：", inputVal);
});
// 2. 按钮点击事件（两种写法）
// 写法 1：事件名方法
$("#submitBtn").click(function(){
alert("按钮被点击（直接绑定）");
});
// 写法 2：on() 方法（后续可通过 off() 解绑）
// $("#submitBtn").on("click", function() {
// alert("按钮被点击（on 绑定）");
// });
// 3. 解绑事件（如需移除点击事件）
// $("#submitBtn").off("click");
});
</script>
</body>
动态元素指页面加载后通过 JS 动态生成的元素（如点击按钮添加的 <tr>、<div> 等），直接绑定事件无效，需用 on() 委托绑定（将事件委托给静态父元素）：
$(静态父元素).on("事件名", 动态元素选择器，回调函数)。示例：
<body>
<button id="addRowBtn">添加表格行</button>
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 动态生成的行将插入这里 -->
</tbody>
</table>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let rowCount = 1; // 行计数器，用于生成不同姓名
// 1. 点击按钮添加动态行
$("#addRowBtn").click(function(){
let newRow = `
<tr>
<td>用户${rowCount}</td>
<td>
<button>删除</button>
</td>
</tr>
`;
$("#tableBody").append(newRow); // 将新行插入表格 tbody
rowCount++;
});
// 2. 委托绑定：为动态生成的 .deleteBtn 绑定点击事件
// 父元素 #tableBody 是静态元素（页面加载时已存在）
$("#tableBody").on("click", ".deleteBtn", function(){
// 确认删除
let isConfirm = confirm("确定要删除这一行吗？");
if(isConfirm){
// 查找当前按钮最近的 <tr> 父元素并删除（比 parent().parent() 更稳定）
$(this).closest("tr").remove();
console.log("已删除一行");
}
});
});
</script>
</body>
节点操作是 DOM 操作的核心，jQuery 提供了直观的方法处理节点的创建、插入、替换、删除和遍历，简化原生 JS 的复杂流程。
$(HTML 字符串) 语法创建 jQuery 节点对象（后续可通过插入方法添加到 DOM 树）。$("#id")、$(".class")）获取已存在的节点，返回 jQuery 集合。$(原生 DOM 元素) 将原生 DOM 元素转换为 jQuery 对象，以便使用 jQuery 方法。示例：
<body>
<div id="container"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 创建节点：创建一个 <div> 节点（包含子元素和属性）
let newDiv = $(`
<div>
<p>这是创建的新节点</p>
<button>节点按钮</button>
</div>
`);
// 2. 获取节点：获取页面中已存在的 #container 节点
let container = $("#container");
// 3. 转换节点：将原生 DOM 元素转换为 jQuery 对象
let nativeDom = document.getElementById("container"); // 原生 DOM 元素
let jqueryDom = $(nativeDom); // 转换为 jQuery 对象
console.log("原生 DOM 元素：", nativeDom);
console.log("转换后的 jQuery 对象：", jqueryDom);
// 4. 将创建的节点添加到容器（后续'插入节点'会详细讲解）
container.append(newDiv);
});
</script>
</body>
插入节点用于将创建的节点添加到 DOM 树的指定位置，jQuery 提供了多种插入方法，可根据需求选择'内部插入'或'外部插入'：
| 插入类型 | 方法 | 说明 | 示例 |
|---|---|---|---|
| 内部插入 - 末尾 | parent.append(child) | 将 child 节点插入到 parent 节点的内部末尾（子元素的最后一位） | $("#container").append(newDiv) |
| 内部插入 - 末尾 | child.appendTo(parent) | 与 append() 相反，将 child 节点插入到 parent 节点的内部末尾 | newDiv.appendTo($("#container")) |
| 内部插入 - 开头 | parent.prepend(child) | 将 child 节点插入到 parent 节点的内部开头（子元素的第一位） | $("#container").prepend(newDiv) |
| 内部插入 - 开头 | child.prependTo(parent) | 与 prepend() 相反，将 child 节点插入到 parent 节点的内部开头 | newDiv.prependTo($("#container")) |
| 外部插入 - 后面 | sibling.after(newNode) | 将 newNode 节点插入到 sibling 节点的外部后面（与 sibling 同级） | $("#box").after(newDiv) |
| 外部插入 - 后面 | newNode.insertAfter(sibling) | 与 after() 相反，将 newNode 节点插入到 sibling 节点的外部后面 | newDiv.insertAfter($("#box")) |
| 外部插入 - 前面 | sibling.before(newNode) | 将 newNode 节点插入到 sibling 节点的外部前面（与 sibling 同级） | $("#box").before(newDiv) |
| 外部插入 - 前面 | newNode.insertBefore(sibling) | 与 before() 相反，将 newNode 节点插入到 sibling 节点的外部前面 | newDiv.insertBefore($("#box")) |
示例：
<body>
<div id="container">
<p>容器内原有内容</p>
</div>
<div id="sibling">参考同级元素</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 创建要插入的节点
let newNode = $("<div>这是插入的节点</div>");
// 1. 内部插入：插入到 #container 内部
// 内部末尾（原有 <p> 后面）
$("#container").append(newNode.clone()); // clone() 复制节点，避免节点被移动
// 内部开头（原有 <p> 前面）
$("#container").prepend(newNode.clone());
// 2. 外部插入：插入到 #sibling 同级位置
// 外部后面（#sibling 后面）
$("#sibling").after(newNode.clone());
// 外部前面（#sibling 前面）
$("#sibling").before(newNode);
});
</script>
</body>
target.replaceWith(newNode)：用 newNode 节点替换 target 节点（target 节点会从 DOM 树中移除）。node.empty()：清空 node 节点的所有子内容（包括子节点和文本），但 node 节点本身保留。node.remove()：将 node 节点（包括所有子内容）从 DOM 树中彻底移除，后续无法再使用该节点。示例：
<body>
<div id="oldDiv">这是要被替换的旧节点</div>
<div id="deleteDiv">
<p>这是要被删除的内容</p>
<input type="text" placeholder="输入框">
</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 替换节点：用新节点替换 #oldDiv
let newDiv = $("<div>这是替换后的新节点</div>");
$("#oldDiv").replaceWith(newDiv); // 替换后，#oldDiv 已从 DOM 树中移除，无法再获取
console.log("替换后 #oldDiv 是否存在：", $("#oldDiv").length); // 输出：0
// 2. 清空节点：清空 #deleteDiv 的子内容（节点本身保留）
$("#deleteDiv").empty();
console.log("清空后 #deleteDiv 的子内容：", $("#deleteDiv").html()); // 输出：""
// 3. 彻底删除节点：删除 #deleteDiv（包括节点本身）
$("#deleteDiv").remove();
console.log("删除后 #deleteDiv 是否存在：", $("#deleteDiv").length); // 输出：0
});
</script>
</body>
查找节点用于在已有的 DOM 树中查找指定关系的节点（如父节点、子节点、同辈节点等），常用方法如下：
| 方法 | 说明 | 示例 |
|---|---|---|
children([选择器]) | 获取当前节点的直接子节点（仅一级，不含孙级），可选参数'选择器'用于筛选子节点 | $("#container").children("div")（获取 #container 下直接子级的 div） |
parent() | 获取当前节点的直接父节点（仅一级） | $(".child").parent()（获取 .child 的直接父节点） |
closest(选择器) | 沿 DOM 树向上查找最近的匹配选择器的父节点（包括当前节点本身） | $(".btn").closest("form")（查找 .btn 最近的 form 父节点） |
next([选择器]) | 获取当前节点的紧邻的下一个同辈节点，可选参数'选择器'用于筛选 | $("li:first").next()（获取第一个 li 的下一个同辈 li） |
prev([选择器]) | 获取当前节点的紧邻的上一个同辈节点，可选参数'选择器'用于筛选 | $("li:last").prev()（获取最后一个 li 的上一个同辈 li） |
siblings([选择器]) | 获取当前节点的所有同辈节点（不包括自身），可选参数'选择器'用于筛选 | $("li.active").siblings()（获取 .active li 的所有同辈 li） |
find(选择器) | 在当前节点的所有子节点（包括子、孙、曾孙等） 中查找匹配选择器的节点 | $("#container").find(".item")（获取 #container 下所有 .item 节点） |
first() | 获取 jQuery 集合中的第一个节点 | $("li").first()（获取所有 li 中的第一个） |
last() | 获取 jQuery 集合中的最后一个节点 | $("li").last()（获取所有 li 中的最后一个） |
示例：
<body>
<div class="grandparent">
<div class="parent">
<div class="child item">子节点 1</div>
<div class="child">子节点 2</div>
<div class="child item">子节点 3</div>
</div>
<div class="sibling">同辈节点</div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let child2 = $("div.child:eq(1)"); // 获取'子节点 2'
// 1. 查找直接子节点
let parentChildren = $(".parent").children();
console.log("parent 的直接子节点数量：", parentChildren.length); // 输出：3
let parentItemChildren = $(".parent").children(".item");
console.log("parent 下带 .item 的直接子节点数量：", parentItemChildren.length); // 输出：2
// 2. 查找直接父节点
let child2Parent = child2.parent();
console.log("child2 的直接父节点类名：", child2Parent.attr("class")); // 输出：parent
// 3. 查找最近的匹配父节点
let closestGrandparent = child2.closest(".grandparent");
console.log("child2 最近的 .grandparent 父节点：", closestGrandparent.attr("class")); // 输出：grandparent
// 4. 查找同辈节点
let child2Next = child2.next(); // 下一个同辈节点
console.log("child2 的下一个同辈节点内容：", child2Next.text()); // 输出：子节点 3
let child2Prev = child2.prev(); // 上一个同辈节点
console.log("child2 的上一个同辈节点内容：", child2Prev.text()); // 输出：子节点 1
let child2Siblings = child2.siblings(".item"); // 所有带 .item 的同辈节点
console.log("child2 带 .item 的同辈节点数量：", child2Siblings.length); // 输出：2
// 5. 查找所有子节点（含多级）
let allItems = $(".grandparent").find(".item");
console.log(".grandparent 下所有 .item 节点数量：", allItems.length); // 输出：2
// 6. 查找集合中的第一个/最后一个节点
let firstChild = $("div.child").first();
console.log("所有 child 中的第一个节点内容：", firstChild.text()); // 输出：子节点 1
let lastChild = $("div.child").last();
console.log("所有 child 中的最后一个节点内容：", lastChild.text()); // 输出：子节点 3
});
</script>
</body>
当需要对 jQuery 集合中的每个节点执行相同操作时，可使用 each() 方法遍历集合，回调函数中可获取每个节点的下标和原生 DOM 元素：
$(选择器).each(function(index, nativeDom) { ... })。
index：当前节点在集合中的下标（从 0 开始）。nativeDom：当前节点的原生 DOM 元素（如需使用 jQuery 方法，需转换为 jQuery 对象：$(nativeDom)）。示例：
<body>
<ul id="fruitList">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 遍历所有 li 节点
$("#fruitList li").each(function(index, nativeDom){
// 1. 获取下标和原生 DOM 元素的内容
let fruitName = nativeDom.textContent; // 原生 DOM 方法
console.log(`下标 ${index}：${fruitName}`); // 输出：下标 0：苹果，下标 1：香蕉，等
// 2. 转换为 jQuery 对象，执行 jQuery 方法
let $currentLi = $(nativeDom);
// 下标为偶数的 li 设为红色，奇数设为蓝色
if(index % 2 === 0){
$currentLi.css("color", "red");
} else {
$currentLi.css("color", "blue");
}
// 3. 为每个 li 添加点击事件
$currentLi.click(function(){
alert(`你点击了：${fruitName}`);
});
});
});
</script>
</body>
表单验证是前端常见需求（如注册、登录表单），jQuery Validate 插件提供了丰富的验证规则和自定义功能，无需手动编写复杂的验证逻辑，极大提升开发效率。
jQuery Validate 内置了多种常用验证规则，可直接在表单元素或配置中使用：
| 规则 | 描述 | 适用场景 |
|---|---|---|
required: true | 必须输入的字段（不能为空） | 账号、密码、邮箱等必填项 |
remote: "url" | 通过 Ajax 请求验证输入值（如验证账号是否已存在） | 唯一性验证（账号、手机号等） |
email: true | 必须输入正确格式的电子邮件（如 [email protected]） | 邮箱输入框 |
url: true | 必须输入正确格式的网址（如 http://xxx.com 或 https://xxx.com） | 个人主页、链接输入框 |
date: true | 必须输入正确格式的日期（如 2024/05/20），注意：IE6 不兼容 | 日期输入框（需谨慎使用） |
dateISO: true | 必须输入 ISO 格式的日期（如 2024-05-20），仅验证格式，不验证有效性 | 日期输入框（推荐使用） |
number: true | 必须输入合法的数字（支持负数、小数） | 年龄、金额等数字输入框 |
digits: true | 必须输入整数（不支持负数、小数） | 手机号、身份证号（纯数字部分）等 |
creditcard: true | 必须输入合法的信用卡号（验证格式和校验位） | 信用卡号输入框 |
equalTo: "#targetId" | 输入值必须与 #targetId 元素的值一致 | 确认密码、确认邮箱等 |
accept: ".(jpg 或 png 或 gif)$" | 输入的文件后缀必须匹配指定格式（仅用于文件上传） | 文件上传输入框（如头像上传） |
maxlength: 15 | 输入长度最多为 15 个字符（汉字算 1 个字符） | 账号、昵称等（限制最大长度） |
minlength: 8 | 输入长度最少为 8 个字符（汉字算 1 个字符） | 密码等（限制最小长度） |
rangelength: [8, 15] | 输入长度必须介于 8~15 个字符之间（汉字算 1 个字符） | 账号、密码等（限制长度范围） |
max: 100 | 输入值不能大于 100（适用于数字） | 年龄（如最大 100 岁）、数量等 |
min: 0 | 输入值不能小于 0（适用于数字） | 金额、数量等（非负） |
range: [0, 100] | 输入值必须介于 0~100 之间（适用于数字） | 年龄（0 |
使用 jQuery Validate 插件需遵循以下步骤，核心是'引入文件→编写表单→初始化验证'：
需引入 3 个文件（jQuery 核心库、Validate 插件核心库、中文提示库，中文提示库可选）：
<!-- 1. 引入 jQuery 核心库（必须在 Validate 之前） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 2. 引入 Validate 插件核心库 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<!-- 3. 引入中文提示库（可选，用于将默认英文提示改为中文） -->
<script type="text/javascript" src="js/messages_zh.js"></script>
表单元素需添加 name 属性（Validate 插件通过 name 绑定验证规则），且建议为必填项添加 required 属性（或在配置中设置 required: true）：
<form id="registerForm" method="post" action="register.php">
<!-- 账号：必填，长度 8~15 字符 -->
<div class="form-item">
<label for="username">账号：</label>
<input type="text" id="username" name="username" placeholder="请输入账号（8-15 字符）">
</div>
<!-- 密码：必填，长度 8~20 字符 -->
<div class="form-item">
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码（8-20 字符）">
</div>
<!-- 确认密码：必填，需与密码一致 -->
<div class="form-item">
<label for="confirmPwd">确认密码：</label>
<input type="password" id="confirmPwd" name="confirmPwd" placeholder="请再次输入密码">
</div>
<!-- 邮箱：必填，格式正确 -->
<div class="form-item">
<label for="email">邮箱：</label>
<input type="text" id="email" name="email" placeholder="请输入邮箱（如 [email protected]）">
</div>
<!-- 年龄：必填，数字，0~120 之间 -->
<div class="form-item">
<label for="age">年龄：</label>
<input type="text" id="age" name="age" placeholder="请输入年龄（0-120）">
</div>
<!-- 提交按钮 -->
<div class="form-item">
<button type="submit" class="submit-btn">注册</button>
</div>
</form>
通过 $("#formId").validate({ ... }) 初始化验证，配置中可设置验证规则（rules）、提示信息（messages）、验证通过后的回调（submitHandler）等：
$(function(){
// 初始化表单验证
$("#registerForm").validate({
// 1. 验证规则：key 为表单元素的 name 属性，value 为规则对象
rules: {
username: {
required: true, // 必填
minlength: 8, // 最小长度 8
maxlength: 15 // 最大长度 15
},
password: {
required: true,
minlength: 8,
maxlength: 20
},
confirmPwd: {
required: true,
equalTo: "#password" // 必须与 #password 的值一致
},
email: {
required: true,
email: true // 验证邮箱格式
},
age: {
required: true,
number: true, // 必须是数字
range: [0, 120] // 范围 0~120
}
},
// 2. 自定义提示信息：key 与 rules 对应，value 为提示文本
messages: {
username: {
required: "请输入账号",
minlength: "账号长度不能小于 8 个字符",
maxlength: "账号长度不能超过 15 个字符"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 8 个字符",
maxlength: "密码长度不能超过 20 个字符"
},
confirmPwd: {
required: "请确认密码",
equalTo: "两次输入的密码不一致"
},
email: {
required: "请输入邮箱",
email: "请输入正确的邮箱格式（如 [email protected]）"
},
age: {
required: "请输入年龄",
number: "请输入合法的数字",
range: "年龄必须在 0~120 之间"
}
},
// 3. 验证通过后的回调：表单验证全部通过后执行
submitHandler: function(form){
// 原生 JS 提交表单（form 为当前表单的原生 DOM 对象）
form.submit();
}
});
});
submitHandler 中的逻辑（如 Ajax 提交）。messages_zh.js 后，默认提示文本会改为中文（如'这是必填字段''请输入正确的邮箱格式'），无需手动编写所有提示信息。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online