【Java Web学习 | 第15篇】jQuery（万字长文警告）
🌈个人主页: Hygge_Code🔥热门专栏:从0开始学习Java | Linux学习| 计算机网络💫个人格言: “既然选择了远方，便不顾风雨兼程”
文章目录
- 从零开始学 jQuery
从零开始学 jQuery
在前端开发中，JavaScript 虽能实现 DOM 操作、事件处理等核心功能，但代码往往冗长繁琐，且浏览器兼容性问题突出。而 jQuery 的出现，以“write less, do more”为设计理念，对 JavaScript 进行了高效封装，极大简化了前端开发流程。
jQuery 核心知识🥝
一、jQuery 简介：为什么选择它？
jQuery 由美国人 John Resig 于 2006 年创建，是对 JavaScript 对象和函数的轻量级封装库，至今仍是前端开发中处理 DOM、事件的常用工具。
1. 核心用途
- 便捷访问和操作 DOM 元素（替代繁琐的原生 JS DOM 方法）。
- 灵活控制页面样式（行内样式、类样式的添加/移除/切换）。
- 简化页面事件处理（点击、焦点、键盘等事件的绑定与解绑）。
- 支持扩展插件（如表单验证插件 Validate、轮播图插件 Slick 等）。
- 与 Ajax 技术无缝结合（简化前后端数据交互代码）。
2. 核心优势
- 体积小：压缩后的 jQuery 3.x 版本仅约 100KB，加载速度快，对页面性能影响小。
- 强大选择器：支持 CSS 选择器、过滤选择器等，可快速定位单个或多个元素。
- DOM 封装完善：将原生 JS 中复杂的 DOM 操作（如插入、删除节点）封装为简单方法（如
append()、remove()）。 - 浏览器兼容性好：自动处理 IE6+、Chrome、Firefox 等浏览器的差异，无需手动编写兼容代码。
- 隐式迭代：操作多个元素时无需循环，jQuery 会自动遍历集合并批量处理（例：
$("li").css("color", "red")可将所有<li>文字设为红色）。 - 丰富插件生态：社区提供大量成熟插件，覆盖表单验证、图表、动画等场景，降低开发成本。
3. 下载与引入
- 下载：从 jQuery 官网 下载最新版本，推荐选择 jQuery 3.x（不支持 IE6-8，若需兼容旧浏览器可选择 1.x 版本）。
引入：在 HTML 文件中通过 <script> 标签引入本地 jQuery 文件，需注意引入顺序（先引入 jQuery，再引入自定义 JS）：
<!-- 引入本地 jQuery 文件（路径需根据实际项目结构调整） --><scripttype="text/javascript"src="js/jquery-3.6.0.js"></script><!-- 引入自定义 JS（需在 jQuery 之后） --><scripttype="text/javascript"src="js/custom.js"></script>二、jQuery 语法：基础与选择器
jQuery 的核心语法是 $(选择器|DOM元素)，返回的是一个jQuery 对象集合（即使仅匹配一个元素，也会封装为集合），需通过 jQuery 方法操作（而非原生 DOM 方法）。
1. 常用选择器
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 元素。
2. ready 方法：确保文档加载完成
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执行时机更早。
三、DOM 元素操作：内容、属性、样式
jQuery 提供了简洁的方法操作 DOM 元素的内容、属性和样式，无需手动处理原生 DOM 对象的兼容性问题。
1. 操作元素内容
根据需求选择 text() 或 html() 方法，前者处理纯文本，后者支持 HTML 标签解析：
text()：获取/设置元素的纯文本内容（不解析 HTML 标签）。html()：获取/设置元素的HTML 内容（会解析 HTML 标签，生成对应 DOM 结构）。
示例：
<body><divclass="error"></div><divclass="info"></div><scriptsrc="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>
2. 操作元素属性
根据属性类型选择对应方法，val() 专门处理表单元素的 value 属性，attr() 处理普通属性和自定义属性：
val()：获取/设置<input>、<select>、<textarea>等表单元素的value属性。attr(属性名)：获取元素指定属性的值（支持原生属性和自定义属性）。attr(属性名, 属性值)：设置元素指定属性的值。removeAttr(属性名)：删除元素指定属性（包括自定义属性）。
示例：
<body><!-- 表单元素 --><inputtype="text"value="初始值"id="userInput"data-user="admin"><!-- 自定义属性元素 --><divid="content"data-info="这是测试内容"></div><scriptsrc="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);// 输出：adminlet contentInfo =$("#content").attr("data-info"); console.log("自定义属性 data-info：", contentInfo);// 输出：这是测试内容// 4. 修改自定义属性$("#content").attr("data-info","修改后的测试内容");// 5. 删除属性$("#content").removeAttr("data-info");// 删除 data-info 属性 console.log("删除后 data-info：",$("#content").attr("data-info"));// 输出：undefined});</script></body>
3. 操作元素样式
jQuery 支持操作行内样式和类样式，类样式更适合批量样式管理，行内样式适合动态修改单个样式。
（1）操作宽度与高度
width() 和 height() 方法用于获取/设置元素的宽高，默认操作“内容区”尺寸（不含 padding、border、margin）：
width()：获取/设置元素宽度。height()：获取/设置元素高度。- 补充方法：
innerWidth()（内容区+padding）、outerWidth()（内容区+padding+border）、outerWidth(true)（内容区+padding+border+margin），高度同理。
示例：
<body><divclass="box"style="width: 200px;padding: 10px;border: 2px solid #000;margin: 5px;"></div><scriptsrc="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>（2）操作行内样式
css() 方法用于获取/设置元素的行内样式，支持单个样式和批量样式设置，需注意样式属性的命名规则（驼峰命名法）：
css(样式属性名)：获取元素指定行内样式的值（若未设置行内样式，会返回计算后的样式值）。css(样式属性名, 样式属性值)：设置元素指定行内样式。css({样式1: 值1, 样式2: 值2, ...})：批量设置行内样式（样式属性含中横线时，需改为驼峰命名，如font-size→fontSize）。
示例：
<body><divclass="info">这是测试文本</div><scriptsrc="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>（3）操作类样式
类样式通过预定义 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><buttonid="btn">点击切换样式</button><divclass="text">这是一段可激活的文本</div><scriptsrc="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 事件绑定：响应用户操作
jQuery 简化了事件绑定流程，支持直接绑定（静态元素）和委托绑定（动态元素），覆盖大多数用户交互场景。
1. 常用事件类型
| 事件名 | 说明 | 适用元素 |
|---|---|---|
click | 鼠标左键单击 | 所有可交互元素（按钮、链接、div 等） |
dblclick | 鼠标左键双击 | 同 click |
blur | 元素失去焦点 | 表单元素（input、select、textarea 等） |
focus | 元素获得焦点 | 同 blur |
keydown | 键盘按键按下（按住时持续触发） | 所有可获取焦点的元素 |
keyup | 键盘按键释放 | 同 keydown |
mouseenter | 鼠标移入元素（不冒泡，子元素不触发） | 所有元素 |
mouseleave | 鼠标移出元素（不冒泡，子元素不触发） | 同 mouseenter |
mousemove | 鼠标在元素内移动（持续触发） | 所有元素 |
change | 元素内容改变（失去焦点后触发） | 表单元素（input、select、textarea 等） |
submit | 表单提交（点击提交按钮或按 Enter 触发） | <form> 元素 |
2. 事件绑定方式
（1）直接绑定：适用于静态元素
静态元素指页面加载时已存在的元素，可通过“事件名方法”或 on() 方法直接绑定事件：
- 语法1（事件名方法）：
$(选择器).事件名(回调函数)。 - 语法2（
on()方法）：$(选择器).on("事件名", 回调函数)（更灵活，支持解绑）。
示例：
<body><inputtype="text"id="userInput"placeholder="请输入内容"><buttonid="submitBtn">提交</button><scriptsrc="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>
（2）委托绑定：适用于动态元素
动态元素指页面加载后通过 JS 动态生成的元素（如点击按钮添加的 <tr>、<div> 等），直接绑定事件无效，需用 on() 委托绑定（将事件委托给静态父元素）：
- 语法：
$(静态父元素).on("事件名", 动态元素选择器, 回调函数)。 - 原理：事件委托利用事件冒泡机制，将事件绑定到静态父元素上，当动态元素触发事件时，事件冒泡到父元素，再通过“动态元素选择器”匹配目标元素，执行回调函数。
示例：
<body><buttonid="addRowBtn">添加表格行</button><tableborder="1"cellpadding="8"cellspacing="0"><thead><tr><th>姓名</th><th>操作</th></tr></thead><tbodyid="tableBody"><!-- 动态生成的行将插入这里 --></tbody></table><scriptsrc="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>
五、jQuery 节点操作：创建、插入、删除、遍历
节点操作是 DOM 操作的核心，jQuery 提供了直观的方法处理节点的创建、插入、替换、删除和遍历，简化原生 JS 的复杂流程。
1. 创建与获取节点
- 创建节点：通过
$(HTML 字符串)语法创建 jQuery 节点对象（后续可通过插入方法添加到 DOM 树）。 - 获取节点：通过 jQuery 选择器（如
$("#id")、$(".class")）获取已存在的节点，返回 jQuery 集合。 - 转换节点：通过
$(原生 DOM 元素)将原生 DOM 元素转换为 jQuery 对象，以便使用 jQuery 方法。
示例：
<body><divid="container"></div><scriptsrc="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>2. 插入节点
插入节点用于将创建的节点添加到 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><divid="container"><p>容器内原有内容</p></div><divid="sibling">参考同级元素</div><scriptsrc="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>3. 替换与删除节点
- 替换节点：
target.replaceWith(newNode)：用 newNode 节点替换 target 节点（target 节点会从 DOM 树中移除）。 - 删除节点：
node.empty()：清空 node 节点的所有子内容（包括子节点和文本），但 node 节点本身保留。node.remove()：将 node 节点（包括所有子内容）从 DOM 树中彻底移除，后续无法再使用该节点。
示例：
<body><divid="oldDiv">这是要被替换的旧节点</div><divid="deleteDiv"><p>这是要被删除的内容</p><inputtype="text"placeholder="输入框"></div><scriptsrc="js/jquery-3.6.0.js"></script><script>$(function(){// 1. 替换节点：用新节点替换 #oldDivlet 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>4. 查找节点
查找节点用于在已有的 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><divclass="grandparent"><divclass="parent"><divclass="child item">子节点1</div><divclass="child">子节点2</div><divclass="child item">子节点3</div></div><divclass="sibling">同辈节点</div></div><scriptsrc="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);// 输出：3let 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());// 输出：子节点3let child2Prev = child2.prev();// 上一个同辈节点 console.log("child2 的上一个同辈节点内容：", child2Prev.text());// 输出：子节点1let 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());// 输出：子节点1let lastChild =$("div.child").last(); console.log("所有 child 中的最后一个节点内容：", lastChild.text());// 输出：子节点3});</script></body>5. 遍历节点
当需要对 jQuery 集合中的每个节点执行相同操作时，可使用 each() 方法遍历集合，回调函数中可获取每个节点的下标和原生 DOM 元素：
- 语法：
$(选择器).each(function(index, nativeDom) { ... })。index：当前节点在集合中的下标（从 0 开始）。nativeDom：当前节点的原生 DOM 元素（如需使用 jQuery 方法，需转换为 jQuery 对象：$(nativeDom)）。
示例：
<body><ulid="fruitList"><li>苹果</li><li>香蕉</li><li>橙子</li><li>葡萄</li></ul><scriptsrc="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 插件提供了丰富的验证规则和自定义功能，无需手动编写复杂的验证逻辑，极大提升开发效率。
1. 核心验证规则🧾
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~100 岁）、分数（0~100 分）等 |
2. 基础使用步骤
使用 jQuery Validate 插件需遵循以下步骤，核心是“引入文件→编写表单→初始化验证”：
步骤1：引入必要文件
需引入 3 个文件（jQuery 核心库、Validate 插件核心库、中文提示库，中文提示库可选）：
<!-- 1. 引入 jQuery 核心库（必须在 Validate 之前） --><scripttype="text/javascript"src="js/jquery-3.6.0.js"></script><!-- 2. 引入 Validate 插件核心库 --><scripttype="text/javascript"src="js/jquery.validate.js"></script><!-- 3. 引入中文提示库（可选，用于将默认英文提示改为中文） --><scripttype="text/javascript"src="js/messages_zh.js"></script>步骤2：编写表单结构
表单元素需添加 name 属性（Validate 插件通过 name 绑定验证规则），且建议为必填项添加 required 属性（或在配置中设置 required: true）：
<formid="registerForm"method="post"action="register.php"><!-- 账号：必填，长度 8~15 字符 --><divclass="form-item"><labelfor="username">账号：</label><inputtype="text"id="username"name="username"placeholder="请输入账号（8-15字符）"></div><!-- 密码：必填，长度 8~20 字符 --><divclass="form-item"><labelfor="password">密码：</label><inputtype="password"id="password"name="password"placeholder="请输入密码（8-20字符）"></div><!-- 确认密码：必填，需与密码一致 --><divclass="form-item"><labelfor="confirmPwd">确认密码：</label><inputtype="password"id="confirmPwd"name="confirmPwd"placeholder="请再次输入密码"></div><!-- 邮箱：必填，格式正确 --><divclass="form-item"><labelfor="email">邮箱：</label><inputtype="text"id="email"name="email"placeholder="请输入邮箱（如 [email protected]）"></div><!-- 年龄：必填，数字，0~120 之间 --><divclass="form-item"><labelfor="age">年龄：</label><inputtype="text"id="age"name="age"placeholder="请输入年龄（0-120）"></div><!-- 提交按钮 --><divclass="form-item"><buttontype="submit"class="submit-btn">注册</button></div></form>步骤3：初始化验证配置
通过 $("#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();}});});3. 效果说明
- 实时验证：用户输入过程中（如失去焦点时），会自动触发验证，若不符合规则，会显示自定义的错误提示。
- 提交验证：点击提交按钮时，会对所有表单项进行验证，若存在未通过项，会阻止表单提交并显示错误提示；若全部通过，会执行
submitHandler中的逻辑（如 Ajax 提交）。 - 中文提示：引入
messages_zh.js后，默认提示文本会改为中文（如“这是必填字段”“请输入正确的邮箱格式”），无需手动编写所有提示信息。
如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
