jQuery 核心知识详解：选择器、DOM 操作与事件绑定 | 极客日志

JavaScript大前端

jQuery 核心知识详解：选择器、DOM 操作与事件绑定

jQuery 是 JavaScript 的轻量级封装库，简化 DOM 操作、事件处理及 Ajax 交互。内容涵盖 jQuery 核心知识，包括基础语法、常用选择器、ready 方法、DOM 元素内容属性样式操作、事件绑定（直接绑定与委托绑定）、节点操作（创建插入删除遍历）以及 Validate 表单验证插件的使用。通过实例代码展示如何快速定位元素、修改样式、处理动态内容及实现表单校验，帮助开发者提升前端开发效率。

萤火微光发布于 2026/4/8更新于 2026/5/2314 浏览

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 文件（路径需根据实际项目结构调整） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 引入自定义 JS（需在 jQuery 之后） -->
<script type="text/javascript" src="js/custom.js"></>

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

选择器类型	语法示例	说明
标签选择器	`$("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)`	选择整个文档对象（常用于绑定文档加载事件）

// 1. 完整写法：明确绑定 document 对象
$(document).ready(function(){
    // DOM 加载完成后执行的代码（如操作 DOM、绑定事件）
    console.log("DOM 已加载完成（完整写法）");
});

// 2. 简化写法（推荐）：省略 document 和 ready 关键字
$(function(){
    // 功能与完整写法一致，代码更简洁
    console.log("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>

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

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

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

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

事件名	说明	适用元素
`click`	鼠标左键单击	所有可交互元素（按钮、链接、div 等）
`dblclick`	鼠标左键双击	同 click
`blur`	元素失去焦点	表单元素（input、select、textarea 等）
`focus`	元素获得焦点	同 blur
`keydown`	键盘按键按下（按住时持续触发）	所有可获取焦点的元素
`keyup`	键盘按键释放	同 keydown
`mouseenter`	鼠标移入元素（不冒泡，子元素不触发）	所有元素
`mouseleave`	鼠标移出元素（不冒泡，子元素不触发）	同 mouseenter
`mousemove`	鼠标在元素内移动（持续触发）	所有元素
`change`	元素内容改变（失去焦点后触发）	表单元素（input、select、textarea 等）
`submit`	表单提交（点击提交按钮或按 Enter 触发）	`<form>` 元素

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

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

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

插入类型	方法	说明	示例
内部插入 - 末尾	`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>

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

方法	说明	示例
`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>

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

规则	描述	适用场景
`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 分）等

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

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

$(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();
        }
    });
});

jQuery 核心知识详解：选择器、DOM 操作与事件绑定

jQuery 核心知识详解

jQuery 核心知识

一、jQuery 简介：为什么选择它？

1. 核心用途

2. 核心优势

3. 下载与引入

更多推荐文章

相关免费在线工具

二、jQuery 语法：基础与选择器

1. 常用选择器

2. ready 方法：确保文档加载完成

三、DOM 元素操作：内容、属性、样式

1. 操作元素内容

2. 操作元素属性

3. 操作元素样式

（1）操作宽度与高度

（2）操作行内样式

（3）操作类样式

四、jQuery 事件绑定：响应用户操作

1. 常用事件类型

2. 事件绑定方式

（1）直接绑定：适用于静态元素

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

五、jQuery 节点操作：创建、插入、删除、遍历

1. 创建与获取节点

2. 插入节点

3. 替换与删除节点

4. 查找节点

5. 遍历节点

六、jQuery Validate 插件

1. 核心验证规则

2. 基础使用步骤

步骤 1：引入必要文件

步骤 2：编写表单结构

步骤 3：初始化验证配置

3. 效果说明

更多推荐文章

相关免费在线工具

jQuery 核心知识详解：选择器、DOM 操作与事件绑定

jQuery 核心知识详解

jQuery 核心知识

一、jQuery 简介：为什么选择它？

1. 核心用途

2. 核心优势

3. 下载与引入

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

二、jQuery 语法：基础与选择器

1. 常用选择器

2. ready 方法：确保文档加载完成

三、DOM 元素操作：内容、属性、样式

1. 操作元素内容

2. 操作元素属性

3. 操作元素样式

（1）操作宽度与高度

（2）操作行内样式

（3）操作类样式

四、jQuery 事件绑定：响应用户操作

1. 常用事件类型

2. 事件绑定方式

（1）直接绑定：适用于静态元素

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

五、jQuery 节点操作：创建、插入、删除、遍历

1. 创建与获取节点

2. 插入节点

3. 替换与删除节点

4. 查找节点

5. 遍历节点

六、jQuery Validate 插件

1. 核心验证规则

2. 基础使用步骤

步骤 1：引入必要文件

步骤 2：编写表单结构

步骤 3：初始化验证配置

3. 效果说明

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具