未捕获的 ReferenceError：$ 未定义答案

【问题标题】：Uncaught ReferenceError: $ is not defined未捕获的 ReferenceError：$ 未定义
【发布时间】：2014-09-04 03:36:55
【问题描述】：

我在这里看到了类似的问题，但我还没有解决我的问题。我确实尝试过移动 Google 托管的 jQuery 文件的 CDN 链接。我为链接尝试了三个位置 - 第一个链接源位于 head 标签的顶部，我还尝试在 head 标签结束之前添加它，并且在 body 标签结束之前添加它，但我仍然得到未捕获的 ReferenceError: $ 未在我的控制台中定义。我是 jQuery 新手，所以任何建议都会有所帮助。我正在使用引导主题，它是一个长文件，所以这里是基础知识。我已将 js/bjqs.min.js 和 css/bjqs.css 包含在我的文件夹中。

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>jQuery Practice</title>

    <!--jquery  -->

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <!-- Include the plugin *after* the jQuery library -->
<script src="js/bjqs.min.js"></script>

    <!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/freelancer.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <!-- Include the basic styles -->
<link type="text/css" rel="Stylesheet" href="css/bjqs.css" />

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">

</script>
        <![endif]-->


    </head>


<body>

  <!-- Header -->
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">

<!--  Outer wrapper for presentation only, this can be anything you like -->
      <div id="banner-fade">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><img src="img/banner01.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>
      <!-- End outer wrapper -->

      <script class="secret-source">
        $(document).ready(function() {

          $('#banner-fade').bjqs({
            height      : 320,
            width       : 620,
            responsive  : true
          });

        });
      </script>




    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/freelancer.js"></script>



</body>

</html>

【问题讨论】：

你确定你的网络连接没有问题吗？
您使用什么协议访问该页面？ jQuery 的src 的前导// 假定使用http:// 或https://。
您是否使用file: 协议加载页面...如果是这样，您在从互联网加载资源时必须明确指定http: 协议，例如<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@filoxo 如果您不指定协议...然后使用用于加载加载资源的文档的协议...所以如果使用file: 协议来加载 html页面然后我们有问题
谢谢大家，感谢您的回复。 Http：修复它。

标签： jquery

【解决方案1】：

我没有发现您的脚本文件有任何问题。只要确保...

本地脚本引用实际上存在于您的本地开发站点中
您拥有可以访问 CDN 引用的有效 Internet 连接
并确保您是从 Web 服务器运行此页面，而不是直接从文件系统加载它们

关于最后一点，如果需要通过双击直接从文件系统加载页面，可以显式设置CDN脚本引用的协议，让浏览器知道去哪里...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

谢谢，是的，我确实需要 http 来修复它。

【解决方案2】：

以防万一.. 如果您尝试从 file:// 本地测试您的代码，那么脚本不会在没有定义协议的情况下加载.. 所以您只需在该路径上添加一个 http: 前缀。

在运行任何依赖于 jQuery 的代码之前，您可以检查是否已加载 jQuery，如果未加载，则加载它；让你知道..

if ( typeof jQuery === "undefined" ) {
    console.log('loading jquery..');
    var script_tag = document.createElement ( 'script' );
    script_tag.setAttribute ( "type", "text/javascript" );
    //script_tag.setAttribute ( "src", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ); 
    script_tag.setAttribute ( "src", "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" );
    script_tag.onload = result;
    script_tag.onreadystatechange = function () {
        if ( this.readyState == 'complete' || this.readyState == 'loaded' ) {
            result();
        }
    };
    document.getElementsByTagName ( "head" )[0].appendChild ( script_tag );
} else {
    result();
}

function result() {
    console.log('ready');
}

jQuery(document).ready(function($) {
    //your code
});

【讨论】：

谢谢，就是这样。我需要http:。欣赏！

【解决方案3】：

我将 jQuery 链接移至 jsp 页面顶部的 bootstrap.min.js 行上方，并且它起作用了。下面这些行的放置顺序很重要，因为需要首先加载 jQuery js。我将 jQuery 放在页眉中，将引导程序放在页脚中，以便它有足够的时间来加载所有内容。

<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

【讨论】：

【解决方案4】：

是的，你用了两个jquery脚本cdn地址

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

一个就够了

【讨论】：

嘿@gto999 - 使用两个不同的 CDN 地址并没有错。此外，这是真正应该成为评论的类型，因为它不是问题的“答案”（也就是说，如果发布者确实使用相同的 CDN，它不会解决她的问题）。