jQuery 入門：$().ready() 與 $(document).ready() 有何不同？

初學 jQuery 時，常見兩種文件就緒寫法：$().ready(function(){}) 與 $(document).ready(function(){})。它們究竟有什麼差別？是否可以混用？本文為您釐清觀念。

核心結論

兩者效果完全相同。 當省略 document 參數時，jQuery 內部預設選取 document 物件。因此 $().ready() 只是 $(document).ready() 的簡寫形式。

原理說明

• $() 若無傳入選擇器字串，預設建立包含 document 的 jQuery 物件。
• .ready(handler) 會在 DOM 完全載入後執行 handler，確保頁面元素可被安全操作。
• 此機制類似原生 JavaScript 的 window.onload = function() {}，但 .ready() 觸發時機更早（DOM 就緒即觸發，不需等待圖片等資源載入完成）。

最佳實務建議

1. 推薦使用 $(document).ready()：語意明確，程式碼可讀性較高，團隊協作時不易產生誤解。
2. 簡寫形式：$(function() { ... }) 為最精簡寫法，等同於 $(document).ready()，廣泛用於現代專案。
3. 避免混用多種風格：專案內統一風格，降低維護成本。

程式碼對照

// 完整寫法
$(document).ready(function() {
    console.log('DOM 已就緒');
});

// 簡寫（省略 document）
$().ready(function() {
    console.log('DOM 已就緒');
});

// 最常用簡寫
$(function() {
    console.log('DOM 已就緒');
});

// 原生 JS 對應
window.onload = function() {
    console.log('頁面所有資源載入完成');
};

理解這層關係後，您就能根據團隊習慣選擇適合的寫法，並在除錯時快速判斷程式碼意圖。