DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery Tips相關(1)----關於$.Ready()
JQuery Tips相關(1)----關於$.Ready()
編輯:JQuery特效代碼     

 最近一直在研究JQuery,這個東西還是很博大精深的.下面分享一下我的學習總結.

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

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

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

1.加載多個函數的問題

<body onload="a();b();">

</body>

     在Onload事件中只能這樣加載,很丑陋…而在JQuery中你可以利用多個JQuery.Ready()方法,它們會按次序依次執行

2.代碼和內容不分離
    這個貌似不用說了,讓人深惡痛絕-.-!!

3.執行先後順序不同
    對於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方法

$(window).unload(function() {
      alert("good bye");
    });

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

在所有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數.所以第二段代碼無法正確顯示.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved