如何使用 jQuery CDN 建立互動網頁
更新日期： 2024 年 11 月 6 日
在建立互動網頁的過程中，jQuery 是非常受歡迎的 JavaScript 庫，因其簡潔的語法和高效的 DOM 操作能力，讓開發者能夠輕鬆地實現複雜的網頁行為。
而在現今的開發中，使用 CDN（Content Delivery Network） 引入 jQuery，是常見且有效的做法之一。
在 cdnjs.com 這個網站上，我們可以找到 jQuery 以及其他常用 JavaScript 庫的 CDN 連結。
CDN 是一種分布式伺服器網路，透過全球各地的節點來加速網頁資源的下載速度。
在 cdnjs.com 網站中，你可以直接搜尋 jQuery，然後選擇適合的版本及引入方式。
選擇的版本越新，功能越完整，但可能存在相容性問題；較舊的版本則能保證相容性，但可能缺少一些最新的功能。
步驟：引入 jQuery CDN 連結
- 前往 cdnjs.com。
- 搜尋並選擇需要的 jQuery 版本。
- 複製其 CDN 連結。
引入 jQuery CDN 的基本語法如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/{版本號}/jquery.min.js" defer></script>在這段語法中，defer 屬性確保了腳本會在 HTML 完全載入後才執行。
了解 defer 屬性的重要性
<script> 標籤中的 defer 屬性可以確保，所引用的外部腳本會在 HTML 完全解析後才執行。
這樣可以防止因為網頁未完全加載，而導致的 JavaScript 錯誤。
對於 jQuery 這種工具性框架，尤其建議加上 defer 屬性，以避免在 DOM 元素未準備好時就執行，從而引發錯誤。
defer 語法的應用
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/{版本號}/jquery.min.js" defer></script>在這裡，defer 會推遲腳本的執行，使其在 HTML 標籤和內容完全加載後才執行，保證 jQuery 能夠成功初始化。
在 HTML head 中新增一個 JavaScript 檔案
雖然我們已經在網頁中引入了 jQuery CDN，但若要真正使用 jQuery 來操作網頁元素，還需要額外撰寫 JavaScript 程式碼。
最佳實踐是將自定義的 jQuery 程式碼，分離到一個獨立的 JavaScript 檔案中，並在 HTML 的 <head> 或 <body> 中引入這個檔案。
步驟：建立與引入外部 JavaScript 檔案
- 建立 JavaScript 檔案：在專案資料夾中新增一個
.js檔案，例如script.js。 - 撰寫 jQuery 程式碼：在
script.js中撰寫 jQuery 程式碼來操作網頁元素。 - 引入 JavaScript 檔案：在 HTML 中新增一個
<script>標籤來引入這個 JavaScript 檔案。
HTML 中的引入範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery CDN Example</title>
<!-- 引入 jQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/{版本號}/jquery.min.js" defer></script>
<!-- 引入自訂的 JavaScript 檔案 -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 網頁內容 -->
</body>
</html>為何需要額外的 JavaScript 檔案？
當我們在 HTML 中引入 jQuery CDN 時，只是加載了 jQuery 庫，並未執行任何具體的功能。
要真正使用 jQuery 語法操作網頁，必須撰寫自訂的程式碼來觸發相應的功能。
將這些程式碼獨立到一個 JavaScript 檔案中有以下幾個好處：
- 可讀性與維護性：將 jQuery 程式碼集中於一個檔案，便於管理和維護。
- 重複使用：不同的 HTML 頁面都可以引用相同的 JavaScript 檔案，實現代碼重複使用。
- 最佳效能：獨立的 JavaScript 檔案能夠被瀏覽器快取，加速載入速度。
JavaScript 檔案如何使用 CDN 的 jQuery？
當我們在 HTML 中按順序引入 jQuery CDN 與自訂的 JavaScript 檔案時，script.js 會在 jQuery 加載完成後才能執行，因為 defer 屬性保證了此執行順序。
因此，在 script.js 中撰寫的 jQuery 程式碼，可以直接調用從 CDN 加載的 jQuery 函數，無需額外設置。
例如，script.js 中可以這樣撰寫：
$(document).ready(function(){
$('body').css('background-color', 'lightblue');
});這段程式碼會在網頁完全載入後改變背景顏色，而此 jQuery 語法正是依賴 CDN 中的 jQuery 庫。
結語
使用 jQuery CDN 並在 HTML head 中引入獨立的 JavaScript 檔案，是在網頁中使用 jQuery 的最佳實踐。
這樣的結構可以保證腳本的可維護性、效能優化，並防止因網頁未載入完全而產生的執行錯誤。