ReferenceError: $ is not defined

问题背景

在进行前端开发时,常常会使用 jQuery 库来方便地操作 DOM 元素、进行数据请求等操作。然而,在页面中引入 jQuery 库后,有时候会遇到 $ is not defined 的错误提示,导致代码无法正常执行。

错误原因

该错误通常是由于以下几种情况引起的:

  • 没有正确引入 jQuery 库
  • 引入了多个版本的 jQuery 库,导致冲突
  • 引入了其他库,与 jQuery 冲突

解决方法

方法一:正确引入 jQuery 库

在 HTML 页面中引入 jQuery 库时,需要确保文件路径正确,并且在引入之前,应该先引入依赖项,例如:

---- ----- ---
------- ----------------------------------------------------------------------------
---- -- ------ - ---
------- --------------------------

其中,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 版本和与其他库的冲突等细节。

示例代码

--------- -----
------
------
    ----- ----------------
    -------------------
-------
------
    -------------
    -- ------------------- ----------

    ---- ----- ---
    ------- ----------------------------------------------------------------------------
    ---- ------- ---------- -- ---
    ------- --------------------------
-------
-------
-- ------- ------
---------------------------- -
    -------------------------- ----------
---

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/30349