jQuery 語法基礎

本篇介紹 jQuery 的基本語法結構，包括 $ 符號、文件就緒事件、鏈式呼叫，以及 jQuery 物件與 DOM 元素之間的轉換。

$ 符號

jQuery 的所有功能都定義在 jQuery 物件中，而 $ 是 jQuery 的別名（alias），兩者完全相同：

// 以下兩行完全等價
jQuery('p');
$('p');

使用 $ 讓程式碼更簡潔，是 jQuery 最常見的寫法。

基本語法結構

jQuery 的基本語法遵循這個模式：

$(selector).action();

• $ - 呼叫 jQuery
• selector - 選擇器，用於找到 HTML 元素
• action() - 對選取的元素執行的動作

例如：

// 隱藏所有 <p> 元素
$('p').hide();

// 取得 id 為 name 的 input 值
$('#name').val();

// 為所有 .btn 元素加上 active 類別
$('.btn').addClass('active');

文件就緒事件

為了確保 jQuery 程式碼在 DOM 完全載入後才執行，我們需要將程式碼放在文件就緒（document ready）事件中：

$(document).ready(function () {
  // DOM 載入完成後執行的程式碼
  $('button').on('click', function () {
    alert('按鈕被點擊了！');
  });
});

簡寫語法

jQuery 提供更簡潔的寫法：

$(function () {
  // DOM 載入完成後執行的程式碼
});

這是最常用的寫法，與 $(document).ready() 完全等價。

使用箭頭函式

在現代 JavaScript 中，也可以使用箭頭函式：

$(() => {
  // DOM 載入完成後執行的程式碼
});

ready vs load

大多數情況下，使用 $(document).ready() 即可，讓程式碼更快執行。

鏈式呼叫 (Chaining)

jQuery 大多數方法會返回 jQuery 物件本身，因此可以連續呼叫多個方法，這稱為鏈式呼叫：

// 不使用鏈式呼叫
$('#box').addClass('highlight');
$('#box').css('color', 'red');
$('#box').fadeIn('slow');

// 使用鏈式呼叫 - 更簡潔
$('#box').addClass('highlight').css('color', 'red').fadeIn('slow');

鏈式呼叫的好處：

• 程式碼更簡潔
• 減少重複的選擇器查詢
• 提升效能

jQuery 物件與 DOM 元素

jQuery 物件

當使用 $() 選取元素時，返回的是一個 jQuery 物件，它是一個類陣列物件，包含了所有匹配的 DOM 元素：

var $paragraphs = $('p');
console.log($paragraphs.length); // 匹配到的元素數量

jQuery 物件 vs DOM 元素

jQuery 物件只能使用 jQuery 的方法，不能直接使用原生 DOM 的屬性和方法：

// 錯誤：jQuery 物件沒有 style 屬性
$('#box').style.display = 'none'; // Error!

// 正確：使用 jQuery 方法
$('#box').css('display', 'none');
// 或
$('#box').hide();

jQuery 物件轉換為 DOM 元素

使用 .get() 方法或中括號語法取得原生 DOM 元素：

// 取得第一個匹配的 DOM 元素
var element = $('#box').get(0);
// 或
var element = $('#box')[0];

// 現在可以使用原生 DOM 屬性
element.style.display = 'none';

// 取得所有匹配的 DOM 元素陣列
var elements = $('p').get();

DOM 元素轉換為 jQuery 物件

將 DOM 元素傳入 $() 即可轉換為 jQuery 物件：

// 原生 DOM 元素
var element = document.getElementById('box');

// 轉換為 jQuery 物件
var $element = $(element);

// 現在可以使用 jQuery 方法
$element.addClass('active');

常見的轉換場景：

// 在事件處理中，this 是 DOM 元素
$('button').on('click', function () {
  // this 是 DOM 元素
  console.log(this.id);

  // 轉換為 jQuery 物件以使用 jQuery 方法
  $(this).addClass('clicked');
});

檢查元素是否存在

jQuery 選擇器總是返回一個 jQuery 物件，即使沒有匹配到任何元素。因此，不能用一般的真假值判斷：

// 錯誤的判斷方式 - 永遠為 true
if ($('#nonexistent')) {
  // 這裡總是會執行
}

// 正確的判斷方式 - 檢查 length
if ($('#box').length > 0) {
  // 元素存在
}

// 簡寫
if ($('#box').length) {
  // 元素存在
}

多個 jQuery 版本共存

如果頁面載入了多個版本的 jQuery，可以使用 $.noConflict() 來管理：

// 載入 jQuery 1.x
<script src="jquery-1.12.4.js"></script>
<script>
var jQuery1 = $.noConflict(true);
</script>

// 載入 jQuery 3.x
<script src="jquery-3.7.1.js"></script>
<script>
// $ 現在是 jQuery 3.x
// jQuery1 是 jQuery 1.x
</script>

更多關於 $.noConflict() 的用法，請參考 jQuery 與其他函式庫共存。