學(xué)習(xí)JQuery的$.Ready()與OnLoad事件比較(轉(zhuǎn))

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery一般最先學(xué)到的是何時啟動事件。在曾經(jīng)很長一段時間里,在頁面載入后引發(fā)的事件都被加載在”Body”的Onload事件里.
對于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.
比如:

1.加載多個函數(shù)的問題
<body onload="a();b();">
</body>
在Onload事件中只能這樣加載雷逆,很丑陋…而在JQuery中你可以利用多個JQuery.Ready()方法成玫,它們會按次序依次執(zhí)行

2.代碼和內(nèi)容不分離
這個貌似不用說了憋肖,讓人深惡痛絕-.-!!

3.執(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方法
$(window).unload(function() {
alert("good bye");
});
上面代碼會在頁面關(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ù).所以第二段代碼無法正確顯示

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市土居,隨后出現(xiàn)的幾起案子枣购,更是在濱河造成了極大的恐慌,老刑警劉巖擦耀,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棉圈,死亡現(xiàn)場離奇詭異,居然都是意外死亡眷蜓,警方通過查閱死者的電腦和手機分瘾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吁系,“玉大人德召,你說我怎么就攤上這事∑耍” “怎么了上岗?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵丑蛤,是天一觀的道長悯嗓。 經(jīng)常有香客問我遵堵,道長衡蚂,這世上最難降的妖魔是什么袜啃? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任兵怯,我火速辦了婚禮峭范,結(jié)果婚禮上慨蛙,老公的妹妹穿的比我還像新娘。我一直安慰自己痴脾,他們只是感情好颤介,可當(dāng)我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著明郭,像睡著了一般买窟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上薯定,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音瞳购,去河邊找鬼话侄。 笑死,一個胖子當(dāng)著我的面吹牛学赛,可吹牛的內(nèi)容都是我干的年堆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盏浇,長吁一口氣:“原來是場噩夢啊……” “哼变丧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起绢掰,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤痒蓬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后滴劲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攻晒,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年班挖,在試婚紗的時候發(fā)現(xiàn)自己被綠了鲁捏。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡萧芙,死狀恐怖给梅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情双揪,我是刑警寧澤动羽,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站盟榴,受9級特大地震影響曹质,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一羽德、第九天 我趴在偏房一處隱蔽的房頂上張望几莽。 院中可真熱鬧,春花似錦宅静、人聲如沸章蚣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纤垂。三九已至,卻和暖如春磷账,著一層夾襖步出監(jiān)牢的瞬間峭沦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工逃糟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吼鱼,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓绰咽,卻偏偏與公主長得像菇肃,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子取募,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,643評論 18 503
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式琐谤。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,335評論 0 2
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined玩敏、Nul...
    極樂君閱讀 5,514評論 0 106
  • //------------------------- 第一章 認(rèn)識JQuery ----------------...
    米塔塔閱讀 718評論 0 9
  • 窮人的苦聊品,你不懂 今天看到牛彈琴上的文章《那...
    拙蘭閱讀 1,226評論 15 19