談談document.ready和window.onload的區別

時間 2019-11-21

標籤談談 document.ready document ready window.onload window onload 區別欄目 JavaScript 简体版

原文原文鏈接

在Jquery裏面，咱們能夠看到兩種寫法:$(function(){}) 和$(document).ready(function(){})javascript

這兩個方法的效果都是同樣的，都是在dom文檔樹加載完以後執行一個函數（注意，這裏面的文檔樹加載完不表明所有文件加載完）。html

而window.onload是在dom文檔樹加載完和全部文件加載完以後執行一個函數。也就是說$(document).ready要比window.onload先執行。java

那麼Jquery裏面$(document).ready函數的內部是怎麼實現的呢？下面咱們就來看看：jquery

咱們來爲document添加一個ready函數：數組

下面給出jQuery ready與window.onload的區別dom

	window.load	$(document).ready()
執行時機	必須等待網頁中全部的內容加載完畢後(包括圖片)才能執行	網頁中全部DOM結構繪製完畢後就執行，能夠能DOM元素關聯的內容並無加載完
編寫個數	不能同時編寫多個如下代碼沒法正確執行： window.onload = function(){ alert("caibaojian"); }; window.onload = function(){ alert("caibaojian.com"); }; 結果只輸出第二個	能同時編寫多個如下代碼正確執行： $(document).ready(function(){ alert("Hello Caibaojian"); }); $(document).ready(function(){ alert("Hello caibaojian.com"); }); 結果兩次都輸出
簡化寫法	無	$(function(){ // do something });

jQuery Hello World程序

<script type=「text/javascript」 src=「xxx//jquery-x.y.z.js">

　　引入jQuery.存在兩個版本,jquery-x.y.z.min.js是精簡壓縮版,不帶min的是開發版,代碼中的註釋和縮進等都被保留了.函數

注意路徑中的」/"須要轉義,即用」//「.

$()符號將DOM對象轉化爲jQuery對象.

Hello World程序以下:

<html>
<head>
    <title>Hello jQuery</title>
    <script type="text/javascript" src="libs//jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { alert("Hello World"); }); </script> </head> <body> </body> </html>

$(document).ready和window.onload的比較

首先看window.onload:

window.onload = sayHello;
window.onload = sayWorld; function sayHello() { alert("Hello"); } function sayWorld() { alert("World"); }

後面的方法會覆蓋掉前面的方法,也即彈泡最後只顯示一個,即World的那個.

若是採用$(document).ready,則方法會串聯起來,即先顯示Hello的alert,再顯示World的.

$(document).ready(sayHello);
$(document).ready(sayWorld);

function sayHello() { alert("Hello"); } function sayWorld() { alert("World"); }

這樣就能夠關聯多個方法.

另外一個很小的差異,就是ready方法的執行會稍微靠前一點.widow.onload會等待DOM準備好,而且全部綁定結束,而ready只能DOM準備好,其餘工做可能尚未作好.

實例:給每個超連接對象附加onclick事件

首先,body中添加多個超連接對象:

<body> <a href="#">test1</a><br> <a href="#">test2</a><br> <a href="#">test3</a><br> <a href="#">test4</a> </body>

　　要給每一個對象添加onclick事件,能夠有多種方法:

　　首先,能夠在每一個a標籤裏面寫onclick屬性;

　　其次,能夠利用window.onload添加一個方法,獲取全部的標籤,統一添加事件,以下:

window.onload = function () { var myLinks = document.getElementsByTagName("a"); for(var i = 0; i < myLinks.length; ++i){ myLinks[i].onclick = function(){ alert("Hello link: " + i); } } }

注意,這裏我犯了一個錯誤,我原本覺得alert的數目會遞增,結果實際運行的結果是每個alert都是4.

這是由於js沒有塊級做用域,變量i引用的是for裏的那個,循環後變成了4.也即,onclick事件發生的時候纔去取i的值,固然都是4了.

下面用jQuery實現這一功能:

$(document).ready(function () { $("a").click(function () { alert("Hello link from jQuery!"); }); });

　　jQuery中的$()符號會得到頁面當中的全部合適的元素.

　　因此上面的代碼隱含了遍歷的過程,給每個元素都加上了事件處理函數.

　　click方法是jQuery對象提供的方法.

　　onclick是DOM對象的屬性.

　　DOM裏面的不少屬性到jQuery裏面就變成了方法.

DOM對象和jQuery對象之間的相互轉換與區別

看一個例子,首先加一個p標籤:

<p id="clickMe">Click Me!</p>

先得到一個DOM對象,而後將其轉換爲一個jQuery對象:

//Part 1: DOM --> jQuery //DOM object: var pElement = document.getElementsByTagName("p")[0]; alert("DOM pElement: " + pElement.innerHTML); //Convert DOM object to jQuery object: var pElementjQuery = $(pElement); alert("jQuery pElementjQuery: " + pElementjQuery.html());

也能夠先得到一個jQuery對象,再將其轉換爲DOM對象:

//Part 2: jQuery --> DOM //jQuery object array: var clickMejQuery = $("#clickMe"); //Convert jQuery object to DOM object (2 ways): //way 1: var domClickMe1 = clickMejQuery[0]; alert("dom1: " + domClickMe1.innerHTML); //way 2: var domClickMe2 = clickMejQuery.get(0); alert("dom2: " + domClickMe2.innerHTML);