问题背景
在进行前端开发时，常常会使用 jQuery 库来方便地操作 DOM 元素、进行数据请求等操作。然而，在页面中引入 jQuery 库后，有时候会遇到 $ is not defined 的错误提示，导致代码无法正常执行。
错误原因
该错误通常是由于以下几种情况引起的：
- 没有正确引入 jQuery 库
- 引入了多个版本的 jQuery 库，导致冲突
- 引入了其他库，与 jQuery 冲突
解决方法
方法一：正确引入 jQuery 库
在 HTML 页面中引入 jQuery 库时，需要确保文件路径正确，并且在引入之前，应该先引入依赖项，例如：
<!-- 引入依赖项 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 jQuery 库 --> <script src="js/main.js"></script>
其中，jquery.min.js 是 jQuery 库的核心文件，需要首先引入；main.js 是自己编写的 JavaScript 文件，需要在 jQuery 库之后引入。
方法二：解决 jQuery 版本冲突
如果在一个页面中引入了多个版本的 jQuery 库，就会出现 $ is not defined 的错误。解决方法是只引入一个版本的 jQuery 库，并将其放在最前面引入。如果确实需要使用多个版本的 jQuery 库，可以通过 jQuery.noConflict() 方法解决冲突。
-- -------------------- ---- -------
---- ----- ---
------- -----------------------------------------------------------------------------
---- ----- ---
------- -----------------------------
---- -- ------ --- ------ ---------- ------ ---
------- ----------------------------------------------------------------------------
--------
--- ---- - -------------------
-- -- ---- -- - --- ------ --- --
---------方法三：解决与其他库的冲突
如果引入了其他库与 jQuery 冲突，在代码中使用 jQuery 而不是 $ 来操作 jQuery 库即可。
-- -------------------- ---- -------
---- -- ------ - ---
------- ----------------------------------------------------------------------------
---- ----- ---
------- -----------------------------
---- ------ ------ --- ------ - ---
--------
--------------------------------- -
-- ---
---
---------总结
在进行前端开发时，遇到 $ is not defined 的错误提示，通常是由于没有正确引入 jQuery 库、引入了多个版本的 jQuery 库或者引入了其他库与 jQuery 冲突所致。通过以上三种方法可以有效地解决这个问题。在实际开发中，需要特别注意文件路径、依赖项的引入顺序、jQuery 版本和与其他库的冲突等细节。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
-------------
-- ------------------- ----------
---- ----- ---
------- ----------------------------------------------------------------------------
---- ------- ---------- -- ---
------- --------------------------
-------
-------// main.js 文件中的代码
$(document).ready(function() {
$('#content').text('Hello, jQuery!');
});来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30349