JavaScript中的window.onload和jQuery中的$(documemt).ready()的區別

• 之前剛學JavaScript的時候，在<script>標籤中的寫法都是window.onload = function( ) { }。後來學習jQuery，接觸到的寫法基本就是$(document).ready(function( ) { })和$(function( ) { })。所以它們之間到底有什麼區別呢？在這篇文章中進行一下總結

• 在jQuery中，我們經常會看到兩種寫法：$(document).ready(function( ) { })和$(function( ) { })。其實這兩種寫法的效果是一樣的，都是在DOM文件樹載入完成之後執行一個函式，要注意的一點是，其中的文件樹載入完全並不代表全部的資原始檔下載完畢

• 而window.onload則是在DOM文件以及所有資原始檔載入完成後執行一個函式，也就是說，$(document).ready(function( ) { })會比window.onload先執行

• 因此總結下來，它們之間有以下幾點區別：

  • 1、執行時間

    • window.onload必須等到頁面內包括圖片等其它資源的所有元素載入完畢後才能執行

    • $(document).ready(function( ) { })是DOM結構載入完畢後就可以執行，不必等到所有資原始檔載入完畢

  • 2、編寫個數

    • window.onload不能夠同時寫多個，如果有多個的話，則只會執行最後一個，它會把前面的覆蓋掉

    • $(document).ready(function( ) { })可以編寫多個，每一個都會執行

  • 3、簡寫方法

    • 在前面提到的$(function( ) { })其實就是$(document).ready(function( ) { })的簡寫，所以它們是等效的

    • window.onload沒有簡寫形式