從JavaScript入門教程的“頁面相關事件”這一節我們知道：在JavaScript中，頁面載入事件使用的是window.onload方法。
在jQuery中，對於頁面載入事件，我們使用$(document).ready()方法來替代JavaScript中的window.onload方法，但是這不是簡單的替換。$(document).ready()和window.onload這2個方法功能相似，但是卻有著明顯的區別。
window.onload方法：在頁面所有DOM元素（包括圖片等外部文件）加載完成之後才執行，此時我們才可以操作DOM。也就是說，除了元素加載完成（說白了就是HTML代碼），元素所關聯的文件（如img元素就關聯了圖片）也必須加載完成之後，才會執行window.onload方法。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var e = document.getElementById("btn");
e.onclick = function () {
alert("JavaScript");
}
}
</script>
</head>
<body>
<input id="btn" type="submit" value="提交" /><br />
<img src="../App_images/lesson/run_jq/logo.jpg"/ alt=""><br />
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，我們必須等到所有元素以及元素所關聯的外部文件（如上面的圖片）加載完成了，才會去執行window.onload方法中的代碼，然後我們才能操作DOM中的元素。如果我們把window.onload去掉，我們是無法操作DOM元素的，這一點我們在JavaScript入門教程中已經詳細做過介紹。
$(document).ready()方法：在頁面所有DOM元素（不包括圖片等外部文件）加載完成就可以執行，此時我們就可以操作DOM。
$(document).ready()僅僅是DOM元素加載完成就可以執行，而window.onload除了DOM元素加載完成外還需要等待所有外部文件加載完成才可以執行。
很明顯我們可以知道，使用$(document).ready()相對window.onload來說，可以極大地提高頁面的響應速度，執行效率非常高。
拿咱們美女經常逛的淘寶網來說，每個頁面都有N多大圖，如果使用JavaScript的window.onload方法來處理，那麼美女們必須等到每一張圖片都加載完成才可以執行操作。這個時候，浏覽器崩潰了，美女們崩潰了，馬雲也跟著崩潰了……
但是使用jQuery的$(document).ready()方法就不會這樣，我們不需要等到每一張圖片加載完成，而是只需要等到DOM元素加載完成就可以執行操作了（也就加載一點HTML代碼的事情，能有多大？）。
在jQuery中，對於ready()方法，共有4種寫法：
$(document).ready(functin(){
//代碼部分
})
分析：
這種代碼形式是最常見的，其中$(document)表示“選取document”，然後調用jQuery對象的ready()方法。
這個代碼說白了，就是在ready()方法的括號內插入一個function(){}。也就是說在ready()方法中，傳入的參數是一個匿名函數。沒錯，函數也可以當做參數被傳入另外一個函數內。這些都屬於JavaScript高級部分的內容，有機會站長在JavaScript進階教程再給大家分享。
jQuery(document).ready(function(){
//代碼部分
})
分析：
在jQuery中，$就是指jQuery。因此我們可以使用$來代替jQuery，兩者是等價的。
$(function(){
//代碼部分
})
jQuery(function(){
//代碼部分
})
在jQuery中，最常用的是寫法三。我們也建議大家使用$(function(){})這種形式，方便簡潔。
$(document).ready()是jQuery中最重要的一個方法，可以極大地提高頁面的加載速度。
在JavaScript中，window.onload方法只能調用1次，如果多次調用，則執行最後一個window.onload方法中的代碼。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.write("這是第1個window.onload");
}
window.onload = function () {
document.write("這是第2個window.onload");
}
window.onload = function () {
document.write("這是第3個window.onload");
}
</script>
</head>
<body>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，我們可以很清楚看到：在JS代碼中，如果存在多個window.onload，則只會執行最後一個window.onload。
如果想要實現多個window.onload方法的同時調用，還需要寫上一段兼容性代碼：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
對於上面這段代碼，我們不需要理會。只需要知道如果要實現多個window.onload方法，就必須用到addLoadEvent這段兼容代碼。關於addLoadEvent，我們在JavaScript進階會給大家詳細介紹。
但是在jQuery中，$(document).ready()卻可以多次執行。這裡再一次深刻地體現了jQuery近乎完美的兼容性。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.write("這是第1個window.onload");
}
window.onload = function () {
document.write("這是第2個window.onload");
}
window.onload = function () {
document.write("這是第3個window.onload");
}
</script>
</head>
<body>
</body>
</html>
在浏覽器預覽效果如下：