jQuery 入門

Created: November-22, 2018

使用以下內容建立檔案 hello.html：

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

JSBin 現場演示

在 Web 瀏覽器中開啟此檔案。因此，你將看到一個包含文字的頁面：Hello, World!

程式碼說明

從 jQuery CDN 載入 jQuery 庫：
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
這引入了 $ 全域性變數，jQuery 函式和名稱空間的別名。

請注意，包含 jQuery 時最常見的錯誤之一是在任何其他可能依賴或使用它的指令碼或庫之前未能載入庫。

當 jQuery 檢測到 DOM（文件物件模型）被 準備好時，推遲執行的函式：

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });

// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

一旦 DOM 準備就緒，jQuery 就會執行上面顯示的回撥函式。在我們的函式內部，只有一個呼叫可以執行兩個主要操作：
1. 獲取 id 屬性等於 hello 的元素（我們的選擇器 #hello）。使用選擇器作為傳遞引數是 jQuery 功能和命名的核心; 整個庫基本上是從擴充套件 document.querySelectorAll MDN演變而來的。
2. 設定 text() 內所選元素 Hello, World!。
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

有關更多資訊，請參閱 jQuery - Documentation 頁面。