📅 最后修改于: 2023-12-03 15:08:06.752000 🧑 作者: Mango
在页面上加载和使用 jQuery 是现代 Web 开发中的关键步骤之一。在本文中，我们将介绍如何在页面完全加载 jQuery，并且可以利用它来执行各种 JS 操作。
一个常用的方法是使用 CDN（内容分发网络）。这是一种提供数据交换服务的网络，使其更快，更可靠，更安全的服务。加载 jQuery 的方式与这些服务有关。
下面是使用 jsDelivr CDN 加载 jQuery 的代码：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
在这个例子中，我们使用了 script 标签来加载 jQuery，并指定了 CDN 的地址。这是一个常见的方法，许多其他 CDN 也同样可以使用，例如 Google CDN。
为了确保在浏览器中正确加载 jQuery，我们需要一些机制来检查它是否成功加载。为此，我们可以使用 onload 事件。例如：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" onload="alert('jQuery loaded!')"></script>
在这个例子中，当 jQuery 成功加载时，将弹出一个消息框。
在页面中，jQuery 的执行需要等待页面完全加载后执行。为此，我们可以使用 $(document).ready() 函数。
$(document).ready(function(){
// 在这里写你的 jQuery 代码
});
这个函数包装了 jQuery 代码，在页面完全加载后执行。
最后，我们可以使用 jQuery 库来编写和执行 JS 代码，例如：
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
在这个例子中，我们在页面上添加了一个按钮和一个段落。当用户单击该按钮时，jQuery 将切换该段落的可见性。
整个代码可以在一个 HTML 文件中找到，如下所示：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<h2>点击按钮切换段落可见性</h2>
<button>切换</button>
<p>这是一个段落。</p>
<p style="display:none">这是另一个段落。</p>
</body>
</html>
jQuery 是非常强大的工具，可以帮助我们更轻松地操作 JS，并带来了许多开发和设计方面的好处。使用上述方法和技巧，我们可以在页面上完全加载 jQuery 并利用它来实现各种动态效果和交互。