淺談Javascript 執(zhí)行順序
更新時(shí)間：2013年12月18日 14:52:00 作者：
這篇文章主要介紹了Javascript 執(zhí)行順序，有需要的朋友可以參考一下
Javascript是執(zhí)行順序是至上而下的，除非你特別說明, Javascript代碼不會(huì)等到頁(yè)面加載完畢后才執(zhí)行。比如一個(gè)網(wǎng)頁(yè)里含有以下HTML代碼：
<div id="ele">welcome to www.dbjr.com.cn</div>
如果你在這行HTML代碼前，加入如下Javascript代碼：
<script type="text/javascript">
document.getElementById('ele').innerHTML= 'welcome to my blog';
</script>
運(yùn)行該頁(yè)面，你會(huì)得到這樣的錯(cuò)誤信息：“document.getElementById(‘ele') is null?！痹蚴牵?dāng)上面的javascript運(yùn)行時(shí)，頁(yè)面上還沒有ID為‘ele'的DOM元素。
解決辦法有兩種：
1. 把javascript代碼放在HTML代碼之后：
<div id="ele">welcome to www.dbjr.com.cn</div>
<script type="text/javascript">
document.getElementById('ele').innerHTML='welcome to my blog';
</script>
2. 等到在網(wǎng)頁(yè)加載完畢后，運(yùn)行該javascript代碼。你可以使用傳統(tǒng)的解決辦法（load）：首先加HTML的body加入“<body load="load()”>,”然后在load()函數(shù)里調(diào)用上述javascript代碼。這里要著重介紹的是用jQuery來實(shí)現(xiàn)：
<script>
$(document).ready(function(){
document.getElementById('ele').innerHTML= 'welcome to my blog';
});
</script>
//當(dāng)然,既然用到了jQuery,更簡(jiǎn)單的寫法是：
<script>
$(document).ready(function(){
$('#ele').html('welcome to my blog'); //這里也可用.text()方法
});
</script>
你可以把上述jQuery代碼放在頁(yè)面的任何位置，它總是等到頁(yè)面加載完畢后才執(zhí)行。
復(fù)制代碼 代碼如下:
<div id="ele">welcome to www.dbjr.com.cn</div>
如果你在這行HTML代碼前，加入如下Javascript代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
document.getElementById('ele').innerHTML= 'welcome to my blog';
</script>
運(yùn)行該頁(yè)面，你會(huì)得到這樣的錯(cuò)誤信息：“document.getElementById(‘ele') is null?！痹蚴牵?dāng)上面的javascript運(yùn)行時(shí)，頁(yè)面上還沒有ID為‘ele'的DOM元素。
解決辦法有兩種：
1. 把javascript代碼放在HTML代碼之后：
復(fù)制代碼 代碼如下:
<div id="ele">welcome to www.dbjr.com.cn</div>
<script type="text/javascript">
document.getElementById('ele').innerHTML='welcome to my blog';
</script>
2. 等到在網(wǎng)頁(yè)加載完畢后，運(yùn)行該javascript代碼。你可以使用傳統(tǒng)的解決辦法（load）：首先加HTML的body加入“<body load="load()”>,”然后在load()函數(shù)里調(diào)用上述javascript代碼。這里要著重介紹的是用jQuery來實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
<script>
$(document).ready(function(){
document.getElementById('ele').innerHTML= 'welcome to my blog';
});
</script>
//當(dāng)然,既然用到了jQuery,更簡(jiǎn)單的寫法是：
<script>
$(document).ready(function(){
$('#ele').html('welcome to my blog'); //這里也可用.text()方法
});
</script>
你可以把上述jQuery代碼放在頁(yè)面的任何位置，它總是等到頁(yè)面加載完畢后才執(zhí)行。
相關(guān)文章
學(xué)習(xí)js在線html(富文本,所見即所得)編輯器
需要一個(gè)可以編輯同時(shí)又可顯效果的編輯框。textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本,本文介紹所見即所得編輯器實(shí)現(xiàn)原理2012-12-12
parentElement,srcElement的使用小結(jié)
本篇文章主要是對(duì)parentElement,srcElement的使用進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
JavaScript 基礎(chǔ)篇之對(duì)象、數(shù)組使用介紹（三）
對(duì)象我們?cè)谇懊嬉埠?jiǎn)單介紹過，它是一種將多個(gè)數(shù)據(jù)值集中在一個(gè)單元的東西，使用名字來存取，它是一個(gè)無序的屬性集合2012-04-04
用js重建星際爭(zhēng)霸...2006-12-12
JavaScript常用字符串與數(shù)組擴(kuò)展函數(shù)小結(jié)
這篇文章主要介紹了一些JavaScript常用字符串與數(shù)組擴(kuò)展函數(shù),整理了一些簡(jiǎn)單而使用率又高的操作String與Array的函數(shù),需要的朋友可以參考下2016-04-04
這篇文章主要介紹了js array數(shù)組對(duì)象操作方法匯總，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
下面小編就為大家?guī)硪黄獪\談js基本數(shù)據(jù)類型和typeof。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
關(guān)于IE BUG與字符串截取substr的解決辦法
本篇文章小編為大家介紹一下，關(guān)于IE BUG與字符串截取substr的解決辦法，有需要的朋友可以參考一下2013-04-04
2008-01-01
在JavaScript中處理時(shí)間之getHours()方法的使用
這篇文章主要介紹了在JavaScript中處理時(shí)間之getHours()方法的使用,是JS入門學(xué)些中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06