外部jQuery指的是将jQuery库文件作为独立的资源文件引入到HTML页面中，而不是通过内嵌脚本（inline script）的方式直接在页面中编写jQuery代码，这样做的好处是可以缓存jQuery库文件，避免每次请求页面时都要加载jQuery代码，从而提高网页的加载速度和性能。
以下是如何在HTML文件中外部引入jQuery库的步骤：
1. 下载jQuery库文件
访问jQuery官方网站（https://jquery.com/）或者使用CDN服务获取jQuery库文件，可以通过CDN链接直接引用，如下所示：
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
2. 创建HTML文件
创建一个新的HTML文件，并在<head>标签内或者<body>标签的底部引入刚刚复制的jQuery库的链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>External jQuery Example</title>
<!引入jQuery >
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<!页面内容 >
</body>
</html>
或者放在<body>标签的底部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>External jQuery Example</title>
</head>
<body>
<!页面内容 >
<!引入jQuery >
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</body>
</html>
3. 编写jQuery代码
在引入jQuery库之后，可以开始编写jQuery代码，通常我们会把这些代码包裹在$(document).ready()函数中，确保DOM完全加载后再执行jQuery代码。
<script>
$(document).ready(function() {
// 在这里编写你的jQuery代码
console.log("jQuery is working!");
});
</script>
4. 本地测试
保存HTML文件，然后在浏览器中打开该文件以测试jQuery是否已经成功加载并运行。
注意事项：
确保网络连接正常，以便从CDN加载jQuery库。
如果出于安全或网络问题需要使用本地版本的jQuery库，可以将下载的.js文件放置在项目文件夹中，并将src属性值更改为本地文件路径。
当使用外部jQuery库时，不需要再HTML文件中编写<script>...</script>来包含jQuery源码。
由于浏览器的同源策略，如果HTML页面和jQuery库文件不在同一个域名下，可能会遇到跨域问题，解决方法包括使用相对路径、配置CORS或者将jQuery文件放在同一域名下。
以上步骤展示了如何在HTML文件中外部引用jQuery库，并编写基本的jQuery代码，随着实践的深入，你将能够编写更加复杂和功能强大的jQuery脚本。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/349221.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复