jQuery 教學

jQuery 是一個快速、輕量且功能豐富的 JavaScript 函式庫。它讓 HTML 文件的遍歷與操作、事件處理、動畫效果以及 Ajax 互動變得更加簡單，並提供跨瀏覽器相容的 API。

jQuery 的特色

  • 簡潔語法：用更少的程式碼完成更多的事情
  • 跨瀏覽器相容：自動處理瀏覽器差異
  • 強大的選擇器：支援 CSS3 選擇器及自訂選擇器
  • 鏈式呼叫：流暢的程式碼風格
  • 豐富的插件生態系：大量現成的插件可用
  • 完善的文件：官方文件詳細且範例豐富

版本選擇

jQuery 目前主要有兩種版本：

版本說明
jQuery 3.x完整版，包含所有功能
jQuery 3.x Slim精簡版，不包含 Ajax 和動畫效果模組，檔案更小
建議使用 jQuery 3.x 最新穩定版。如果你的專案不需要 Ajax 功能，可以選擇 Slim 版本以減少檔案大小。

安裝 jQuery

方法一：使用 CDN（推薦）

使用 CDN 載入 jQuery 是最快速的方式，瀏覽器可能已經快取了這些檔案。

Google CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

jsDelivr CDN：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

cdnjs：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

方法二：使用 npm 安裝

如果你使用 npm 管理套件：

npm install jquery

然後在 JavaScript 中引入：

import $ from 'jquery';

方法三：下載到本地

從 jQuery 官網 下載檔案，然後在 HTML 中引入：

<script src="path/to/jquery.min.js"></script>

第一個 jQuery 程式

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一個 jQuery 程式</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <button id="btn">點我</button>
    <p id="message"></p>

    <script>
      $(function () {
        $('#btn').on('click', function () {
          $('#message').text('Hello, jQuery!');
        });
      });
    </script>
  </body>
</html>

這個範例展示了 jQuery 的基本用法：

  1. 等待文件載入完成
  2. 選取 ID 為 btn 的按鈕
  3. 綁定點擊事件
  4. 點擊後修改 #message 的文字內容

官方資源