jQuery使用步驟

瀏覽器搜尋 jQuery官網
點選DownLoad jQuery
Download the compressed, production jQuery 3.6.4
- compressed 代表已經壓縮過的版本，程式碼會連在一起，雖不好閱讀但檔案較小，載入時間較短
- 沒有想閱讀jQuery功能怎麼實現的話建議下載此版本
- 3.6.4 代表版本，會不定時更新
Download the uncompressed, development jQuery 3.6.4
- uncompressed 代表為沒有壓縮的版本，程式碼會有分段，好閱讀但檔案較大，載入時間較長
- 3.6.4 代表版本，會不定時更新
存放在本地端的JavaScript資料夾

於HTML檔案的</body>標籤前面，引入jQuery檔案

引入的程式碼需注意位置、路徑，位置會影響網頁載入速度，導致使用者體驗不好 ( 感覺網頁載入很慢 )

<!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.0">
    <title>Document</title>
</head>
<body>
   
    
    <script src="JS/jquery-3.6.4.min.js"></script>   //引入的 jQuery 檔案在這裡，注意路徑
</body>
</html>

於css資料夾內創建一個all.js，用來撰寫jQuery語法，然後將它引入HTML檔案內
- 並打上以下程式碼，代表網頁載入完成後，即可執行jQuery程式碼
  - 安裝VS Code插件Extention : jQuery Code Snippets 即可使用提示
  - VS Code內可簡寫打 : jqdo + Tab自動生成以下程式碼
```
$(document).ready(function () {
    // jQuery 語法
});
```

總結 :

<!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.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>

<body>
    <h1>1234</h1>
 
    <script src="js/jquery-3.6.4.min.js"></script>  **//載入jQuery (本地端) 檔案，下載好的**
    <script src="js/all.js"></script>  **//載入需要撰寫的jQuery檔案**
</body>

</html>