jQuery 入門

Created: October-14, 2018

在本教程中，你將學習如何建立一個支援 jQuery 的網頁。

下載 jQuery

首先，首先下載 jQuery 的副本並將其包含在你的文件中。有兩個版本的 jQuery 可供下載 - 壓縮和 未壓縮。未壓縮的檔案最適合開發或除錯; 同時，建議將縮小和壓縮檔案用於生產，因為它可以節省寶貴的頻寬，並且由於檔案較小而提高了效能。

你可以從這裡下載 jQuery： https://jquery.com/download/

下載 jQuery 檔案後，你可以看到它具有 .js 副檔名，因為 jQuery 只是一個 JavaScript 庫，因此你可以在 HTML 文件中用 <script> 包含 jQuery 檔案，就像包含普通的 JavaScript 檔案一樣。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Simple HTML Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

始終在自定義指令碼之前包含 jQuery 檔案; 否則，當你的 jQuery 程式碼嘗試訪問它時，jQuery API 將不可用。

提示： 如你所見，我們已跳過標記 <script> 內的 type="text/javascript" 屬性。因為 HTML5 中不需要這樣做。JavaScript 是 HTML5 和所有現代瀏覽器中的預設指令碼語言。但是，你仍然可以使用它來使程式碼更易於為使用者解釋。

在 CDN 內的 jQuery

或者，如果你不想自己下載和託管 jQuery，可以通過免費提供的 CDN（內容交付網路）連結在文件中包含 jQuery。

CDN 可以通過減少載入時間來提供效能優勢，因為它們在遍佈全球的多個伺服器上託管 jQuery，當使用者請求檔案時，它將從距離它們最近的伺服器提供。

這也提供了一個優勢，如果你的網頁訪問者在訪問其他網站時已經從同一 CDN 下載了 jQuery 副本，則不必重新下載，因為它已經存在於瀏覽器的快取中。

jQuery 的 CDN 由 MaxCDN 提供

<script src =" https://code.jquery.com/jquery-1.12.4.min.js "> </script>

你還可以通過 Google 和 Microsoft CDN 包含 jQuery。

建立你的第一個 jQuery 支援的網頁

到目前為止，你已經瞭解了 jQuery 庫的用途以及如何將其包含在你的文件中，現在是時候將 jQuery 實際應用了。

在本節中，我們將通過將標題文字的顏色從預設的黑色更改為紅色來執行簡單的 jQuery 操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My First jQuery Powered Web Page</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的例子中，我們通過在文件準備就緒時使用 jQuery 元素選擇器和 css() 方法更改標題的顏色（比如 <h1>）來執行簡單的 jQuery 操作，這稱為文件就緒事件。我們將在後面的章節中學習 jQuery 選擇器，事件和方法。