Jquery 中關於load和ready事件的總結

2021-09-07 23:25:54 字數 1483 閱讀 4785

近期承擔了部分jquery的任務,在部落格總結一下,留作積累,用得上的親也可參考。

首先說說window和document,直觀上來講,window代表的是瀏覽器視窗,而document代表的是瀏覽器視窗中載入的dom元素。假設現在有乙個瀏覽器,裡邊載入的頁面特別長,已經超出了一屏,當然,肯定會出現滾動條了,這時候,$(window).height()和$(document).height()是不相等的,document的高度肯定要比window的大,因為window視窗始終就是那麼大。

然後介紹一下什麼是jquery中的load和ready事件。

load事件主要就是用來代替原生的window.onload,它只能用在兩個場景下:

· window物件上。比如$(window).load(fn);。

· 帶有url的元素(images, scripts, frames, iframes)。比如$(「img」).load(fn); //jquery官方文件明確說明load事件的跨瀏覽器相容性很差,谷歌瀏覽器僅僅支援$(window).load(fn);,而火狐瀏覽器支援$(window).load(fn);和$(「img」).load(fn)

除此之外,任何元素都沒有load事件,比如:$(document).load(fn);這是錯誤的寫法,根本不會執行。

ready事件可以加在任意元素上,比如$(window).ready(fn);、$(document).ready(fn);、$(「div」).ready(fn);等等

·$(document).ready()在單個頁面中可以執行多個。例如有多個 js 檔案,每個檔案都需要用到window.onload 方法,這種情況下用onload方法編寫**會非常麻煩,而 jquery 的 $(document).ready() 方法能夠很好地處理這些情況,每次呼叫               $(document).ready() 方法都會在現有的行為上追加新的行為,這些行為函式會根據註冊的順序依次執行。

·onload 在乙個頁面中只能執行乙個。如果有多個,它會自動用後面的函式覆蓋前面的函式。

$(window).load(function ());

等價於window.onload = function ()

$(document).ready(fucntion());

等價於$(function());

等價於$(jquery.function($));

ready事件與window.onload(或)是衝突的,如果使用了window.onload(或),將導致ready事件不執行。 

jquery新版本已經不再進行ie低版本(ie6、ie7、ie8)的相容性處理。如果要相容ie8版本以下,就不能使用ready事件。要解決這個問題,可以使用 jquery 中另乙個關於頁面載入的方法—— load() 方法。load() 方法會在元素的 onload 事件中繫結乙個處理函式。如果處理函式繫結給 window 物件,則會在所有內容(包括視窗、框架、物件和影象等)載入完畢後觸發,如果處理函式繫結在元素上,則會在元素的內容載入完畢後觸發。

jQuery中ready和load的區別

ready方法 document ready function document ready 簡寫 function load方法 window load function 1 解析html結構 2 載入外部指令碼和樣式檔案 3 解析並執行指令碼 4 構造html dom模型 ready 5 載入等...

jquery中load和ready的區別

首先是寫法 load window.onload window 是bom操作的核心物件。ready document ready function 執行的 塊 jquery簡寫 function 經常會被問到他們倆個哪個先執行 首先,明確的說明是ready先執行 先了解下乙個頁面的載入順序 1.解析...

jQuery中ready與load事件的區別

1 2 3 4 5 6 7 8 document ready document ready function document ready 簡寫 function 有些時候也會這麼寫 1 2 3 4 document load document load function 乙個是ready乙個是lo...