請看以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery實踐樹(1) - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
alert("dialog 1:jquery ready函數裡的對話框，by 何問起");
})
</script>
</head>
<body>
<div>
<h1>何問起</h1>
<h2>jQuery實踐樹(1) </h2>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/h/bjae/9ofotfdj.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a><br />
請注意對話框的彈出順序。
</div>
<script>
alert("dialog 2:頁面中的對話框，by 何問起");
</script>
</body>
</html>
代碼中 <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
表示引用jQuery庫，在後面的代碼中可以使用jQuery的功能。
jQuery下載：http://hovertree.com/hvtart/bjae/1d2c278a117f94ca.htm
代碼中 alert() 方法，可以彈出警告對話框
alert的意思為警報，警惕的，留心的， 警告等
javascript的alert() 方法用於顯示帶有一條指定消息和一個 OK 按鈕的警告框。
語法：alert(message)
message 要在 window 上彈出的對話框中顯示的純文本（而非 HTML 文本）
我們知道 html中的代碼執行是有一定順序的，一般從上往下執行。請參考：http://hovertree.com/hvtart/bjae/vgkgit00.htm
那麼示例代碼中彈出的兩個對話框順序應該怎樣呢？
如果沒學習過jQuery，會覺得：
是不是先彈出 dialog 1 ,然後再彈出 dialog 2 ？
但實際效果是這樣的，實踐一下就知道了：http://hovertree.com/texiao/jquerytree/1/
打開網頁實踐結果為，先出現 dialog 2 ，然後再出現 dialog 1
怎麼會這樣呢?不按順序來的。這可以從jQuery的ready函數找到答案。
ready() 方法
定義和用法
當 DOM（文檔對象模型） 已經加載，並且頁面（包括圖像）已經完全呈現時，
會發生 ready 事件。
由於該事件在文檔就緒後發生，因此把所有其他的javascript代碼，jQuery 事件和函數置於該事件中是非常好的做法。正如上面的例子中那樣。
ready() 函數規定當 ready 事件發生時執行的代碼。
ready() 函數僅能用於當前文檔，因此無需選擇器。
允許使用以下三種語法：
語法 1
$(document).ready(function)
語法 2
$().ready(function)
語法 3
$(function)
其中function 必需。規定當文檔加載後要運行的函數。
看到這些說明後，就知道
alert("dialog 1:jquery ready函數裡的對話框，by 何問起");
這個語句會等到頁面加載完成後才執行，
而 alert("dialog 2:頁面中的對話框，by 何問起");
這個語句在加載頁面時已經執行
所以dialog 2會比 dialog 1更早 出現。
參考：http://hovertree.com/menu/chushijquery/