首页 > 编程笔记 > JavaScript笔记 阅读：15

jQuery下载配置教程（新手必看）

要在自己的网站中应用 jQuery 库，是需要下载并配置 jQuery 的。本节介绍如何下载与配置 jQuery。

下载jQuery

jQuery 是一个开源的脚本库，可以在它的官方网站中下载。下面介绍具体的下载步骤。

1) 进入 jQuery 官方网站的首页，如下图所示：


图 1 jQuery官方网站的首页

2) 在 jQuery 官方网站的首页中，可以下载所需要的 jQuery 版本，笔者使用 jQuery 3.6.4。

单击网站首页中的“Download jQuery”按钮，页面跳转之后单击所需要的版本链接，选择“另存为”选项，弹出下图所示的对话框。


图 2 下载jquery-3.6.4.min.js

3) 单击“保存”按钮，将 jQuery 下载到本地计算机。下载后的文件名为 jquery-3.6.4.min.js。

配置jQuery

将 jQuery 下载到本地计算机后，还需要在项目中配置 jQuery，即将下载后的文件放置到项目指定的文件夹中（通常放置到 js 文件夹中），然后在需要应用 jQuery 的页面中使用下面的语句，将其引用到文件中。 
<script language="javascript" src="js/jquery-3.6.4.min.js"></script>
或者： 
<script src="js/jquery-3.6.4.min.js" type="text/javascript"></script>
注意，引用 jQuery 的 <script> 标记必须放在所有自定义脚本文件代码的 <script> 标记之前，否则在自定义脚本文件代码中会找不到 jQuery 脚本库。

第一个jQuery脚本

了解了如何下载和配置 jQuery 之后，我们可以通过一个简单的实例尝试编写 jQuery 脚本。

【实例 1】应用 jQuery 弹出一个提示对话框。
1) 创建一个名为 js 的文件夹，并将 jquery-3.6.4.min.js 复制到该文件夹中。
2) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中引用 jQuery 库文件，关键代码如下： 
<script language="javascript" src="js/jquery-3.6.4.min.js"></script>

3) 编写 jQuery 脚本，实现在页面载入完毕后，弹出一个提示对话框，具体代码如下： 
<script>
$(document).ready(function() {
    alert("我的第一个 jQuery 脚本！");
});
</script>
实际上，上面的代码还可以更简单，也就是将 $ (document).ready 用 $ 代替，代替后的代码如下： 
<script>
$(function() {
    alert("我的第一个 jQuery 脚本！");
});
</script>
运行 index.html，将弹出下图所示的提示对话框：


图 3 弹出的提示对话框

熟悉 JavaScript 的读者应该知道，要实现例 1 的效果，还可以通过下面的代码实现： 
<script>
window.onload=function() {
    alert("我的第一个 jQuery 脚本！");
}
</script>

在一个页面中可以放置多个 $(document).ready() 方法，而 window.onload() 方法在页面中只允许放置一个（常规情况）。这两种方法可以同时在页面中执行，两者并不矛盾。不过，通过上述描述我们可以知道，$(document).ready() 方法比 window.onload() 方法载入速度更快。

相关文章