全面解析jQuery $(document).ready()和JavaScript onload事件
對(duì)元素的操作和事件的綁定需要等待一個(gè)合適的時(shí)機(jī),可以看下面的例子:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已經(jīng)加載完畢 !");
}
/*執(zhí)行錯(cuò)誤*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>
如果這樣,還沒(méi)有等待元素加載完就給 div#panel 綁定了一個(gè)事件,瀏覽器Console中會(huì)報(bào)錯(cuò): TypeError:
document.getElementById(...) is null
更改一下時(shí)機(jī),下面三個(gè)程序都是可以成功綁定事件的,點(diǎn)擊元素之后會(huì)彈出相應(yīng)的alert().
把事件綁定放在body里,元素之后:
由于綁定事件在元素之后,所以可以成功獲取 div#panel 的元素,并在 div#panel 上綁定點(diǎn)擊事件。
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已經(jīng)加載完畢 !");
}
/*正確執(zhí)行*/
</script>
</body>
</html>
把事件綁定放在window.onload中進(jìn)行事件綁定:
window.onload 事件的處理函數(shù)則在頁(yè)面所有元素加載完成之后才執(zhí)行,所以這里給獲取元素并綁定事件也是可行的。
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已經(jīng)加載完畢 !");
}
/*正確執(zhí)行*/
</script>
</body>
</html>
jQuery的ready()方法傳入綁定事件的方法:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("panel").onclick = function () {
alert("元素已經(jīng)加載完畢 !");
}
/*正確執(zhí)行*/
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>
jQuery $(document).ready()和window.onload
根據(jù)ready()方法的API說(shuō)明http://api.jquery.com/ready/。
這個(gè)方法接收一個(gè)function類型的參數(shù)ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.即當(dāng)DOM加載完畢的時(shí)候,執(zhí)行這個(gè)指定的方法.因?yàn)橹挥衐ocument的狀態(tài)ready之后,對(duì)元素的操作才是安全的. $(document).ready() 僅在DOM準(zhǔn)備好的時(shí)候執(zhí)行一次,但可以多次綁定 ready 事件。
與ready相比,load事件會(huì)等到頁(yè)面渲染完成執(zhí)行,即等到所有的資源(比如圖片)都完全加載完成的時(shí)候才會(huì)執(zhí)行。 $(window).load(function(){…}) 會(huì)等整個(gè)頁(yè)面,不僅僅是DOM,還包括圖像和iframes都準(zhǔn)備好之后,再執(zhí)行.而ready()是在DOM準(zhǔn)備好之后就執(zhí)行了,即DOM樹(shù)建立完成的時(shí)候.所以通常ready()是一個(gè)更好的時(shí)機(jī).
如果DOM初始化完成之后再調(diào)用ready()方法,傳入的新的handler將會(huì)立即執(zhí)行.
注意:ready()方法多次調(diào)用,傳入的handler方法會(huì)串聯(lián)執(zhí)行(追加).而JavaScript中,window.onload是賦值一個(gè)方法,即后面的會(huì)覆蓋掉前面的.
$(document).ready()的三種簡(jiǎn)寫(xiě)
$( document ).ready(handler)
$().ready(handler)//(this is not recommended)
$(handler)
window對(duì)象和document對(duì)象
Window對(duì)象表示瀏覽器中打開(kāi)的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp
Document對(duì)象表示載入瀏覽器的HTML文檔: http://www.w3school.com.cn/jsref/dom_obj_document.asp
Event對(duì)象
Event 即事件,代表了各種狀態(tài):http://www.w3school.com.cn/jsref/dom_obj_event.asp
事件句柄使我們可以在事件發(fā)生的時(shí)候附加一些操作和處理,比如按鈕點(diǎn)擊事件發(fā)生的時(shí)候,進(jìn)行什么什么操作.上面的參考鏈接中含有一個(gè)屬性列表,對(duì)應(yīng)各種事件,可以利用這些屬性定義事件的行為.文中關(guān)注的onload就是其中一個(gè)事件.
onload事件
onload 事件: http://www.w3school.com.cn/jsref/event_onload.asp
onload 事件是在加載完成后立即發(fā)生.(注意其中的l是小寫(xiě)).
支持該事件的標(biāo)簽是: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持該事件的JavaScript對(duì)象是: image, layer, window .注意這里并沒(méi)有 document .
onload使用解析
最常用的就是 window.onload , 會(huì)等到整個(gè)頁(yè)面及各種資源都加載完成之后再執(zhí)行后面賦值的 function 行為.另外,可以在標(biāo)簽中使用 onload ,比如:
<body onload="inlineBodyOnloadTimeCounter();">
其中 inlineBodyOnloadTimeCounter() 是一個(gè)自定義的JavaScript function.
注意 jQuery ready() 的API文檔中有這么一段:
The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
注釋: ready() 方法和 <body onload=""> 是不兼容的.
以上所述是小編給大家介紹的全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)知識(shí),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Angular.js中window.onload(),$(document).ready()的寫(xiě)法淺析
- 引用其它js時(shí)如何同時(shí)處理多個(gè)window.onload事件
- 解析頁(yè)面加載與js函數(shù)的執(zhí)行 onload or ready
- JS:window.onload的使用介紹
- js 一個(gè)關(guān)于圖片onload加載的事
- js onload處理html頁(yè)面加載之后的事件
- js中onload與onunload的使用示例
- js之onload事件的一點(diǎn)使用心得
- 原生javascript如何實(shí)現(xiàn)共享onload事件
相關(guān)文章
jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果的方法,結(jié)合實(shí)例形式分析了jQuery封裝與使用title提示框的方法,需要的朋友可以參考下2016-08-08
jQuery插件HighCharts實(shí)現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D面積圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制2D面積圖的相關(guān)步驟與屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
使用jquery的scrollTop方法監(jiān)視頁(yè)面垂直滾動(dòng)像素,并根據(jù)像素隱藏或者顯示頂部的導(dǎo)航條,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05
jQuery中triggerHandler()方法用法實(shí)例
這篇文章主要介紹了jQuery中triggerHandler()方法用法,實(shí)例分析了triggerHandler()方法的功能、定義及觸發(fā)被選元素的指定事件類型的使用技巧,需要的朋友可以參考下2015-01-01
jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(一)
ajax聯(lián)動(dòng)框想必大家早有所耳聞,接下來(lái)本文詳細(xì)介紹下使用jquery實(shí)現(xiàn)的原理及代碼,感興趣的你可以參考下,或許對(duì)你有所幫助2013-03-03
jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-03-03
jquery 多個(gè)radio的click事件實(shí)例
下面小編就為大家?guī)?lái)一篇jquery 多個(gè)radio的click事件實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-12-12

