jQuery 選擇器在方法外賦值變成空值？核心原因：DOM 尚未就緒

問題重現

<div id="test">百度</div>
<script>
var show = $("#test").html(); // 全域變數，預期抓到 "百度"
function test() { alert(show); } // 實際 alert 空值或 undefined
</script>

將賦值移入 test() 內則正常。

根本原因：腳本執行時機早於 DOM 解析完成

• 瀏覽器自上而下解析 HTML，遇到 <script> 立即執行。
• 此時 <div id="test"> 尚未被解析進 DOM 樹，$("#test") 選不到元素，回傳空 jQuery 物件，.html() 自然為空。
• 函數 test() 稍後被呼叫（如按鈕點擊），此時 DOM 已就緒，選取成功。

三種標準解法

1. 腳本放在 </body> 之前：確保所有 DOM 元素已解析。
2. 使用 jQuery Ready 事件：

   $(function() { var show = $("#test").html(); /* 此處安全 */ });

3. 原生 DOMContentLoaded：

   document.addEventListener('DOMContentLoaded', () => { var show = document.getElementById('test').innerHTML; });

最佳實踐

習慣將所有 DOM 相關邏輯包裹在 $(function(){ ... }) 或 $(document).ready(...) 中，避免 90% 的「找不到元素」坑。