如何取得 jQuery？下載、CDN 與版本差異完整說明
本篇文章介紹 jQuery 如何取得及使用，並詳細說明發佈版號、版本之間的差異性。取得的方式有兩種：下載到專案裡 ，或是直接使用 CDN 。
下載 jQuery
下載到專案中指定的資源目錄，例如：放在 js 中。
版號差異
jQuery 至今發布過四個主要版本，它們的差別不在於功能多寡，而在於 要支援到哪些瀏覽器 。舊版本為了相容早期的 IE，內部保留了大量的相容處理，體積也因此較大；新版本捨棄這些包袱，換來更小的檔案與更嚴謹的安全性。選擇時先確認專案的目標瀏覽器，在支援範圍內挑維護中的版本即可；沒有特殊需求的話，3.x 是目前最穩妥的選擇。
| 版號 | 瀏覽器支援 | 維護狀態 |
|---|---|---|
| 1.x | 相容 IE6、7、8，使用最為廣泛 | 官方只做 Bug 維護，功能不再新增 |
| 2.x | 不相容 IE6、7、8，較少人使用 | 官方只做 Bug 維護，功能不再新增 |
| 3.x | 不相容 IE6、7、8，僅支援較新的瀏覽器 | 仍在維護，部署量最大，本文範例採用 |
| 4.x | 不再支援 IE10 以及更早版本 | 已釋出正式版，體積更小、強化對跨站腳本（XSS）的防禦 |
發布版本
確定版號之後，同一個版本底下還會依 包含哪些模組 與 是否經過壓縮 各分成兩種，兩個維度交叉組合，就成了官網上看到的四個檔名。這是初次下載時最容易看花眼的地方，不過只要分別理解這兩件事，要拿哪一個檔案就一目了然了。
模組
第一個維度是功能上的取捨。jQuery 把幾個體積較大的功能拆成獨立模組，若專案根本用不到，就可以改用不含這些模組的版本來縮小檔案。判斷方式很直接：翻一下專案有沒有呼叫到那些方法，沒有就放心選精簡版。
- 完整版：標準版，包含所有模組。例如：
jquery-xxx.js。 - Slim：精簡版，不包含 Ajax 及 Effects 這兩個模組。例如：
jquery-xxx.slim.js。
用不到就別載
Effects 模組指的就是 絢麗的網頁動態效果 那一系列方法。若專案完全沒用到，改用精簡版可以再省下一些流量。
分支
第二個維度是檔案的形態，同一份程式碼會提供壓縮與未壓縮兩種。兩者的功能完全相同，差別只在可讀性與檔案大小，因此慣例上是開發階段用未壓縮的版本，方便追進去看程式碼，正式上線前再換成壓縮過的。
- Production：已被優化、壓縮的狀態，通常用於對外運作的網站。（
jquery-xxx.min.js、jquery-xxx.slim.min.js） - Development：未被優化、壓縮的狀態，通常用於測試、開發。（
jquery-xxx.js、jquery-xxx.slim.js）
小結
| 標準版 | 精簡版（Slim） | |
|---|---|---|
| 模組 | 全部 | 無 Ajax、Effects 模組 |
| 分支 | Production：jquery-xxx.min.js Development： jquery-xxx.js | Production：jquery-xxx.slim.min.js Development： jquery-xxx.slim.js |
將 jQuery 資源引入到 HTML 中
未將資源正確地引入到 HTML 中，是不能使用 jQuery 的。因此，我們需要把 jQuery 資源正確地引入網頁，引入的語法就是 <script> 。
本地資源
以相對路徑的描述方式，在 </body> 前面引入 jQuery 資源。
<!-- jQuery 函式庫引入 -->
<script src="./js/jquery-3.7.1.min.js"></script>
<!-- 專案資源引入（放在 jQuery 的下方，以確保 jQuery 可以先載入） -->
<script src="./js/index.js"></script>CDN（Content Delivery Network）內容傳遞網路
CDN 是指一種透過網際網路相互連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將檔案傳送給使用者，藉此提供高效能、可擴展性及低成本的網路內容傳遞。它具有快取效果，只要開過一次網頁，就會將 jQuery 儲存在使用者端，以提升網頁的開啟速度。我們可透過 jQuery CDN 來取得 CDN 資源。
<!-- jQuery 函式庫引入 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 專案資源引入（放在 jQuery 的下方，以確保 jQuery 可以先載入） -->
<script src="./js/index.js"></script>資源引入
JavaScript 資源可以在 HTML 中任何一個地方引入。但請切記一點，若有牽涉 DOM 的操作，一定要確保 DOM 準備完畢，才能引入資源，否則會找不到操作對象。因此，大多數的網路教學都會建議初學者將 JavaScript 資源的引入，放置在 </body> 前面，以減少出錯的狀況發生。
但這樣是最好的方式嗎？當然不是。隨著科技的日新月異，瀏覽器的功能愈來愈強大，已經有更好的方式來解決此問題。有興趣的觀眾請移駕 JavaScript 寫在哪裡：外部引入 。
常見問題
jQuery 該選哪一個版本？
多數情況選 3.x 就好，它仍在維護、部署量最大，外掛與教學資源的相容性也最完整，本文範例用的 3.7.1 就是這一系列。4.x 已釋出正式版，體積更小並強化了對跨站腳本的防禦，但不再支援 IE10 及更早版本，確認相依的外掛都已跟進再換。若還要支援 IE6 至 IE8，才需要退回 1.x。
標準版和精簡版（slim）差在哪？
精簡版拿掉了 Ajax 與 Effects 兩個模組，體積更小。如果專案不需要非同步取資料，也不用 fadeIn、slideDown 這類動畫，就可以改用精簡版。
min.js 和一般的 js 檔差在哪？
min 是 Production 分支，已經過優化與壓縮，適合對外運作的網站；沒有 min 的是 Development 分支，保留完整排版與註解，方便開發與除錯。
要用下載的還是 CDN？
CDN 由最靠近使用者的伺服器提供檔案，而且使用者若在別的網站載過同一份資源就能直接命中快取，開啟速度較快。但 CDN 一旦連不上網頁就會失效，內部系統或離線環境建議下載到專案裡。
jQuery 的 script 標籤要放在哪裡？
只要確保 DOM 已經準備好，並且 jQuery 一定在自己的程式碼之前載入即可。最保險的做法是放在結束的 </body> 前面，若要放進 <head> ，可以搭配 defer 屬性，詳見 JavaScript 寫在哪裡 。
延伸閱讀
參考資料：jQuery 官方下載頁