jQuery的文檔處理程序詳解_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery的文檔處理程序詳解_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 am 09:00 AM

jquery

本文實例講述了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程式設計有幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn