2014-09-04 237 views
1

我在這裏看到過類似的問題,但我還沒有解決我的問題。我曾嘗試移動Google託管的jQuery文件的CDN鏈接。我試了三個地方的鏈接 - 第一個鏈接的源頭位於head標籤的頂部,我也試圖在head標籤關閉之前添加它,也在body標籤關閉之前添加它,但我仍然得到Uncaught 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> 
+0

你確定沒問題關於你的網絡連接? – kefy 2014-09-04 03:41:10

+2

您使用什麼協議訪問頁面? jQuery的'src'的前導'//'假定使用'http://'或'https://'。 – 2014-09-04 03:42:42

+0

爲什麼不把jquery文件放在JavaScript文件的其餘部分之前? – 2014-09-04 03:42:50

回答

3

我沒有看到你的腳本文件的任何問題。只要確保...

  • 本地腳本引用實際存在於本地開發站點
  • 你還可以訪問CDN的因特網連接引用
  • 並確保運行此頁從網絡服務器而不是從文件系統直接加載它們

關於最後一點,如果您需要通過雙擊直接從文件系統加載頁面,您可以顯式設置協議的CDN腳本參考,以便瀏覽器知道S其中去...

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

謝謝,是的,我確實需要http來修復它。 – 2014-09-04 05:28:04

-3

是的,你用了兩個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> 

其中一人是不夠

+0

您可以根據需要使用任意數量的不同CDN。 – Antiga 2014-09-04 03:48:35

+0

嘿@ gto999 - 使用兩個不同的CDN地址沒有任何問題。此外,這種類型的事情應該是真正的評論,因爲它不是對這個問題的「回答」(如果海報使用相同的CDN,它不會解決她的問題)。 – netpoetica 2014-09-04 03:52:21

0

萬一..如果你想從文件在本地測試代碼://則腳本不會沒有協議加載被定義。所以你會只需要在該路徑上加一個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 
}); 
+1

謝謝,就是這樣。我需要http :.欣賞它! – 2014-09-04 05:27:14

相關問題