快捷導(dǎo)航

JQuery onload、ready概念介紹及使用方法

更新時間：2013年04月27日 16:15:13 作者：

頁面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成，onload，ready概念容易混淆，下面為大家詳細(xì)介紹下

頁面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。(可以說：ready 在onload 前加載?。?！)
一般樣式控制的，比如圖片大小控制放在onload 里面加載;

jS事件觸發(fā)的方法，可以在ready 里面加載;
用jQ的人很多人都是這么開始寫腳本的：
通常的寫法

復(fù)制代碼代碼如下:

 
$(function(){ 
// do something 
}); 

其實這個就是jq ready()的簡寫，他等價于：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
//do something 
}) 

也等于下面這個方法，jQuer的默認(rèn)參數(shù)是：“document”；

復(fù)制代碼代碼如下:

 
$().ready(function(){ 
//do something 
}) 

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery一般最先學(xué)到的是何時啟動事件。在曾經(jīng)很長一段時間里,在頁面載入后引發(fā)的事件都被加載在”Body”的Onload事件里.
對于Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:
加載多個函數(shù)的問題
■<body onload="a();b();">
</body>
在Onload事件中只能這樣加載，很丑陋…
■而在JQuery中你可以利用多個JQuery.Ready()方法，它們會按次序依次執(zhí)行
代碼和內(nèi)容不分離
這個貌似不用說了，讓人深惡痛絕-.-!!◦ 執(zhí)行先后順序不同
■對于Body.Onload事件，是在加載完所有頁面內(nèi)容才會觸發(fā)，我的意思是所有內(nèi)容,包括圖片，flash等.如果頁面的這些內(nèi)容很多會讓用戶等待很長時間.
■ 而對于$(document).ready()方法，這個方法只是在頁面所有的DOM加載完畢后就會觸發(fā),無疑很大的加快了網(wǎng)頁的速度.

但是對于一些特殊應(yīng)用，比如圖片的放大縮小，圖片的剪裁。需要網(wǎng)頁所有的內(nèi)容加載完畢后才執(zhí)行的呢？我推薦使用$(window).load()方法，這個方法會等到頁面所有內(nèi)容加載完畢后才會觸發(fā)，并且同時又沒有OnLoad事件的弊端.

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(window).load(function() { 
alert("hello"); 
}); 
$(window).load(function() { 
alert("hello again"); 
}); 
</script> 

上面的代碼會在頁面所有內(nèi)容加載完成后按先后順序依次執(zhí)行.
當(dāng)然不要忘了與之對應(yīng)的Unload方法

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(window).unload(function() { 
alert("good bye"); 
}); 
</script> 

上面代碼會在頁面關(guān)閉時引發(fā).
在所有DOM加載之前引發(fā)JS代碼
這個方法是我在調(diào)試的時候最喜歡的，有時候開發(fā)的時候也用這種方法

復(fù)制代碼代碼如下:

 
<body> 
<script type="text/javascript"> 
(function() { 
alert("hi"); 
})(jQuery) 
</script> 
</body> 

對，就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執(zhí)行，當(dāng)然也可以直接嵌入js代碼,這種方式要注意順序問題，如下：

復(fù)制代碼代碼如下:

 
<body> 
<div id="test">this is the content</div> 
<script type="text/javascript"> 
alert($("#test").html());//I Can display the content 
</script> 
</body> 
<body> 
<script type="text/javascript"> 
alert($("#test").html());//I Can't display the content 
</script> 
<div id="test">this is the content</div> 
</body> 

上面兩段代碼, 第二段代碼當(dāng)中因為只能解釋到當(dāng)前代碼之前的DOM,而test并不存在于已經(jīng)解析的DOM數(shù).所以第二段代碼無法正確顯示.

您可能感興趣的文章: