jQuery

jQuery 教程导读：从 $ 符号开始的 DOM 手术台

「$」是前端行话里辨识度最高的字符——只要有人在代码里敲下这个符号加一对圆括号，旁边的老工程师立刻就明白：这台页面要动 DOM 了。它是函数的名字，也是一整套操作网页结构的手艺的名字。这门手艺叫 jQuery：它把"在网页里找到某个元素、改掉它的样子、让它对点击做出反应"这些活儿，压缩成了几行可读的代码。在最流行的年代，全球绝大多数网页都带着它的身影；今天它的光芒被一整套原生接口分走了不少，但它沉淀下来的操作思路、封装手法和工程习惯，仍然活在大量真实项目中。本教程把这门手艺当成一台手术来教：定位、探查、缝合、修复、腔外操作，每一章是一间手术室，每段代码都请你亲手跑。

jQuery：一个快速、轻量的 JavaScript 类库，核心能力覆盖选择器引擎、DOM 操作、事件系统、效果动画与 AJAX 封装。它的设计初衷是抹平各浏览器之间的行为差异，让开发者用一致的接口操作页面。

这台手术台的主线：先定位，再动刀

整本教程翻来覆去只强调一件事：先精准定位，再动手操作。jQuery 的全部 API 都围绕这个节奏展开——$() 负责把目标从文档里"拎"出来，后续的方法都在这批被拎出来的元素上做文章。很多初学者写 jQuery 代码混乱，根子不在 API 记不住，而是在动手之前没有想清楚"我到底选中了哪些元素、它们在文档树的什么位置"。所以本教程的章节编排刻意把"选择器"放在最前面讲透：选择器是麻醉定位，定位不准，后面的每一刀都会切偏。

配套的主线是原生 API 对照。浏览器如今提供了与 jQuery 几乎一一对应的原生接口：querySelector 对着选择器、classList 对着类名操作、addEventListener 对着事件绑定、fetch 对着 AJAX。学每个知识点时，我们都会给出" jQuery 怎么做、原生怎么做、两者差在哪"的对照。这样学完之后，无论你接手的是十年前的老项目还是全新的原生代码库，都能立刻上手。

全册知识地图：先学什么，后学什么

全书按手术的先后顺序分为七个阶段。下面这张地图标出了章与章之间的依赖关系：实线箭头是"必须先学"，虚线箭头是"强烈建议按此顺序"。

图：全册知识地图与学习依赖

读这张图有两条规则。其一，第 1、2 章是基础台：不先弄清 jQuery 对象是什么、选择器怎么精准命中，后面每章都会读得半懂不懂。其二，第 3 章是全书的枢纽——遍历、属性、DOM 修改这些术中操作，既是第 4 章事件绑定的前提，也是第 6 章 AJAX 拿到数据后"往页面上放"的基础。第 5 章动画相对独立，你可以在学完第 3 章后穿插阅读；第 7 章是术后护理，建议在前面六章都过完一遍后再读，呼应感最强。

原生 API 对照：每台手术都有一条不需要 jQuery 的做法

本教程的每个知识点都配有原生写法对照，这不是可有可无的附录，而是理解 jQuery 设计的最好方式。比如读完选择器一章你会知道，$('.item') 背后就是 document.querySelectorAll('.item')，只不过返回值从静态节点列表变成了带一整套操作方法的 jQuery 对象；读完事件一章你会知道，事件委托在原生世界同样可行，靠的是事件冒泡和 closest。带着对照去学，你收获的不止是一个类库的用法，而是一层"类库之下还有什么"的底。

怎么用这本教程

全书共用同一份示例页面：一个门诊分诊台，里面有候诊队列、患者条目和叫号按钮。每个知识点都在这页标本上做实验，前后代码可以互相拼起来跑。建议你不要只看——把示例抄进自己的页面，改个类名、换个选择器，看看会选中什么、选中几个。jQuery 是手艺活，手上不过一遍，眼睛学会了手也没学会。

每章开头都有一页"术前须知"，列出本章可检验的学习目标和知识地图；每节结尾的"要点复盘"帮你离台前核对器械。遇到看不懂的章节，多半是前置章节没扎实，按知识地图的箭头回退即可。