jQuery 前端开发核心知识详解

注意：jQuery 选择器返回的是 jQuery 对象集合，若需使用原生 DOM 方法，需通过下标或 get(0) 转换为原生 DOM 元素。

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

ready 方法用于指定'DOM 树加载完成后执行的代码'，有两种常用写法：

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

// 2. 简化写法（推荐）：省略 document 和 ready 关键字
$(function(){
    // 功能与完整写法一致，代码更简洁
    console.log("DOM 已加载完成（简化写法）");
});

区别于 window.onload：ready 仅需 DOM 树加载完成即可执行，无需等待图片、样式表等资源；而 window.onload 需等待所有资源加载完成后才执行。

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

1. 操作元素内容

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

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

2. 操作元素属性

• val()：获取/设置 <input>、<select>、<textarea> 等表单元素的 value 属性。
• attr(属性名)：获取元素指定属性的值。
• attr(属性名，属性值)：设置元素指定属性的值。
• removeAttr(属性名)：删除元素指定属性。

$(function(){
    // 1. 操作表单元素的 value 属性
    let inputVal = $("#userInput").val();
    $("#userInput").val("修改后的 value");
    
    // 2. 操作普通属性
    let inputType = $("#userInput").attr("type");
    $("#userInput").attr("type","password");
    
    // 3. 操作自定义属性
    let userData = $("#userInput").attr("data-user");
    
    // 4. 删除属性
    $("#content").removeAttr("data-info");
});

3. 操作元素样式

（1）操作宽度与高度

• width() / height()：获取/设置元素宽高（默认内容区）。
• innerWidth() / outerWidth()：包含 padding/border 的宽高。

（2）操作行内样式

css() 方法用于获取/设置元素的行内样式，支持单个样式和批量样式设置。

$(function(){
    let info = $(".info");
    
    // 1. 单个样式设置（驼峰命名）
    info.css("backgroundColor","skyblue");
    info.css("fontSize","18px");
    
    // 2. 批量样式设置
    info.css({
        color:"white",
        padding:"10px 15px",
        border:"1px solid #ccc"
    });
    
    // 3. 获取样式值
    let bgColor = info.css("backgroundColor");
});

（3）操作类样式

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

$(function(){
    let text = $(".text");
    
    // 1. 切换 active 类
    text.toggleClass("active");
    
    // 2. 判断是否包含 active 类
    if(text.hasClass("active")){
        text.addClass("highlight");
    } else {
        text.removeClass("highlight");
    }
});

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

1. 常用事件类型

2. 事件绑定方式

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

• 语法 1：$(选择器).事件名 (回调函数)。
• 语法 2：$(选择器).on("事件名", 回调函数)。

$(function(){
    // 输入框焦点事件
    $("#userInput").focus(function(){
        $(this).css("border","2px solid #4CAF50");
    }).blur(function(){
        $(this).css("border","1px solid #ccc");
    });
    
    // 按钮点击事件
    $("#submitBtn").click(function(){
        alert("按钮被点击");
    });
});

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

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

• 语法：$(静态父元素).on("事件名", 动态元素选择器，回调函数)。

$(function(){
    // 1. 点击按钮添加动态行
    $("#addRowBtn").click(function(){
        let newRow = `
            <tr>
                <td>用户${rowCount}</td>
                <td><button class="deleteBtn">删除</button></td>
            </tr>
        `;
        $("#tableBody").append(newRow);
        rowCount++;
    });
    
    // 2. 委托绑定：为动态生成的 .deleteBtn 绑定点击事件
    $("#tableBody").on("click",".deleteBtn",function(){
        let isConfirm = confirm("确定要删除这一行吗？");
        if(isConfirm){
            $(this).closest("tr").remove();
        }
    });
});

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

1. 创建与获取节点

• 创建节点：通过 $(HTML 字符串) 语法创建 jQuery 节点对象。
• 获取节点：通过 jQuery 选择器获取已存在的节点。
• 转换节点：通过 $(原生 DOM 元素) 将原生 DOM 元素转换为 jQuery 对象。

2. 插入节点

$(function(){
    let newNode = $("<div>这是插入的节点</div>");
    
    // 1. 内部插入
    $("#container").append(newNode.clone());
    $("#container").prepend(newNode.clone());
    
    // 2. 外部插入
    $("#sibling").after(newNode.clone());
    $("#sibling").before(newNode);
});

3. 替换与删除节点

• 替换节点：target.replaceWith(newNode)。
• 清空节点：node.empty()（保留节点本身）。
• 删除节点：node.remove()（彻底移除）。

$(function(){
    // 1. 替换节点
    $("#oldDiv").replaceWith($("<div>新节点</div>"));
    
    // 2. 清空节点
    $("#deleteDiv").empty();
    
    // 3. 彻底删除节点
    $("#deleteDiv").remove();
});

4. 查找节点

5. 遍历节点

使用 each() 方法遍历集合，回调函数中可获取每个节点的下标和原生 DOM 元素。

$(function(){
    $("#fruitList li").each(function(index, nativeDom){
        let fruitName = nativeDom.textContent;
        console.log(`下标 ${index}：${fruitName}`);
        
        let $currentLi = $(nativeDom);
        if(index % 2 === 0){
            $currentLi.css("color","red");
        } else {
            $currentLi.css("color","blue");
        }
    });
});

六、jQuery Validate 插件

表单验证是前端常见需求，jQuery Validate 插件提供了丰富的验证规则和自定义功能。

1. 核心验证规则

2. 基础使用步骤

步骤 1：引入必要文件

<!-- 1. 引入 jQuery 核心库 -->
<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 属性，且建议为必填项添加 required 属性。

<form id="registerForm" method="post" action="register.php">
    <div class="form-item">
        <label for="username">账号：</label>
        <input type="text" id="username" name="username" placeholder="请输入账号">
    </div>
    <div class="form-item">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <div class="form-item">
        <label for="confirmPwd">确认密码：</label>
        <input type="password" id="confirmPwd" name="confirmPwd" placeholder="请再次输入密码">
    </div>
    <div class="form-item">
        <button type="submit" class="submit-btn">注册</button>
    </div>
</form>

步骤 3：初始化验证配置

$(function(){
    $("#registerForm").validate({
        rules: {
            username: { required:true, minlength:8, maxlength:15 },
            password: { required:true, minlength:8, maxlength:20 },
            confirmPwd: { required:true, equalTo:"#password" },
            email: { required:true, email:true },
            age: { required:true, number:true, range:[0,120] }
        },
        messages: {
            username: { required:"请输入账号", minlength:"账号长度不能小于 8 个字符" },
            password: { required:"请输入密码", minlength:"密码长度不能小于 8 个字符" },
            confirmPwd: { required:"请确认密码", equalTo:"两次输入的密码不一致" },
            email: { required:"请输入邮箱", email:"请输入正确的邮箱格式" },
            age: { required:"请输入年龄", number:"请输入合法的数字", range:"年龄必须在 0~120 之间" }
        },
        submitHandler:function(form){
            form.submit();
        }
    });
});

3. 效果说明

• 实时验证：用户输入过程中会自动触发验证。
• 提交验证：点击提交按钮时，会对所有表单项进行验证。
• 中文提示：引入 messages_zh.js 后，默认提示文本会改为中文。