jQuery 核心实战：选择器、DOM 操作与表单验证详解

常用选择器

注意：jQuery 选择器返回的是 jQuery 对象集合，若需使用原生 DOM 方法（如 innerHTML），需通过下标（$("div")[0]）或 get(0) 转换。

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

ready 用于指定 DOM 树加载完成后执行的代码，避免查找失败。

// 完整写法
$(document).ready(function(){
    // DOM 加载完成后执行的代码
    console.log("DOM 已加载完成");
});

// 简化写法（推荐）
$(function(){
    console.log("DOM 已加载完成");
});

区别于 window.onload：ready 仅需 DOM 树加载完成即可执行，无需等待图片等资源，执行时机更早。

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

1. 操作元素内容

• text()：获取/设置元素的纯文本内容（不解析 HTML 标签）。
• html()：获取/设置元素的HTML 内容（会解析 HTML 标签）。

$(function(){
    // 设置纯文本
    $(".error").text("账号或密码错误");
    // 设置 HTML 内容
    $(".info").html("<h1>欢迎登录系统</h1>");
    // 获取内容
    console.log($(".error").text());
    // 批量操作
    $("div").text("批量设置文本");
});

2. 操作元素属性

• val()：专门处理表单元素的 value 属性。
• attr(属性名)：获取元素指定属性的值。
• attr(属性名，属性值)：设置元素指定属性的值。
• removeAttr(属性名)：删除元素指定属性。

$(function(){
    // 操作表单 value
    let val = $("#userInput").val();
    $("#userInput").val("修改后的 value");
    
    // 操作普通属性
    $("#userInput").attr("type", "password");
    
    // 操作自定义属性
    $("#content").attr("data-info", "修改后的测试内容");
    $("#content").removeAttr("data-info");
});

3. 操作元素样式

（1）操作宽度与高度

width() 和 height() 默认操作'内容区'尺寸。补充方法：innerWidth()（含 padding）、outerWidth()（含 border）、outerWidth(true)（含 margin）。

（2）操作行内样式

css() 方法支持单个或批量设置，注意驼峰命名法（如 font-size → fontSize）。

$(function(){
    $(".info").css({
        color: "white",
        fontSize: "18px",
        borderRadius: "5px"
    });
});

（3）操作类样式

• addClass(类名)：添加类样式。
• removeClass(类名)：移除类样式。
• toggleClass(类名)：切换类样式。
• hasClass(类名)：判断是否包含类样式。

$(function(){
    $("#btn").click(function(){
        $(".text").toggleClass("active");
        if ($(".text").hasClass("active")) {
            $(".text").addClass("highlight");
        }
    });
});

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

1. 常用事件类型

包括 click、dblclick、blur、focus、keydown、keyup、mouseenter、mouseleave、change、submit 等。

2. 事件绑定方式

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

静态元素指页面加载时已存在的元素。

$("#submitBtn").click(function(){
    alert("按钮被点击");
});
// 或使用 on() 方法
$("#submitBtn").on("click", function(){
    alert("按钮被点击");
});

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

动态元素指页面加载后通过 JS 生成的元素，需用 on() 委托绑定到静态父元素上。

$("#tableBody").on("click", ".deleteBtn", function(){
    $(this).closest("tr").remove();
});

原理是利用事件冒泡机制，将事件绑定到静态父元素，当动态元素触发事件时，冒泡到父元素再匹配目标。

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

1. 创建与获取节点

通过 $(HTML 字符串) 创建节点，通过选择器获取节点，通过 $(原生 DOM 元素) 转换节点。

2. 插入节点

• parent.append(child)：内部末尾插入。
• child.appendTo(parent)：反向插入。
• parent.prepend(child)：内部开头插入。
• sibling.after(newNode)：外部后面插入。
• sibling.before(newNode)：外部前面插入。

let newNode = $("<div>这是插入的节点</div>");
$("#container").append(newNode.clone());
$("#sibling").after(newNode);

3. 替换与删除节点

• target.replaceWith(newNode)：替换节点。
• node.empty()：清空子内容，保留节点本身。
• node.remove()：彻底移除节点。

4. 查找节点

• children([选择器])：直接子节点。
• parent()：直接父节点。
• closest(选择器)：最近的匹配父节点。
• next([选择器]) / prev([选择器])：紧邻同辈节点。
• siblings([选择器])：所有同辈节点。
• find(选择器)：所有子节点（含多级）。

5. 遍历节点

使用 each() 方法遍历集合。

$("#fruitList li").each(function(index, nativeDom){
    let $currentLi = $(nativeDom);
    if (index % 2 === 0) {
        $currentLi.css("color", "red");
    } else {
        $currentLi.css("color", "blue");
    }
});

六、jQuery Validate 插件

表单验证是常见需求，jQuery Validate 插件提供了丰富的验证规则。

1. 核心验证规则

内置规则包括 required（必填）、email（邮箱格式）、url（网址格式）、number（数字）、equalTo（一致）、maxlength（最大长度）、minlength（最小长度）、range（范围）等。

2. 基础使用步骤

步骤 1：引入必要文件

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>

步骤 2：编写表单结构

表单元素需添加 name 属性，建议为必填项添加 required 属性。

<form id="registerForm">
    <input type="text" name="username" placeholder="请输入账号">
    <input type="password" name="password" placeholder="请输入密码">
    <button type="submit">注册</button>
</form>

步骤 3：初始化验证配置

$(function(){
    $("#registerForm").validate({
        rules: {
            username: { required: true, minlength: 8 },
            password: { required: true, minlength: 8 },
            confirmPwd: { required: true, equalTo: "#password" },
            email: { required: true, email: true }
        },
        messages: {
            username: { required: "请输入账号", minlength: "长度不能小于 8 个字符" },
            password: { required: "请输入密码" },
            confirmPwd: { equalTo: "两次输入的密码不一致" },
            email: { required: "请输入邮箱", email: "请输入正确的邮箱格式" }
        },
        submitHandler: function(form){
            form.submit();
        }
    });
});

3. 效果说明

• 实时验证：用户输入过程中（如失去焦点时）自动触发验证。
• 提交验证：点击提交按钮时进行验证，未通过则阻止提交。
• 中文提示：引入 messages_zh.js 后，默认提示文本改为中文。