本文目录导读：
在开发过程中,JavaScript（JS）引入jQuery时可能会遇到各种报错，这些报错通常是由于配置错误、路径问题或者版本不兼容等原因引起的，以下是一篇关于JS引入jQuery报错的文章，旨在帮助开发者诊断和解决这些问题。
常见报错类型
1 引入错误
错误示例：
Uncaught ReferenceError: jQuery is not defined原因分析： 当在JavaScript代码中尝试使用jQuery函数或方法时，如果jQuery没有被正确引入，就会抛出此错误。
2 路径错误
错误示例：
Error: Cannot find module 'jquery'原因分析： 如果jQuery的路径设置错误，或者在package.json或npm依赖中缺少jQuery，那么在尝试引入时会报此错误。
解决方法
1 检查引入方式
确保使用正确的引入方式,以下是一些常见的引入方法：
- HTML标签引入：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 本地文件引入：
<script src="path/to/jquery.min.js"></script>
2 检查路径
如果使用本地文件引入,请确保路径正确无误，以下是一些检查路径的方法：
- 使用绝对路径：
<script src="/path/to/jquery.min.js"></script>
- 使用相对路径：
<script src="js/jquery.min.js"></script>
3 检查版本兼容性
确保jQuery版本与你的项目兼容,以下是一些常见版本：
| 版本 | 发布时间 | 特点 |
|---|---|---|
| x | 2008年 | 基础版本 |
| x | 2010年 | 增强功能 |
| x | 2012年 | 性能优化 |
| x | 2016年 | 模块化 |
示例代码
以下是一个简单的HTML示例,展示如何正确引入jQuery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello, jQuery!</h1>
<script>
$(document).ready(function(){
$("h1").click(function(){
$(this).hide();
});
});
</script>
</body>
</html> FAQs
1 为什么我的jQuery代码没有执行？
解答： 这可能是由于jQuery没有被正确引入或者页面加载时jQuery脚本还没有执行，请检查你的引入方式是否正确，并确保页面在加载时jQuery脚本已经加载完成。
2 我应该使用哪个版本的jQuery？
解答： 选择jQuery版本时，应考虑你的项目需求和兼容性，如果你需要最新的功能和性能优化，可以选择3.x或4.x版本，如果你需要与旧版浏览器兼容，可以选择2.x版本。
