jQuery 核心知识详解：语法、DOM 操作与插件应用 | 极客日志

JavaScript大前端

jQuery 核心知识详解：语法、DOM 操作与插件应用

综述由AI生成介绍 jQuery 的核心知识，包括其简介、优势及引入方式。详细讲解了基础语法与选择器、DOM 元素操作（内容、属性、样式）、事件绑定（直接绑定与委托绑定）、节点操作（创建、插入、删除、遍历），以及 jQuery Validate 表单验证插件的使用。通过代码示例展示了如何简化前端开发流程，提升页面交互体验。

筑梦师发布于 2026/4/6更新于 2026/5/2333 浏览

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("账号或密码错误");
    
    // 2. 设置 HTML 内容（解析 HTML 标签）
    $(".info").html("<h1>欢迎登录系统</h1>");
    
    // 3. 获取内容
    console.log($(".error").text());
    console.log($(".info").html());
    
    // 4. 处理 jQuery 集合：若匹配多个元素，text()/html() 会批量操作
    $("div").text("批量设置文本");
});
</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");
    
    // 2. 操作普通属性（如 type）
    let inputType = $("#userInput").attr("type");
    console.log("input 类型：", inputType);
    $("#userInput").attr("type","password");
    
    // 3. 操作自定义属性（data-* 开头的属性）
    let userData = $("#userInput").attr("data-user");
    console.log("自定义属性 data-user：", userData);
    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"));
});
</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);
    
    // 2. 获取包含 padding 的宽度
    let innerW = box.innerWidth();
    console.log("内容区+padding 宽度：", innerW);
    
    // 3. 获取包含 padding+border 的宽度
    let outerW = box.outerWidth();
    console.log("内容区+padding+border 宽度：", outerW);
    
    // 4. 获取包含 padding+border+margin 的宽度
    let outerWWithMargin = box.outerWidth(true);
    console.log("完整宽度（含 margin）：", outerWWithMargin);
    
    // 5. 设置宽度（默认设置内容区宽度）
    box.width("300px");
    console.log("设置后内容区宽度：", box.width());
});
</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");
    info.css("fontSize","18px");
    
    // 2. 批量样式设置（对象形式）
    info.css({ 
        color:"white",
        padding:"10px 15px",
        border:"1px solid #ccc",
        borderRadius:"5px"
    });
    
    // 3. 获取样式值
    let bgColor = info.css("backgroundColor");
    console.log("背景色：", bgColor);
    let fontSize = info.css("fontSize");
    console.log("字体大小：", fontSize);
});
</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`	鼠标左键单击	所有可交互元素
`dblclick`	鼠标左键双击	同 click
`blur`	元素失去焦点	表单元素
`focus`	元素获得焦点	同 blur
`keydown`	键盘按键按下	所有可获取焦点的元素
`keyup`	键盘按键释放	同 keydown
`mouseenter`	鼠标移入元素（不冒泡）	所有元素
`mouseleave`	鼠标移出元素（不冒泡）	同 mouseenter
`mousemove`	鼠标在元素内移动	所有元素
`change`	元素内容改变	表单元素
`submit`	表单提交	`<form>` 元素

<body>
<input type="text" id="userInput" placeholder="请输入内容">
<button id="submitBtn">提交</button>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 输入框焦点事件
    $("#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. 按钮点击事件
    $("#submitBtn").click(function(){
        alert("按钮被点击");
    });
});
</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);
        rowCount++;
    });
    
    // 2. 委托绑定：为动态生成的 .deleteBtn 绑定点击事件
    $("#tableBody").on("click",".deleteBtn",function(){
        let isConfirm = confirm("确定要删除这一行吗？");
        if(isConfirm){
            $(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. 创建节点
    let newDiv = $(`<div><p>这是创建的新节点</p><button>节点按钮</button></div>`);
    
    // 2. 获取节点
    let container = $("#container");
    
    // 3. 转换节点
    let nativeDom = document.getElementById("container");
    let jqueryDom = $(nativeDom);
    
    // 4. 将创建的节点添加到容器
    container.append(newDiv);
});
</script>
</body>

插入类型	方法	说明
内部插入 - 末尾	`parent.append(child)`	将 child 节点插入到 parent 节点的内部末尾
内部插入 - 开头	`parent.prepend(child)`	将 child 节点插入到 parent 节点的内部开头
外部插入 - 后面	`sibling.after(newNode)`	将 newNode 节点插入到 sibling 节点的外部后面
外部插入 - 前面	`sibling.before(newNode)`	将 newNode 节点插入到 sibling 节点的外部前面

<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 内部
    $("#container").append(newNode.clone());
    $("#container").prepend(newNode.clone());
    
    // 2. 外部插入：插入到 #sibling 同级位置
    $("#sibling").after(newNode.clone());
    $("#sibling").before(newNode);
});
</script>
</body>

<body>
<div id="oldDiv">这是要被替换的旧节点</div>
<div id="deleteDiv"><p>这是要被删除的内容</p></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 替换节点
    let newDiv = $("<div>这是替换后的新节点</div>");
    $("#oldDiv").replaceWith(newDiv);
    
    // 2. 清空节点
    $("#deleteDiv").empty();
    
    // 3. 彻底删除节点
    $("#deleteDiv").remove();
});
</script>
</body>

方法	说明
`children([选择器])`	获取当前节点的直接子节点
`parent()`	获取当前节点的直接父节点
`closest(选择器)`	沿 DOM 树向上查找最近的匹配选择器的父节点
`next([选择器])`	获取当前节点的紧邻的下一个同辈节点
`prev([选择器])`	获取当前节点的紧邻的上一个同辈节点
`siblings([选择器])`	获取当前节点的所有同辈节点
`find(选择器)`	在当前节点的所有子节点中查找匹配选择器的节点

<body>
<ul id="fruitList">
<li>苹果</li><li>香蕉</li><li>橙子</li><li>葡萄</li>
</ul>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(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");
        }
    });
});
</script>
</body>

规则	描述
`required: true`	必须输入的字段
`email: true`	必须输入正确格式的电子邮件
`url: true`	必须输入正确格式的网址
`number: true`	必须输入合法的数字
`digits: true`	必须输入整数
`equalTo: "#targetId"`	输入值必须与目标元素一致
`maxlength: 15`	输入长度最多为 15 个字符
`minlength: 8`	输入长度最少为 8 个字符
`range: [0, 100]`	输入值必须介于 0~100 之间

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

<form id="registerForm" method="post" action="register.php">
    <div class="form-item">
        <label for="username">账号：</label>
        <input type="text" id="username" name="username" placeholder="请输入账号（8-15 字符）">
    </div>
    <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="请输入邮箱">
    </div>
    <div class="form-item">
        <button type="submit" class="submit-btn">注册</button>
    </div>
</form>

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

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. 效果说明

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

更多推荐文章

相关免费在线工具