第一个 jQuery 程序 Hello World
在你学习 jQuery 的过程中，写下你的第一个程序是一个重要的起点。就像其他编程语言和框架一样，jQuery 的“Hello World”程序也是最经典的入门示例。通过它，你可以了解 jQuery 是如何加载的、如何操作网页元素的，以及如何响应页面的加载事件。
在本节中，你将学会：
- 如何在 HTML 页面中引入 jQuery；
- 如何使用 jQuery 编写一个简单的“Hello World”程序；
- 如何确保你的 jQuery 代码在网页加载完成后执行。
让我们从零开始，一步一步写出你的第一个 jQuery 程序。
准备工作：创建一个 HTML 文件
首先，你需要一个基础的 HTML 文件。可以用任何文本编辑器（如 VS Code、Notepad++ 或系统自带的记事本）新建一个文件，命名为 index.html，并填入以下内容：
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Hello jQuery</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="greeting">这是原始的文本</h1>
<!-- jQuery 脚本 -->
<script>
$(document).ready(function () {
// 修改页面上的 h1 元素内容
$('#greeting').text('Hello, jQuery!');
});
</script>
</body>
</html>
代码解析
让我们一行一行来看看这些代码到底做了什么。
引入 jQuery 库
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
这行代码的作用是从 jQuery 官方 CDN（内容分发网络）加载 jQuery 库。你也可以选择下载 jQuery 文件放到本地使用，但通过 CDN 更方便。
$(document).ready(...) 是什么？
$(document).ready(function () {
// ...
});
这部分的意思是：等网页上的所有 HTML 元素都加载完成后，再执行括号里的函数。你可以把它理解为“文档加载完成后，我再开始干活”。
这是一个非常重要的步骤，因为如果你在网页还没加载完的时候操作元素，很可能会报错。
使用 jQuery 操作元素
$('#greeting').text('Hello, jQuery!');
$('#greeting')：选中 ID 为greeting的元素，也就是页面中的<h1>标签；.text('Hello, jQuery!')：把这个元素的文字内容改成"Hello, jQuery!"。
这样，原本显示的是“这是原始的文本”，当页面加载完之后，jQuery 会自动将它改为“Hello, jQuery!”。
小结
恭喜你！你已经成功编写了自己的第一个 jQuery 程序。
通过这篇文章，你学习了：
- 如何在 HTML 页面中引入 jQuery；
- 什么是
$(document).ready()，以及它为什么重要； - 如何使用 jQuery 选中元素，并修改它的内容。
接下来你可以尝试用 jQuery 做更多的事，比如修改样式、添加事件响应、动态添加元素等。继续加油，jQuery 的世界正在向你敞开大门！
