天天看點

jQuery 頁面加載事件

頁面加載完成有兩種事件,一是ready,表示文檔結構已經加載完成(不包含圖檔等非文字媒體檔案),二是onload,訓示頁 面包含圖檔等檔案在内的所有元素都加載完成。(可以說:ready 在onload 前加載!!!)

一般樣式控制的,比如圖檔大小控制放在onload 裡面加載;

jS事件觸發的方法,可以在ready 裡面加載;

用jQ的人很多人都是這麼開始寫腳本的:

通常的寫法

複制代碼 代碼如下:

$(function(){

// do something

});

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

複制代碼 代碼如下:

$(document).ready(function(){

//do something

})

也等于下面這個方法,jQuer的預設參數是:“document”;

複制代碼 代碼如下:

$().ready(function(){

//do something

})

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

接觸JQuery一般最先學到的是何時啟動事件。在曾經很長一段時間裡,在頁面載入後引發的事件都被加載 在”Body”的Onload事件裡.

對于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:

加載 多個函數的問題

■<body οnlοad="a();b();">

</body>

在Onload事件中 隻能這樣加載,很醜陋…

■而在JQuery中你可以利用多個JQuery.Ready()方法,它們會按次序依次執行

代碼和内容不分離

這個貌似不用說了,讓人深惡痛絕-.-!!◦ 執行先後順序不同

■對于Body.Onload事件,是在加載完所有頁面内容才會觸發,我的意思是所有内容,包括圖檔,flash等.如果頁面的這些内容很多會讓使用者等待很 長時間.

■ 而對于$(document).ready()方法,這個方法隻是在頁面所有的DOM加載完畢後就會觸發,無疑很大的加快了網頁的速度.

但是對于一些特殊應用,比如圖檔的放大縮小,圖檔的剪裁。需要網頁所有的内容加載完畢後才執行的呢?我推薦使用$(window).load()方法,這 個方法會等到頁面所有内容加載完畢後才會觸發,并且同時又沒有OnLoad事件的弊端.

複制代碼 代碼如下:

<script type="text/javascript">

$(window).load(function() {

alert("hello");

});

$(window).load(function() {

alert("hello again");

});

</script>

上面的代碼會在頁面所有内容加載完成後按先後順序依次執行.

當然不要忘了與之對應的Unload方法

複制代碼 代碼如下:

<script type="text/javascript">

$(window).unload(function() {

alert("good bye");

});

</script>

上面代碼會在頁面關閉時引發.

在 所有DOM加載之前引發JS代碼

這個方法是我在調試的時候最喜歡的,有時候開發的時候也用這種方法

複制代碼 代碼如下:

<body>

<script type="text/javascript">

(function() {

alert("hi");

})(jQuery)

</script>

</body>

對, 就是利用js閉包的形式将js代碼嵌入body,這段代碼會自動執行,當然也可以直接嵌入js代碼,這種方式要注意順序問題,如下:

複制代碼 代碼如下:

<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>

上面兩段代碼, 第二段代碼當中因為隻能解釋到目前代碼之前的DOM,而test并不存在于已經解析的DOM數.是以第二段代碼無法正确顯示.

轉載于:https://www.cnblogs.com/linguoguo/p/4710135.html

繼續閱讀