Question

已解决：我是最大的傻瓜。我将精力集中在打算将脚本加载到的位置（在body标签的末尾），以至于不再关注头部。

瞧，我两次加载了main.js，一次在头部，一次在jQuery加载之后。

感谢所有尝试提供帮助的人，但是您无法治愈我的隧道视野：/

原始帖子：

我正在从Google的CDN导入jQuery，并在自己的js脚本之前加载它，但是在第1行上，我的$(document).ready()函数收到“ $ is undefined”错误。

无论我使用$还是jQuery作为前缀，都会发生此错误。

在过去的一个小时中，我一直在论坛中进行搜索，人们似乎拥有的所有解决方案都是确保jQuery在我的其他脚本之前加载，并且不被可能使用$的其他库所干扰，但我没有使用任何其他库，因此我直接从Google's site

我也尝试过使用Microsoft的CDN和jQuery的CDN。

我已经在Chrome，Firefox和Edge中进行了检查，

开发工具中的“网络”标签首先显示jQuery加载。

<body>

  <aside>
    <div id="nav">
      <h2>ABOUT US</h2>
      <h2 id="donate-button">DONATE NOW</h2>
      <h2>CONTACT US</h2>
      <h2>PHOTO GALLERY</h2>
    </div>
  </aside>


  <!--SCRIPTS-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="Resources/JS/main.js"></script>
</body>

// Resources/JS/main.js

$(document).ready(function() {
  console.log("READY");
  $("#nav h2").css("background-color", "red")
});

我要做的就是消除此错误，因此我实际上可以开始编写脚本了：/

我对JS和jQuery特别陌生，我觉得解决方案是如此简单，而且我只是找错了地方。但是我已经进行了大量的搜索，但找不到适合我的解决方案的人。

编辑：

以下是一些来自Chrome开发工具的屏幕截图，要求提供：

Answer 1

遇到此问题时，请确保将所有jQuery代码包装在以下内容中

(function($){

    // add your code here

})(jQuery);

或在任何jQuery之前添加

$ = jQuery.noConflict();

EG。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  (function($){
    $(document).ready(function() {
      console.log("READY");
      $("#nav h2").css("background-color", "red")
    });
  })(jQuery);
</script>

Answer 2

脚本的一般结构应如下所示：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

main.js

$(document).ready(function()
{
    console.log("READY");
    $('body').append("It's working.");
});

jQuery（）和$（）未定义，但jQuery工作正常

2 个答案: