jQuery 入门教程

本教程是 jQuery 的完整 9 篇入门系列，面向零基础初学者与维护老项目的朋友。从 CDN 引入、选择器、事件、DOM 操作一路讲到动画效果、AJAX、链式调用与插件开发，每一篇都配有可运行的代码示例。

jQuery 是 John Resig 在 2006 年开源的 JavaScript 库，曾经统治 Web 整整十年。它把繁琐的 DOM 操作、浏览器兼容、AJAX 请求全部包成极简的 API，号称"Write Less, Do More"。即使在 React、Vue 林立的今天，WordPress 主题、企业内部系统、海量老项目仍在用它——会读会写 jQuery，仍是前端工程师的基本功。

先看一段 jQuery 代码

下面是最简单的 jQuery 用法，先感受一下它的"链式调用"风格：

// $ 是 jQuery 的核心函数,接 CSS 选择器
$(document).ready(function () {
  // 改文本 + 加样式 + 绑事件,一行链式调用搞定
  $("#title").text("Hello, jQuery").css("color", "#4f8cff");
});

// 事件绑定
$("button").on("click", function () {
  alert("被点了!");
});

全部 9 篇子教程

建议按顺序学习，每天 1~2 篇，一周即可入门。

1. jQuery 简介 — 历史、定位与现代价值
2. 引入 jQuery — CDN、本地下载、第一个脚本
3. jQuery 选择器 — ID、类、属性、伪类过滤
4. jQuery 事件 — on、click、事件委托
5. jQuery DOM 操作 — 取值赋值、增删改
6. jQuery 动画效果 — show、hide、fadeIn、animate
7. jQuery AJAX — get、post、ajax、JSON
8. jQuery 链式调用 — end、回溯栈、可读性
9. jQuery 插件 — fn 扩展、自定义插件开发

推荐学习路径

如果你是完全的零基础，建议按下面 3 个阶段推进，每个阶段都建立在前一个之上：

• 阶段 1 入门：简介 → 引入 jQuery → 选择器。先把库接进页面，学会选中元素、看懂基本的 $ 写法。
• 阶段 2 核心：事件 → DOM 操作 → 动画。掌握 jQuery 最常用的三大能力，能独立写一个交互页面。
• 阶段 3 进阶：AJAX → 链式调用 → 插件。把 jQuery 的精髓全部串起来，能维护老项目、写自己的插件。

每篇都建议你边读边敲：新建一个 HTML 文件，把 jQuery 用 script 标签引一遍，照着示例敲、改、跑。前端是"手艺活"，光看不练记不住。

开始学习

准备好了吗？从第一篇开始 → jQuery 简介