本文執行個體講述了jQuery的文檔處理常式。分享給大家供大家參考，具體如下：
jQuery文檔處理常式
所謂的文檔處理常式，是指jQuery中提供的$(document).ready事件，此事件會在dom載入完畢後觸發，而window.onlaod和body.onload都是在頁面完全載入後觸發。
jQuery文檔處理常式介紹
在jQuery中想實現在DOM載入完畢後的處理邏輯，只需要使用$(document).ready()事件。此事件函數稱為"jQuery文檔處理常式"。
可以在頁面的任何位置，甚至是外部的js檔案中，編寫如下列語句：
$(document).ready(function (){ alert("document.ready")});
則在頁面的DOM載入完畢後，會立刻執行alert語句。如果頁面上有大的圖片、js檔案等外部資源需要載入，jQuery的文檔處理常式會在其之前執行，而window.onload和boyd.onload是在所有的資源檔載入完畢後執行的。
Ready()函數時jQuery"事件函數"中提供的一個jQuery對象函數，簽名位ready(fn)。
fn是ready事件發生時執行的函數。
因為是jQuery對象函數，意味著可以在任何jQuery對象上調用：
$("body").ready(function (){ alert("body.ready")});
上面的語句等同於：
$(document).ready(function (){alert("body.ready")});
雖然ready()函數可以作用在任何jQuery對象上，但是使用時一定要注意對象是否具有ready事件。
也可以使用"$(fn)"這種簡化的形式：
$(function (){….})//等效於$(document).ready(function(){…});
同jQuery中所有的事件對象一樣，$(document).ready事件，會按照出現的先後順序執行。
比如，可以調用兩次$(document).ready事件：
$(document).ready(function (){alert("document.ready-1")});$(document). ready(function (){alert("document.ready-2")});
則在DOM載入完畢後，首先輸出"document.ready-1"，然後輸出"document.ready-2"。如果使用傳統的：
Window.onload=function(){…..};
上面的代碼會將window.onload原有的事件處理掉，然後綁定新的事件。
jQuery文檔處理常式的優勢
如果指令碼需要在頁面載入時執行，那麼大部分的指令碼都可以放在$(document).ready()事件中。
在舉例jQuery文檔處理常式的優勢之前，先看一個常見的JavaScript編程錯誤：dom未載入完成即改變dom模型。
在傳統的javascript編程中。有時會在頁面的頭部或者底部直接插入script模組並編寫代碼，比如下面的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head> <title>jQueryStorm – 常見錯誤編程方式舉例</title> <scriptlanguage="javascript"type="text/javascript"src="../include/jquery-1.7.1.js"></script></head><body><!-- 頁面內容部分 –><div id="divMsg" style="border:solid 1px#000000;padding:20px;"></div><!-- 尾部模組 --><script language="javascript" type="text/javascript"> //這條語句在某些情況下會導致錯誤 Document.getElementById("divMsg").innerHTML="<divstyle=\"border:solid 2px #FF0000\">動態添加的圖層</div>";</script></boyd></html>
此例子在所有的瀏覽器都運行良好，但是存在隱患。因為在頁面載入時，就在divMsg容器中添加了一個新的div對象，也就是添加了一個dom對象，當網速變慢或者頁面很大需要一定的載入時間，會出現"中止操作"的錯誤。
這個錯誤甚至曾經在Google首頁、淘寶等知名網站上都出現過，因為此錯誤很難在測試時候發現。
所以做web開發是要記住一條真理：永遠不要再dom載入時修改dom結構。
如果需要在頁面載入時修改dom結構，原始的做法是通過window.onload和body.onload事件實現，比如針對上面的錯誤例子，可以修改為：
<script type="text/javascript">Window.onload=function(){ Document.getElementById("divMsg").innerHTML="<divstyle="\border:solid 2px #FF0000\">動態添加的圖層</div>";};</script>
具體的實現方式還有很多，應用window.onload和body.onload是因為這兩個事件都是在dom載入完成並且所有頁面資源載入完成後才執行的，這是最簡單的做法。或者根據"document.readyState"判斷dom的狀態，如果是"complete"則進行某些操作，jQuery的文檔處理常式$(document).ready內部正是使用的此原理。
更多關於jquery相關內容感興趣的讀者可查看本站專題：《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery操作json資料技巧匯總》、《jQuery操作xml技巧總結》及《jQuery擴充技巧總結》
希望本文所述對大家jquery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
