Question

我在这里看到过类似的问题，但我还没有解决我的问题。我确实尝试移动了Google托管的jQuery文件的CDN链接。我为链接尝试了三个位置 - 头标记顶部的第一个链接源，我也尝试在关闭head标签之前添加它，也就在关闭body标签之前添加它，但我仍然得到未捕获的ReferenceError：$未在我的控制台中定义。我是jQuery的新手，所以任何建议都会有所帮助。我使用的是bootstrap主题，它有点长文件，所以这里是基础知识。我已经包含在我的文件夹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>

Answer 1

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

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

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

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

Answer 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
});

Answer 3

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

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

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

其中一个就足够了

未捕获的ReferenceError：$未定义

4 个答案: