JavaScript未捕獲ReferenceError：未定義jQuery; Uncaught ReferenceError：$未定義

它在我的小提琴中工作正常。

但是，當我將它傳輸到Dreamweaver時，它無法工作。我在編碼中發現了這兩個錯誤。

未捕獲的ReferenceError：未定義的jQuery
未捕獲的ReferenceError $沒有定義

我與此有關的兩個錯誤之前的文章讀過，並試圖根據提供的方法來解決，但是，它仍然無法正常工作，我該如何解決這個問題？

這是我在Dreamweaver全編碼

<body> 
    <div class="buttons" style="background-color: rgba(0,0,0,.8);"> 
    <a class="button" id="showdiv1">Div 1</a> 
    <a class="button" id="showdiv2">Div 2</a> 
    <a class="button" id="showdiv3">Div 3</a> 
    <a class="button" id="showdiv4">Div 4</a> 
    </div> 

    <div id="div1">1</div> 
    <div id="div2">2</div> 
    <div id="div3">3</div> 
    <div id="div4">4</div> 
</div> 
<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 

<script language="JavaScript" type="text/javascript"> 
var selectedEffect="explode"; 
var options = { percent: 100 }; 
$('#showdiv1').click(function() { 
    $('div[id^=div]').hide(); 

    $('#div1').show(selectedEffect, options, 500, callback); 
}); 
$('#showdiv2').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div2').show(selectedEffect, options, 500, callback); 
}); 

$('#showdiv3').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div3').show(selectedEffect, options, 500, callback); 
}); 

$('#showdiv4').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div4').show(selectedEffect, options, 500, callback); 
}); 

function callback() { 
     setTimeout(function() { 
     $("#effect:visible").removeAttr("style").fadeOut(); 
     }, 1000); 
    }; 
</script> 
</body> 
</html>

CSS

<style type="text/css"> 

.button { 
    cursor:pointer; 
    display:inline-block; 
    margin:10px; 
    clip: rect(auto,auto,auto,auto); 
} 

#div1 { 
    background:aqua; 
    padding:20px; 
    width:100px; 
    text-align:center; 
    display:none; 
} 
#div2 { 
    background:blue; 
    padding:20px; 
    width:100px; 
    text-align:center; 
    display:none; 
} 
#div3 { 
    background:orange; 
    padding:20px; 
    width:100px; 
    text-align:center; 
    display:none; 
} 

#div4 { 
    background:green; 
    padding:20px; 
    width:100px; 
    text-align:center; 
    display:none; 
} 
a { 
    color:aqua; 
    -webkit-filter: grayscale(1.0); 
} 
a:hover { 
    color:red; 
    -webkit-filter: grayscale(0.0); 
} 
</style>

來源

2014-07-25 Soo

你必須加載你的jQuery UI的代碼的''

您沒有包含jQuery庫。在jsfiddle它已經在那裏。只需在頭部包含這一行。

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

來源

2014-07-25 01:31:18

非常感謝〜它的工作〜 – Soo

你有你的腳本標記建設一個錯誤，這一點：

<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

應該是這樣的：

<script language="JavaScript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

你有一個「腳本」字在中間丟失你的腳本標籤。你也應該刪除http：//讓瀏覽器決定是否使用HTTP或HTTPS。

UPDATE

但你的主要錯誤是，你是包括jQuery用戶界面（只），您必須首先包括jQuery的！ jQuery UI和jQuery一起使用，而不是單獨使用。 jQuery UI依賴於jQuery。你應該把此行jQuery用戶界面前：

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

來源

2014-07-25 01:31:18

額外的屬性不做任何事情，協議相對的URL只是一個很好的。 – user2864740

在本地測試jQuery（即沒有服務器）時，不要使用相關協議。 – j08691

@ user2864740這是一個很好的直到你使用http和更高版本的https的網站，並突然瀏覽器阻止你的HTTP資源（jQuery）。 –

相關問題