2. 第一个 jQuery 程序

这是什么：引入 jQuery = 在 HTML 页面里加载一次 jQuery 脚本，之后写代码就能用 $ 调用它的全部能力。

为什么用：上一章我们弄清了 jQuery 是什么，但光知道没用——你得先把它真正装进页面，代码才有 $ 可用，否则 $ 只是一个没人认识的名字。

如何用：本章先试着用 CDN 把 jQuery 引进来，再用 $(function(){}) 等页面就绪，最后写一个点击按钮隐藏段落的完整示例。

2.1 引入 jQuery

使用 jQuery 有两种常用方式：

方式 1：使用 CDN（推荐，简单快捷）

CDN（内容分发网络）可以直接加载 jQuery，不需要下载文件。推荐使用 jQuery CDN（官方推荐）。

在 HTML 的 <head> 或 <body> 标签末尾引入即可（推荐放在 </body> 前，避免阻塞页面渲染）：

<!-- 引入 jQuery（压缩版，生产环境推荐） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

当前较新稳定版：3.7.1（2023-08 发布）。jQuery 3.x 仍是目前最广泛使用的主版本。

方式 2：其他公共 CDN

官方 CDN 之外的公共 CDN 也托管着同一份 jQuery 官方发布文件，比如国内访问速度很快的 npmmirror：

<!-- npmmirror 公共 CDN 上的 jQuery 3.7.1（官方发布文件） -->
<script src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>

想自己管理版本和分包，可到 jQuery 官网下载页面查看完整文件清单。

学习阶段推荐用 CDN，省去文件管理的麻烦。

2.2 文档就绪：$(document).ready()

在使用 jQuery 操作 DOM 之前，我们需要确保 HTML 页面结构已经加载完成。

如果在 HTML 元素还没加载完就去操作它，可能会找不到元素。

jQuery 提供了 $(document).ready() 方法来解决这个问题：

$(document).ready(function () {
  // 页面加载完成后，执行这里的代码
  console.log('页面准备好了！');
});

这个写法也有更简洁的 简写形式（极为常用）：

$(function () {
  // 页面加载完成后执行
  console.log('jQuery 就绪！');
});

两者完全等价。推荐使用简写形式，代码更简洁。

2.3 jQuery 基础语法

jQuery 的核心语法是：

$(selector).action();

$：jQuery 工厂函数，表示要使用 jQuery。
selector：CSS 选择器，用来选中要操作的 HTML 元素（像 #id、.class、p、div>p 等）。
action()：对选中的元素执行某个操作（比如 .hide()、.click()、.css() 等）。

2.4 第一个示例：点击按钮隐藏段落

让我们动手写第一个 jQuery 程序。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>第一个 jQuery 程序</title>
  </head>
  <body>
    <h2>jQuery 入门</h2>
    <p id="msg">点击下面的按钮，我就会消失~</p>
    <button id="hideBtn">隐藏段落</button>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      $(function () {
        $('#hideBtn').click(function () {
          $('#msg').hide();
        });
      });
    </script>
  </body>
</html>

运行效果：点击「隐藏段落」按钮，id 为 msg 的段落就会被隐藏。

2.5 代码解释

$('#hideBtn')：用 ID 选择器选中按钮元素（等同 CSS 的 #hideBtn）。
.click(function(){ ... })：为按钮绑定点击事件。
$('#msg').hide()：选中段落，调用 .hide() 方法让它隐藏。
$(function(){ ... })：确保 DOM 加载完成再执行代码。

2.6 小试牛刀

试着修改上面的代码，让点击按钮后，段落 显示/隐藏切换：

$('#hideBtn').click(function () {
  $('#msg').toggle(); // 切换显示和隐藏
});

.toggle() 方法非常实用，后面我们还会学到更多效果方法。

2.7 小结

本章学会了：

如何通过公共 CDN 引入 jQuery（官方 code.jquery.com、npmmirror 两种公开地址）
使用 $(document).ready()（简写 $(function(){})）确保代码在 DOM 加载后执行
掌握 jQuery 基础语法 $(selector).action()
编写并运行了第一个 jQuery 程序

下一章，我们将深入学习 jQuery 最强大的功能之一——选择器。