首页
/ 正文

jQuery 教程（超详细）

更新时间: 2025-04-12 10:56:30

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在网页开发领域，jQuery 教程始终是初学者入门和中级开发者提升技能的重要工具。作为一种轻量级 JavaScript 库，jQuery 通过简化 DOM 操作、事件处理和动画效果的实现，极大提升了开发效率。本文将从基础概念到实战案例，以循序渐进的方式讲解 jQuery 的核心知识点，帮助读者快速掌握这一工具。无论是想快速上手动态网页效果的新手，还是希望优化代码逻辑的中级开发者，都能在本文中找到实用的技巧和灵感。

什么是 jQuery？

jQuery 是一个基于 JavaScript 的快速、简洁的库，其核心目标是简化常见的 DOM 操作。它通过统一浏览器兼容性、封装复杂功能（如动画、事件绑定）和提供直观的语法，让开发者能够用更少的代码实现更强大的功能。

核心优势：

跨浏览器兼容性：自动处理不同浏览器（如 Chrome、Firefox、Safari）的差异。
链式调用：通过 $(selector).method().anotherMethod() 的语法，代码更简洁易读。
丰富的插件生态：社区贡献了数千个插件，覆盖表单验证、图表绘制等场景。

比喻：可以将 jQuery 想象为一把“瑞士军刀”，它将复杂的 JavaScript 功能浓缩成几个简单的方法，让开发者无需重复造轮子。

第一步：引入 jQuery

在 HTML 文件中使用 jQuery，首先需要通过 CDN 引入其库文件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

注意事项：

确保脚本标签位于 HTML 的 <body> 或 <head> 部分。

使用 $(document).ready() 确保 DOM 加载完成后执行代码：

$(document).ready(function() {
    // 你的代码
});
// 或简写为：
$(function() {
    // 你的代码
});

核心概念：选择器（Selectors）

选择器是 jQuery 的核心功能之一，用于定位 HTML 元素。它们类似于 CSS 选择器，但功能更强大。

常用选择器分类：

类型	语法示例	作用描述
基础选择器	`$("#id")`, `$(".class")`	通过 ID 或类名选择元素
层次选择器	`$("div > p")`	选择直接子元素
过滤选择器	`$("div:first")`	筛选符合条件的元素（如第一个）
表单选择器	`$(":checkbox:checked")`	选择特定表单元素

比喻：选择器就像一张“地图”，帮助开发者精准定位网页中的任意角落。

实例：选择并修改元素

<div id="content">原始文本</div>
<script>
$(function() {
    $("#content").text("修改后的文本"); // 修改文本内容
});
</script>

DOM 操作：动态修改网页内容

DOM 操作是前端开发的核心任务之一。jQuery 提供了多种方法来创建、删除、替换元素。

常用方法：

方法	作用
`.text()`	设置或获取文本内容
`.html()`	设置或获取 HTML 内容
`.append()`	在元素内部追加内容
`.prepend()`	在元素内部前置内容
`.remove()`	删除匹配的元素

实例：动态添加元素

<button id="add-btn">添加项目</button>
<ul id="list"></ul>
<script>
$(function() {
    $("#add-btn").click(function() {
        $("#list").append("<li>新项目</li>");
    });
});
</script>

事件处理：与用户交互

事件驱动是现代网页的核心，jQuery 简化了事件绑定的流程。

常用事件方法：

方法	对应事件
`.click()`	鼠标点击
`.hover()`	鼠标悬停（进入/离开）
`.submit()`	表单提交
`.keydown()`	键盘按键按下

实例：表单验证

<form id="contact-form">
    <input type="text" id="name" placeholder="姓名">
    <button type="submit">提交</button>
</form>
<script>
$(function() {
    $("#contact-form").submit(function(event) {
        if ($("#name").val().trim() === "") {
            alert("姓名不能为空！");
            event.preventDefault(); // 阻止表单提交
        }
    });
});
</script>

动画与效果：增强用户体验

jQuery 的动画方法让开发者可以轻松实现视觉效果，无需复杂的 CSS 或 JavaScript。

基础动画方法：

方法	作用
`.hide()`	淡出或滑动隐藏元素
`.show()`	淡入或滑动显示元素
`.toggle()`	切换元素的可见性
`.animate()`	自定义属性动画（如移动、缩放）

实例：淡入淡出效果

<div id="message" style="display: none;">欢迎访问本站！</div>
<button id="toggle-btn">切换显示</button>
<script>
$(function() {
    $("#toggle-btn").click(function() {
        $("#message").toggle("slow"); // "slow" 表示动画速度
    });
});
</script>

进阶技巧：链式调用与选择器组合

jQuery 的链式调用允许开发者将多个方法串联，代码更简洁。此外，选择器可以组合使用以定位复杂结构。

示例：组合选择器与链式调用

<ul>
    <li class="item active">项目1</li>
    <li class="item">项目2</li>
</ul>
<script>
$(function() {
    $(".item").click(function() {
        $(this).addClass("active")  // 添加类
               .siblings()         // 获取同级元素
               .removeClass("active"); // 移除其他元素的类
    });
});
</script>

插件与生态：扩展 jQuery 的可能性

jQuery 的强大之处不仅在于其核心功能，更在于庞大的插件生态。以下是一些常用插件示例：

Validate：表单验证插件，支持自定义规则。
Cycle2：实现轮播图效果。
UI：提供拖放、对话框等组件。

实例：使用 Validate 插件

<form id="login-form">
    <input type="email" name="email" required>
    <input type="password" name="password" required>
    <button>登录</button>
</form>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(function() {
    $("#login-form").validate({
        rules: {
            email: {
                required: true,
                email: true
            }
        }
    });
});
</script>

最佳实践与性能优化

尽管 jQuery 简化了开发，但不当使用可能导致性能问题。以下是一些优化建议：

减少 DOM 查询次数：将频繁使用的元素缓存到变量中。

var $container = $("#content");
$container.append("内容"); // 避免重复查询 #content

优先使用 ID 选择器：$("#id") 比 .class 或 tag 更快。
避免过度依赖 jQuery：对于现代浏览器支持的原生 API（如 querySelectorAll），可直接使用以减少依赖。

结论

通过本文的讲解，读者已经掌握了从基础到进阶的 jQuery 教程 核心内容，包括选择器、DOM 操作、事件处理、动画效果及插件应用。jQuery 作为 JavaScript 的有力补充，尤其适合快速构建交互式网页，但开发者也需注意性能优化和与现代前端框架的结合。

继续探索的方向包括：

学习 jQuery 的 AJAX 方法实现异步通信。
结合 CSS3 和原生 JavaScript 扩展功能。
研究 jQuery 与 Vue.js、React 等框架的协作场景。

掌握 jQuery 的精髓，不仅能提升开发效率，更能为深入理解前端技术打下坚实基础。

jQuery 教程（超详细）

什么是 jQuery？

核心优势：

第一步：引入 jQuery

注意事项：

核心概念：选择器（Selectors）

常用选择器分类：

实例：选择并修改元素

DOM 操作：动态修改网页内容

常用方法：

实例：动态添加元素

事件处理：与用户交互

常用事件方法：

实例：表单验证

动画与效果：增强用户体验

基础动画方法：

实例：淡入淡出效果

进阶技巧：链式调用与选择器组合

示例：组合选择器与链式调用

插件与生态：扩展 jQuery 的可能性

实例：使用 Validate 插件

最佳实践与性能优化

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）