JavaScript和HTML之間的交互：
1.通過用戶和瀏覽器操作頁面時引發的事件來處理的。
2.當文檔或者它的某些元素發生某些變化時，瀏覽器會自動生成一個事件。
例如：當瀏覽器裝載完一個文檔后，會生成事件（屬於2）；當用戶單擊某個按鈕時，也會生出事件（屬於1）。
DOM加載完成：初始化頁面的前提大都是DOM文檔就緒，即文檔樹加載完成，而非整個頁面（包括頁面中的所有元素）載入完成。
因為后者涉及到載入頁面中包含的圖像及其他二進制內容完成后才能觸發頁面載入事件（即onload）
以瀏覽器裝載文檔為例，在頁面加載完畢后，瀏覽器會通過JavaScript為DOM元素添加事件。
在常規的JavaScript代碼中，通常使用windows onload方法，
而在jQuery中，使用的事$（document）.ready（）方法。
jQuery就是用$（document）.ready（）方法來代替傳統JavaScript的w$（document）.ready（）方法的。通過使用該方法，可以在DOM載入就緒時(文檔樹)就對其進行操縱並調用執行它所綁定的函數。
$（document）。ready（）方法和windows onload方法之間的細微區別：
1.執行時機
windows onload方法是在網頁中所有的元素（包括元素的所有關聯文件）完全加載到瀏覽器后才執行，即JavaScript此時才可以訪問網頁中的任何元素。
jQuery中的$（document）.ready（）方法注冊的時間處理程序， 在DOM完全就緒時就可以被調用。此時，網頁的所有元素對jQuery而言都是可以訪問的，但是，這並不意味着這些元素關聯的文件都已經下載完畢。
舉一個例子，偶一個大型的圖庫網站，為網頁中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示。如果使用windows onload方法來處理，那么用戶必須等到每一幅圖片都加載完畢后，才可以進行操作。如果使用jQuery中的$（document）.ready（）方法來進行設置，只要DOM就緒就可以操作了，不需要等待所有圖片下載完畢很顯然，把網頁解析為DOM樹的速度比把頁面中的所有關聯文件加載完畢的速度快很多。
另外，需要注意一點，由於在$（document）.ready（）方法內注冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯文件未下載完。例如與圖片有關的HTML下載完畢，並且已經解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題，可以使用jQuery中另一個關於頁面加載的方法----load（）方法。load（）方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容（包括窗口、框架、對象和圖像等）加載完畢后出發，如果處理函數綁定在元素上，則會在元素的內容加載完畢后出發。
$（document）.ready{function（）{
//編寫代碼
}}
等價於JavaScript中的一下代碼：
Window.onload=function（）{
//編寫代碼
}
2.多次使用
JavaScript的onload事件一次只能保存對一個函數的引用，它會自動用后面的函數覆蓋前面的函數，因此不能在現有的行為上添加新的行為。
支持onload事件的 HTML 標簽：<body>, <frame>, <frameset>, <iframe>, <link>, <script>
<script>中支持
<script type="text/javascript">//<![CDATA[
window.onload = function get(){ alert('jkl'); } </script>
<script type="text/javascript">
window.onload =function bit(){
alert('123');
}
</script>
最后輸出 123
例如有多個JavaScript文件，每個文件都需要用到windows onload方法，這種情況下用上面提到的編寫代碼會非常麻煩。
jQuery的$（document）.ready（）方法
能夠很好地處理這些情況，每次調用$（document）.ready（）方法都會在現有的行為上追加新的行為，這些行為函數會根據注冊的順序依次執行。
3.像onload事件之類的使用匿名函數執行，即window.onload=function(){ShowMessage();}這種形式。才是在頁面加載完成后執行
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function ShowMessage() { alert("true"); } window.onload=ShowMessage(); </script> </head> <body> 當你看到true時看不到我 </body> </html>
當頁面沒有加載完成就執行了ShowMessage函數
下面的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function ShowMessage() { alert("true"); } window.onload=function(){ShowMessage();} </script> </head> <body> 你看到true時就看到我了 </body> </html>
頁面加載完成后才執行onload函數