當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
jQuery的$(document).ready()和JavaScript onload事件
生活随笔
收集整理的這篇文章主要介紹了
jQuery的$(document).ready()和JavaScript onload事件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
對(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>如果這樣,還沒有等待元素加載完就綁定事件,瀏覽器Console中會(huì)報(bào)錯(cuò):
TypeError: document.getElementById(...) is null ?更改一下時(shí)機(jī),下面三個(gè)程序都是可以成功綁定事件的,點(diǎn)擊元素之后會(huì)彈出相應(yīng)的alert(). 第一種是把事件綁定放在body里,元素之后: <!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)行事件綁定:
<!DOCTYPE html> <meta charset="utf-8"> <html><head><title>1-3</title><script type="text/javascript">window.onload = function () {document.getElementById("panel").onclick = function () {alert("元素已經(jīng)加載完畢 !");}}</script> </head><body> <div id="panel">click me.</div> </body></html>第三種是jQuery的ready()方法傳入綁定事件的方法:
<!DOCTYPE html> <meta charset="utf-8"> <html> <head><title>Panel</title><script src="jquery-1.11.2.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {document.getElementById("panel").onclick = function () {alert("元素已經(jīng)加載完畢 !");}})</script> </head> <body><div id="panel">click me.</div> </body> </html>jQuery $(document).ready()和window.onload
根據(jù)ready()方法的API說明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ì)page的操作才是安全的. $(document).ready()僅在DOM準(zhǔn)備好的時(shí)候執(zhí)行一次. 與之相比,load事件會(huì)等到頁面渲染完成執(zhí)行,即等到所有的資源(比如圖片)都完全加載完成的時(shí)候. $(window).load(function(){…})會(huì)等整個(gè)頁面,不僅僅是DOM,還包括圖像和iframes都準(zhǔn)備好之后,再執(zhí)行. 而ready()是在DOM準(zhǔn)備好之后就執(zhí)行了,即DOM樹建立完成的時(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)寫
$( document ).ready( handler )$().ready( handler ) (this is not recommended)$( handler )window對(duì)象和document對(duì)象
Window對(duì)象表示瀏覽器中打開的窗口:?http://www.w3school.com.cn/jsref/dom_obj_window.asp Document對(duì)象表示載入瀏覽器的HTML文檔:?http://www.w3school.com.cn/jsref/dom_obj_document.aspEvent對(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是小寫). 支持該事件的標(biāo)簽是:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script> 支持該事件的JavaScript對(duì)象是:image, layer, window.注意這里并沒有document.onload使用解析
最常用的就是window.onload, 會(huì)等到整個(gè)頁面及各種資源都加載完成之后再執(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 οnlοad=“”>是不兼容的.
總結(jié)
以上是生活随笔為你收集整理的jQuery的$(document).ready()和JavaScript onload事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【具体数学--读书笔记】1.1 The
- 下一篇： JavaScript中的Array对象