剑客有剑，书生有笔。写网页的人，也需要一件趁手的兵器。 jQuery 就是这样一柄轻剑——快、轻、不啰嗦，让“找到元素、操作元素”这件事变得干净利落。

本式要点
  • 知道 jQuery 解决什么问题、为什么今天仍然值得学
  • 会从本地文件引入 jQuery，并掌握正确的引入顺序
  • 认识 $(document).ready，写出自己的第一个交互

为什么是 jQuery

jQuery 诞生于 2006 年，曾是最流行的 JavaScript 库：它把浏览器之间不一致的细节抹平， 提供了一套极其简洁的 API。本教程使用的版本是 4.0.0。

如今原生 JavaScript 已经强大许多，但我们仍然推荐你学 jQuery，理由有三：

  • 存量项目遍地都是——无数网站、后台系统、WordPress 插件仍在用它，会 jQuery 才能维护它们；
  • 它是理解 DOM 的绝佳桥梁——jQuery 的“选择器”与 CSS 选择器一一对应，学一遍等于把 DOM 的核心概念重新嚼碎；
  • 写起来真的爽——链式调用、隐式遍历，几行代码能顶原生十几行。
心法：jQuery 与 Bootstrap 互不需要

正如第二回第一式所说，Bootstrap 5 不依赖 jQuery；反过来，jQuery 也不依赖 Bootstrap。 它们一个是“样式与组件库”，一个是“DOM 操作库”，各司其职。本回最后一式，我们会让两者合璧。

引入本地文件

jQuery 只有一个文件：jquery-4.0.0.min.js（min 表示压缩版，用于生产环境； 开发学习想读源码的话可以用未压缩版 jquery-4.0.0.js）。 同样放在 </body> 之前，并且必须排在你自己的脚本之前—— 因为你的脚本要使用 $，就得等它先登场。

认识 $(document).ready

还记得上一回的思考题吗？“脚本放在 <head> 里会找不到元素”。 jQuery 提供了一个更优雅的解法——就绪事件：把代码交给它， 等整个页面解析完毕后再执行，脚本从此可以放心地放在任何位置。

两个小知识：

  • “就绪”指的是 DOM 树解析完成，不一定等图片全部加载完——所以页面秒开，交互先行；
  • $ 就是 jQuery 的别名，两者完全等价，写哪个都行。

第一个交互

接下来是本回的第一招：点击按钮，改变一段文字。先看效果——

例 1 · 点击按钮，改变文字

这里还没有动静……

拆解这两行代码：

  • $('#btn-hello')——用选择器 #btn-hello（即 id 为 btn-hello 的元素）找到按钮；
  • .on('click', fn)——给它绑定点击事件，点击时执行后面的函数；
  • $('#msg-hello').text('……')——找到段落，把它的文字替换成新内容。
心法：链式调用

jQuery 的大多数方法都会返回“自己”，因此可以把操作串成一条链，例如 $('#btn-hello').addClass('btn-lg').text('换件衣裳')—— 同一行里先加大号样式、再改文字。第四式讲样式操作时，你会越来越喜欢这种写法。

练功 · 第一式
  1. 用简写版 $(function () { … }) 把例 1 的脚本重写一遍，再点击试试。
  2. 新写一个页面：两个段落、一个按钮，点击按钮后让两个段落同时变成红色文字。
  3. 思考题：把绑定事件的代码放在 $(document).ready 里，与放在 </body> 末尾直接执行，效果一样吗？为什么？
参考答案 1

效果完全一致。养成习惯：自己的脚本整体包在 $(function () { … }) 里， 就再也不用操心脚本位置与加载顺序的问题。

参考答案 2

注意这里的选择器是 $('p')——没有 # 前缀，选中的是页面上所有段落。 jQuery 会对选中的每个元素都执行操作，这就是它的“隐式遍历”。下一式我们专门修炼选择器。

参考答案 3

在这个例子中效果一样：脚本放在 </body> 末尾时，元素已经解析完毕，直接绑定即可。 但 ready 更稳——无论脚本放哪、无论元素后面才被动态添加，只要“页面就绪”就动手， 而且一个页面可以注册多个 ready 回调，互不干扰。江湖规矩：能包 ready 就包 ready。

本式小结

  • jQuery 是一柄轻剑：用选择器找元素，用方法操作元素；
  • 引入时先 jQuery、后自己的脚本，放在 </body> 之前；
  • $(function () { … }) 是就绪事件的简写，也是今后每页代码的“标准外套”。
下一式，修炼轻剑的第一式剑诀——选择器。