jQUery中的$(document).ready()方法和window.onload()方法的區別

 1.常規的Javascript代碼中,通常使用window.onload方法

window.onload = function(){//代碼}

 

2.jquery中,則使用$(document).ready()方法

$(document).ready(function(){//代碼})

3.兩個方法有相似的功能,但是在執行時機方面是有區別的
- window.onload方法是在網頁中所有的元素(包括元素的所有的關聯文件)完全加載到瀏覽器后才執行,此時,javascript才可以訪問網頁中的任何元素.
- 通過$(document).ready()方法注冊的事件處理程序,在DOM完全就緒時就可以被調用.此時,網頁中的所有元素對jQuery而言,都是可以訪問的,但這並不代表這些元素關聯的文件都已經加載完畢.這也會造成一個問題,例如與圖片有關的html下載完,並且已經解析為DOM樹了,但很有可能圖片還未加載 完成,以致像圖片的寬度和高度這樣的屬性此時不一定有效.要解決該問題,可以使用jquery中方的load()方法.該方法會在元素的onload事件中綁定一個處理函數.

$(window).load(function(){//代碼});

該方法就等價於 window.onload = function(){//代碼} 

4.編寫個數
- javascript中的onload事件一次只能保存對一個函數的引用,它會自動用后面的函數覆蓋前面的函數,不能在現有的行為上添加新的行為.

function one(){alert("one")};
function two(){alert("two")};

window.onload = one;
window.onload = two;

運行上述代碼,發現只能彈出字符串"two"對話框.

- $(document).ready()方法,每次調用,都會在現有的行為上追加新的行為,這些行為會根據注冊的順序依次執行.

5.$(document).ready()方法有兩種簡寫形式.$(function(){}),另外$(document)也可以簡寫為$(),$().ready(function(){}).