javascript - jQuery() 和 $() 未定义,但 jQuery 工作正常

标签 javascript jquery html

<分区>

已解决: 我是最大的笨蛋。我非常专注于我打算加载脚本的位置(在 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 开发工具的一些屏幕截图:

Console log with error

Network tab showing load order

最佳答案

当我遇到这个问题时,我确保将所有 jQuery 代码包装在下面

(function($){

    // add your code here

})(jQuery);

或者在任何 jQuery 之前添加这个

$ = jQuery.noConflict();

例如。

<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>

关于javascript - jQuery() 和 $() 未定义,但 jQuery 工作正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57086234/

相关文章:

Jquery,从中心旋转

javascript - JQuery:在按下的按钮下方显示div

javascript - 无法在 html dom 中选择 id 或 class

javascript - 用 Javascript 设计 Watch 工具

javascript - 停止在移动设备上滚动

javascript - 如何取回 jquery ajax 请求发送的 xhr 错误数据?

html - 如何通过单击列表项来显示 div

javascript - 带徽章的 Bootstrap 多行按钮

java - 如何使用jsoup访问java中子元素的属性?

html - 为什么我的页眉没有占据整个页面的宽度?