我無法讓我的jQuery在最簡單的層面上工作

好的，所以這是一個總的noob問題。我正嘗試使用HTML，CSS和JavaScript從頭開始構建網站，並且我想使用jQuery。出於某種原因，我可以得到HTML和CSS的工作，但我不能在我的script.js文件中使用jQuery。我下載的jQuery：我無法讓我的jQuery在最簡單的層面上工作

而且我已經鏈接到它與<script>標籤，但是當我嘗試使用我已經建立了，什麼也沒有發生。

我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Freeflow Academy</title> 

     <link rel='stylesheet' type='stylesheet' href='stylesheet.css'> 
     <link rel='stylesheet' type='stylesheet' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css' /> 

     <script type='text/javascript' src='script.js'></script> 
     <script type='text/javascript' src="jquery-2.2.0.min.js"></script> 
    </head> 
    <body> 
     <p>This is a test</p> 
    </body> 
</html>

我的CSS：

p {  
    background-color: blue; 
}

我的JavaScript的使用jQuery：

$(document).ready(function(){  
    $('p').on('click', function(){ 
     $(this).css('background-color','red');  
    });  
});

所有我想要做的就是背景顏色改變點擊。任何幫助表示讚賞。我認爲這個問題與我的<script>或<link>標籤有關，但我不確定哪一個。

來源

2016-02-07 Kai Christensen

瀏覽器控制檯中的任何錯誤？ – Lal

我會檢查。 OK：'ReferenceError：Can not find variable：$'and'SyntaxError：Invalid character'\ u0001'' –

ok ..第一個錯誤是因爲加載腳本的順序不正確..現在，對於第二個錯誤，你能告訴錯誤的行號，否則在[小提琴]（https://jsfiddle.net/）中重現問題.. – Lal

首先加載jQuery的，那麼你的自定義腳本

<script type='text/javascript' src="jquery-2.2.0.min.js"></script> 
<script type='text/javascript' src='script.js'></script>

加載優先級是從上到下，如果腳本加載之前沒有加載jQuery的，它不會工作。

來源

2016-02-07 17:45:00 PovilasC

嗯。沒有改變。在控制檯中仍然出現相同的錯誤。 –

你可以給一個演示網址嗎？ @KaiChristensen – PovilasC

我會看看我能否得到小提琴的運行。 –

順序不正確，先裝jQuery和腳本，然後根據你的榜樣，你要載入您的自定義JavaScript你加載的jQuery之前

<script type='text/javascript' src="jquery-2.2.0.min.js"></script> 
<script type='text/javascript' src='script.js'></script>

來源

2016-02-07 17:45:30

嗯。沒有改變。在控制檯中仍然出現相同的錯誤。 –

。

加載順序

<script src="jquery-2.2.0.min.js"></script> 
<script src="script.js"></script>

此外，但未涉及到JavaScript錯誤是你的樣式表的順序和你使用的是type屬性值，這應該是type="text/css"。

我在jsbin上創建了一個工作示例。

來源

2016-02-07 17:47:37

試着用正確的標籤順序提及腳本標籤的字符集。

<script type='text/javascript' src="jquery-2.2.0.min.js"></script> 
    <script type='text/javascript' charset="UTF-8" src='script.js'></script>

來源

2016-02-07 17:55:51

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Freeflow Academy</title> 

     <link rel="stylesheet" type="stylesheet" href="stylesheet.css"> 
     <link rel="stylesheet" type="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    </head> 
    <body> 
     <p>This is a test</p> 

     <script type="text/javascript" src="jquery-2.2.0.min.js"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </body> 
</html>

首先，最好的做法是在文件的最後加載腳本（jQuery的，您的自定義腳本等）。另外，我會去CDN。你可以找到幾個爲什麼要這樣做的原因here（只是谷歌它）。

單引號或雙引號只取決於您的風格。我會加倍努力，但只要保持在一個地方，保持代碼清潔：D。

儘管您的帖子中有script訂單，但可能的唯一原因是您的Apache設置。也許相對路徑和目錄根目錄不正確。你可以看一下here

來源

2016-02-07 18:01:10 stefanz

如前所述，加載順序很重要。此外，它是一個好主意，從他們的CDN加載的jQuery像這樣：

<script type='text/javascript' src="//code.jquery.com/jquery-2.2.0.min.js></script> 
<script type='text/javascript' src='script.js'></script>

同時確保所有外部資源加載正確的協議在href=的http:部分（如HTTP或HTTPS）條：

<link rel='stylesheet' type='stylesheet' href='//code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>

如果在更新代碼後仍然出現錯誤，請嘗試清除瀏覽器緩存。

來源

2016-02-07 18:19:24 F4Q

我無法讓我的jQuery在最簡單的層面上工作

回答

相關問題