JQuery Tips相關(guān)(1)----關(guān)于$.Ready()
最近一直在研究JQuery,這個東西還是很博大精深的.下面分享一下我的學(xué)習(xí)總結(jié).
$(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ù).所以第二段代碼無法正確顯示.
相關(guān)文章
jQuery操作input type=radio的實現(xiàn)代碼
jQuery操作input type=radio的實現(xiàn)代碼,需要的朋友可以參考下2012-06-06從零學(xué)jquery之如何使用回調(diào)函數(shù)
回調(diào)函數(shù)指的是被調(diào)用者完成處理后自動回調(diào)調(diào)用者預(yù)先傳遞的函數(shù)。2014-05-05jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單
這篇文章主要介紹了jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單,實例分析了jQuery操作鼠標事件及css樣式實現(xiàn)動態(tài)滑動菜單的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03詳談jQuery unbind 刪除綁定事件 / 移除標簽方法
下面小編就為大家?guī)硪黄斦刯Query unbind 刪除綁定事件 / 移除標簽方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03JQuery擴展插件Validate—4設(shè)置錯誤提示的樣式
JQuery擴展插件Validate—4設(shè)置錯誤提示的樣式,使用Validate的朋友可以參考下。2011-09-09詳細介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過jQuery示例代碼演示outerWidth()函數(shù)的具體用法,介紹的非常詳細,有需要的朋友可以借鑒2015-07-07