【Java Web学习 | 第15篇】jQuery（万字长文警告）

🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方，便不顾风雨兼程"

文章目录

[从零开始学 jQuery](#从零开始学 jQuery)
- [jQuery 核心知识🥝](#jQuery 核心知识🥝)
- - [一、jQuery 简介：为什么选择它？](#一、jQuery 简介：为什么选择它？)
  - - [1. 核心用途](#1. 核心用途)
    - [2. 核心优势](#2. 核心优势)
    - [3. 下载与引入](#3. 下载与引入)
  - [二、jQuery 语法：基础与选择器](#二、jQuery 语法：基础与选择器)
  - - [1. 常用选择器](#1. 常用选择器)
    - [2. ready 方法：确保文档加载完成](#2. ready 方法：确保文档加载完成)
  - [三、DOM 元素操作：内容、属性、样式](#三、DOM 元素操作：内容、属性、样式)
  - - [1. 操作元素内容](#1. 操作元素内容)
    - [2. 操作元素属性](#2. 操作元素属性)
    - [3. 操作元素样式](#3. 操作元素样式)
  - [四、jQuery 事件绑定：响应用户操作](#四、jQuery 事件绑定：响应用户操作)
  - - [1. 常用事件类型](#1. 常用事件类型)
    - [2. 事件绑定方式](#2. 事件绑定方式)
    - - （1）直接绑定：适用于静态元素
      - （2）委托绑定：适用于动态元素
  - [五、jQuery 节点操作：创建、插入、删除、遍历](#五、jQuery 节点操作：创建、插入、删除、遍历)
  - - [1. 创建与获取节点](#1. 创建与获取节点)
    - [2. 插入节点](#2. 插入节点)
    - [3. 替换与删除节点](#3. 替换与删除节点)
    - [4. 查找节点](#4. 查找节点)
    - [5. 遍历节点](#5. 遍历节点)
  - [六、jQuery Validate 插件🚀🚀🚀](#六、jQuery Validate 插件🚀🚀🚀)
  - - [1. 核心验证规则🧾](#1. 核心验证规则🧾)
    - [2. 基础使用步骤](#2. 基础使用步骤)
    - [3. 效果说明](#3. 效果说明)

从零开始学 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）：

html 复制代码

<!-- 引入本地 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 语法：基础与选择器

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 未加载而导致的元素查找失败问题，有两种常用写法：

javascript 复制代码

// 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 结构）。

示例：

html 复制代码

<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>

2. 操作元素属性

根据属性类型选择对应方法，val() 专门处理表单元素的 value 属性，attr() 处理普通属性和自定义属性：

val()：获取/设置 <input>、<select>、<textarea> 等表单元素的 value 属性。
attr(属性名)：获取元素指定属性的值（支持原生属性和自定义属性）。
attr(属性名, 属性值)：设置元素指定属性的值。
removeAttr(属性名)：删除元素指定属性（包括自定义属性）。

示例：

html 复制代码

<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"); // 删除 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），高度同理。

示例：

html 复制代码

<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>

（2）操作行内样式

css() 方法用于获取/设置元素的行内样式，支持单个样式和批量样式设置，需注意样式属性的命名规则（驼峰命名法）：

css(样式属性名)：获取元素指定行内样式的值（若未设置行内样式，会返回计算后的样式值）。
css(样式属性名, 样式属性值)：设置元素指定行内样式。
css({样式1: 值1, 样式2: 值2, ...})：批量设置行内样式（样式属性含中横线时，需改为驼峰命名，如 font-size → fontSize）。

示例：

html 复制代码

<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>

（3）操作类样式

类样式通过预定义 CSS 类来管理样式，适合批量样式切换（如"激活态""隐藏态"），常用方法如下：

addClass(类名)：为元素添加指定类样式（可添加多个类，用空格分隔，如 addClass("active highlight")）。
removeClass(类名)：为元素移除指定类样式（可移除多个类，用空格分隔）。
toggleClass(类名)：切换类样式（元素有该类则移除，无则添加）。
hasClass(类名)：判断元素是否包含指定类样式，返回布尔值（true 包含，false 不包含）。

示例：

html 复制代码

<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 事件绑定：响应用户操作

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("事件名", 回调函数)（更灵活，支持解绑）。

示例：

html 复制代码

<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>

（2）委托绑定：适用于动态元素

动态元素指页面加载后通过 JS 动态生成的元素（如点击按钮添加的 <tr>、<div> 等），直接绑定事件无效，需用 on() 委托绑定（将事件委托给静态父元素）：

语法：$(静态父元素).on("事件名", 动态元素选择器, 回调函数)。
原理：事件委托利用事件冒泡机制，将事件绑定到静态父元素上，当动态元素触发事件时，事件冒泡到父元素，再通过"动态元素选择器"匹配目标元素，执行回调函数。

示例：

html 复制代码

<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 class="deleteBtn">删除</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 方法。

示例：

html 复制代码

<body>
  <div id="container"></div>

  <script src="js/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      // 1. 创建节点：创建一个 <div> 节点（包含子元素和属性）
      let newDiv = $(`
        <div class="new-node" style="background: #f5f5f5; padding: 10px;">
          <p>这是创建的新节点</p>
          <button class="node-btn">节点按钮</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"))`

示例：

html 复制代码

<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 class='inserted'>这是插入的节点</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 树中彻底移除，后续无法再使用该节点。

示例：

html 复制代码

<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 id='newDiv' style='color: blue;'>这是替换后的新节点</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 中的最后一个）

示例：

html 复制代码

<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>

5. 遍历节点

当需要对 jQuery 集合中的每个节点执行相同操作时，可使用 each() 方法遍历集合，回调函数中可获取每个节点的下标和原生 DOM 元素：

语法：$(选择器).each(function(index, nativeDom) { ... })。
- index：当前节点在集合中的下标（从 0 开始）。
- nativeDom：当前节点的原生 DOM 元素（如需使用 jQuery 方法，需转换为 jQuery 对象：$(nativeDom)）。

示例：

html 复制代码

<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 插件提供了丰富的验证规则和自定义功能，无需手动编写复杂的验证逻辑，极大提升开发效率。

1. 核心验证规则🧾

jQuery Validate 内置了多种常用验证规则，可直接在表单元素或配置中使用：

规则	描述	适用场景
`required: true`	必须输入的字段（不能为空）	账号、密码、邮箱等必填项
`remote: "url"`	通过 Ajax 请求验证输入值（如验证账号是否已存在）	唯一性验证（账号、手机号等）
`email: true`	必须输入正确格式的电子邮件（如 `xxx@xxx.com`）	邮箱输入框
`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 插件核心库、中文提示库，中文提示库可选）：

html 复制代码

<!-- 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>

步骤2：编写表单结构

表单元素需添加 name 属性（Validate 插件通过 name 绑定验证规则），且建议为必填项添加 required 属性（或在配置中设置 required: true）：

html 复制代码

<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="请输入邮箱（如 xxx@xxx.com）">
  </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>

步骤3：初始化验证配置

通过 $("#formId").validate({ ... }) 初始化验证，配置中可设置验证规则（rules）、提示信息（messages）、验证通过后的回调（submitHandler）等：

javascript 复制代码

$(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: "请输入正确的邮箱格式（如 xxx@xxx.com）"
      },
      age: {
        required: "请输入年龄",
        number: "请输入合法的数字",
        range: "年龄必须在 0~120 之间"
      }
    },

    // 3. 验证通过后的回调：表单验证全部通过后执行
    submitHandler: function(form) {
      // 原生 JS 提交表单（form 为当前表单的原生 DOM 对象）
       form.submit();
     }
  });
});

3. 效果说明

实时验证：用户输入过程中（如失去焦点时），会自动触发验证，若不符合规则，会显示自定义的错误提示。
提交验证 ：点击提交按钮时，会对所有表单项进行验证，若存在未通过项，会阻止表单提交并显示错误提示；若全部通过，会执行 submitHandler 中的逻辑（如 Ajax 提交）。
中文提示 ：引入 messages_zh.js 后，默认提示文本会改为中文（如"这是必填字段""请输入正确的邮箱格式"），无需手动编写所有提示信息。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！