????:頁(yè)面加載完成有兩種事件,一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件),二是onload,指示頁(yè) 面包含圖片等文件在內(nèi)的所有元素都加載完成。(可以說(shuō):ready 在onload 前加載?。?!)一般樣式控制的,比如圖片大小控制放在onload 里面加載; jS事件觸發(fā)的方法,可以在ready 里面加載; 用jQ的人很多人都是這么開(kāi)始寫(xiě)腳本的: 通常的寫(xiě)法 $(function
頁(yè)面加載完成有兩種事件,一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件),二是onload,指示頁(yè) 面包含圖片等文件在內(nèi)的所有元素都加載完成。(可以說(shuō):ready 在onload 前加載?。?!)
一般樣式控制的,比如圖片大小控制放在onload 里面加載;
jS事件觸發(fā)的方法,可以在ready 里面加載;
用jQ的人很多人都是這么開(kāi)始寫(xiě)腳本的:
通常的寫(xiě)法
$(function(){ // do something });
其實(shí)這個(gè)就是jq ready()的簡(jiǎn)寫(xiě),他等價(jià)于:
$(document).ready(function(){ //do something })
也等于下面這個(gè)方法,jQuer的默認(rèn)參數(shù)是:“document”;
$().ready(function(){ //do something })
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery一般最先學(xué)到的是何時(shí)啟動(dòng)事件。在曾經(jīng)很長(zhǎng)一段時(shí)間里,在頁(yè)面載入后引發(fā)的事件都被加載 在”Body”的Onload事件里.
對(duì)于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
加載 多個(gè)函數(shù)的問(wèn)題
■<body onload="a();b();">
</body>
在Onload事件中 只能這樣加載,很丑陋…
■而在JQuery中你可以利用多個(gè)JQuery.Ready()方法,它們會(huì)按次序依次執(zhí)行
代碼和內(nèi)容不分離
這個(gè)貌似不用說(shuō)了,讓人深惡痛絕-.-!!? 執(zhí)行先后順序不同
■對(duì)于Body.Onload事件,是在加載完所有頁(yè)面內(nèi)容才會(huì)觸發(fā),我的意思是所有內(nèi)容,包括圖片,flash等.如果頁(yè)面的這些內(nèi)容很多會(huì)讓用戶等待很 長(zhǎng)時(shí)間.
■ 而對(duì)于$(document).ready()方法,這個(gè)方法只是在頁(yè)面所有的DOM加載完畢后就會(huì)觸發(fā),無(wú)疑很大的加快了網(wǎng)頁(yè)的速度.
但是對(duì)于一些特殊應(yīng)用,比如圖片的放大縮小,圖片的剪裁。需要網(wǎng)頁(yè)所有的內(nèi)容加載完畢后才執(zhí)行的呢?我推薦使用$(window).load()方法,這 個(gè)方法會(huì)等到頁(yè)面所有內(nèi)容加載完畢后才會(huì)觸發(fā),并且同時(shí)又沒(méi)有OnLoad事件的弊端.
<script type="text/javascript"> $(window).load(function() { alert("hello"); }); $(window).load(function() { alert("hello again"); }); </script>
上面的代碼會(huì)在頁(yè)面所有內(nèi)容加載完成后按先后順序依次執(zhí)行.
當(dāng)然不要忘了與之對(duì)應(yīng)的Unload方法
<script type="text/javascript"> $(window).unload(function() { alert("good bye"); }); </script>
上面代碼會(huì)在頁(yè)面關(guān)閉時(shí)引發(fā).
在 所有DOM加載之前引發(fā)JS代碼
這個(gè)方法是我在調(diào)試的時(shí)候最喜歡的,有時(shí)候開(kāi)發(fā)的時(shí)候也用這種方法
<body> <script type="text/javascript"> (function() { alert("hi"); })(jQuery) </script> </body>
對(duì), 就是利用js閉包的形式將js代碼嵌入body,這段代碼會(huì)自動(dòng)執(zhí)行,當(dāng)然也可以直接嵌入js代碼,這種方式要注意順序問(wèn)題,如下:
<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)中因?yàn)橹荒芙忉尩疆?dāng)前代碼之前的DOM,而test并不存在于已經(jīng)解析的DOM數(shù).所以第二段代碼無(wú)法正確顯示.