JQuery onload、ready概念介紹及使用方法
更新時間:2013年04月27日 16:15:13 作者:
頁面加載完成有兩種事件,一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成,onload,ready概念容易混淆,下面為大家詳細介紹下
頁面加載完成有兩種事件,一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件),二是onload,指示頁 面包含圖片等文件在內(nèi)的所有元素都加載完成。(可以說:ready 在onload 前加載!?。?
一般樣式控制的,比如圖片大小控制放在onload 里面加載;
jS事件觸發(fā)的方法,可以在ready 里面加載;
用jQ的人很多人都是這么開始寫腳本的:
通常的寫法
$(function(){
// do something
});
其實這個就是jq ready()的簡寫,他等價于:
$(document).ready(function(){
//do something
})
也等于下面這個方法,jQuer的默認參數(shù)是:“document”;
$().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事件的弊端.
<script type="text/javascript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>
上面的代碼會在頁面所有內(nèi)容加載完成后按先后順序依次執(zhí)行.
當(dāng)然不要忘了與之對應(yīng)的Unload方法
<script type="text/javascript">
$(window).unload(function() {
alert("good bye");
});
</script>
上面代碼會在頁面關(guān)閉時引發(fā).
在 所有DOM加載之前引發(fā)JS代碼
這個方法是我在調(diào)試的時候最喜歡的,有時候開發(fā)的時候也用這種方法
<body>
<script type="text/javascript">
(function() {
alert("hi");
})(jQuery)
</script>
</body>
對, 就是利用js閉包的形式將js代碼嵌入body,這段代碼會自動執(zhí)行,當(dāng)然也可以直接嵌入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>
上面兩段代碼, 第二段代碼當(dāng)中因為只能解釋到當(dāng)前代碼之前的DOM,而test并不存在于已經(jīng)解析的DOM數(shù).所以第二段代碼無法正確顯示.
一般樣式控制的,比如圖片大小控制放在onload 里面加載;
jS事件觸發(fā)的方法,可以在ready 里面加載;
用jQ的人很多人都是這么開始寫腳本的:
通常的寫法
復(fù)制代碼 代碼如下:
$(function(){
// do something
});
其實這個就是jq ready()的簡寫,他等價于:
復(fù)制代碼 代碼如下:
$(document).ready(function(){
//do something
})
也等于下面這個方法,jQuer的默認參數(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ù).所以第二段代碼無法正確顯示.
您可能感興趣的文章:
- jquery $(document).ready() 與window.onload的區(qū)別
- jquery的$(document).ready()和onload的加載順序
- jquery中的$(document).ready()與window.onload的區(qū)別
- 解析頁面加載與js函數(shù)的執(zhí)行 onload or ready
- 一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- 淺析document.ready和window.onload的區(qū)別講解
- jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
- JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序
相關(guān)文章
EasyUI學(xué)習(xí)之DataGird分頁顯示數(shù)據(jù)
這篇文章主要介紹了EasyUI學(xué)習(xí)之DataGird分頁顯示數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12javascript的變量、傳值、傳址、參數(shù)之間關(guān)系
這篇文章主要介紹了javascript的變量、傳值、傳址、參數(shù)之間關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-07-07jquery中map函數(shù)遍歷數(shù)組用法實例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05jQuery插件zTree實現(xiàn)獲取當(dāng)前選中節(jié)點在同級節(jié)點中序號的方法
這篇文章主要介紹了jQuery插件zTree實現(xiàn)獲取當(dāng)前選中節(jié)點在同級節(jié)點中序號的方法,結(jié)合實例形式分析了屬性插件zTree針對節(jié)點序號的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03