jQuery 入门

jQuery 入门

将 jQuery 集成到您的网页中

在您的网站上开始使用 jQuery 库有两种主要方式：

• 从 内容分发网络 (CDN) 包含 jQuery。这是推荐的方法。
• 下载 jQuery 库文件并将其托管在您自己的服务器上。

使用 jQuery CDN（推荐）

CDN 将常用文件（如 jQuery）托管在全球分布的服务器上。使用 CDN 有几个优点：

• 加载更快： 用户可能在访问使用相同 CDN 的其他网站时，已经在浏览器中缓存了 jQuery 文件。
• 减轻服务器负载： 文件由 CDN 提供，而不是您的服务器。
• 地理位置接近： CDN 通常从物理上更靠近用户的服务器提供文件，进一步提高速度。

托管 jQuery 的流行 CDN 包括 Google、Cloudflare、jsDelivr 和 Microsoft。

要从 CDN 包含 jQuery，请在您的 HTML 中添加一个 <script> 标签，最好放在紧邻 </body> 结束标签之前。这个位置可以确保在脚本尝试操作 HTML 结构之前，结构已经加载完毕。

使用 Google CDN 的示例（最新 3.x 版本）：

<!-- 请务必在官方 jQuery 网站上查看最新的 3.x 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

使用 jsDelivr CDN 的示例（加载最新 3.x）：

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

注意 URL 中使用了 HTTPS，这对于安全性至关重要。

下载并托管 jQuery

如果您更喜欢或需要自己托管 jQuery（例如，用于离线开发或遵循特定的安全策略），可以从官方 jQuery 网站 下载。

通常有两种版本可用：

• 生产版本 (.min.js)：经过压缩（Minified）以减小文件大小，并在上线网站上加载更快。
• 开发版本 (.js)：未经压缩（Uncompressed）、代码可读，在开发期间用于调试非常有用。

下载所需版本（通常是生产版本），并将其放置在您项目的脚本目录中。

使用 <script> 标签引用本地文件，同样最好放在紧邻 </body> 结束标签之前：

<!-- 假设 jquery-3.7.1.min.js 在一个名为 'js' 的文件夹中 -->
<script src="js/jquery-3.7.1.min.js"></script>

关于 Script 标签的重要注意事项

type="text/javascript"：在 HTML5 中，JavaScript <script> 标签不需要此属性。JavaScript 是默认的脚本语言。	async 和 defer 属性：对于从外部文件加载的脚本，您可以使用 async 或 defer 属性来控制脚本如何下载和执行，从而可能提升页面加载性能。通常推荐使用 defer，因为它在文档解析后按顺序执行脚本；而 async 在脚本下载后立即执行，可能导致乱序。

包含 jQuery 后，您就可以在自己的 <script> 标签或单独的 .js 文件中开始编写 jQuery 代码了（请确保您的代码在 jQuery 库加载之后运行）。