最近一直在研究JQuery,這個東西還是很博大精深的.下面分享一下我的學習總結.
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery一般最先學到的是何時啟動事件。在曾經很長一段時間里,在頁面載入后引發的事件都被加載在”Body”的Onload事件里.
對于Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:
1.加載多個函數的問題
view sourceprint?1 <body onload="a();b();">
2
3 </body>
在Onload事件中只能這樣加載，很丑陋…而在JQuery中你可以利用多個JQuery.Ready()方法，它們會按次序依次執行
2.代碼和內容不分離
這個貌似不用說了，讓人深惡痛絕-.-!!
3.執行先后順序不同
對于Body.Onload事件，是在加載完所有頁面內容才會觸發，我的意思是所有內容,包括圖片，flash等.如果頁面的這些內容很多會讓用戶等待很長時間.
而對于$(document).ready()方法，這個方法只是在頁面所有的DOM加載完畢后就會觸發,無疑很大的加快了網頁的速度.
但是對于一些特殊應用，比如圖片的放大縮小，圖片的剪裁。需要網頁所有的內容加載完畢后才執行的呢？我推薦使用$(window).load()方法，這個方法會等到頁面所有內容加載完畢后才會觸發，并且同時又沒有OnLoad事件的弊端.
view sourceprint?1 <script type="text/javascript">
2 $(window).load(function() {
3 alert("hello");
4 });
5 $(window).load(function() {
6 alert("hello again");
7 });
8 </script>
上面的代碼會在頁面所有內容加載完成后按先后順序依次執行.
當然不要忘了與之對應的Unload方法
view sourceprint?1 $(window).unload(function() {
2 alert("good bye");
3 });
上面代碼會在頁面關閉時引發.
在所有DOM加載之前引發JS代碼
這個方法是我在調試的時候最喜歡的，有時候開發的時候也用這種方法
view sourceprint?1 <body>
2 <script type="text/javascript">
3 (function() {
4 alert("hi");
5 })(jQuery)
6 </script>
7 </body>
對，就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執行，當然也可以直接嵌入js代碼,這種方式要注意順序問題，如下：
view sourceprint?01 <body>
02 <div id="test">this is the content</div>
03 <script type="text/javascript">
04
05 alert($("#test").html());//I Can display the content
06
07 </script>
08 </body>
09 <body>
10
11 <script type="text/javascript">
12
13 alert($("#test").html());//I Can't display the content
14
15 </script>
16 <div id="test">this is the content</div>
17 </body>
上面兩段代碼,第二段代碼當中因為只能解釋到當前代碼之前的DOM,而test并不存在于已經解析的DOM數.所以第二段代碼無法正確顯示.
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
