javascript的执行顺序2
测试一:
test.html
<html> <head> <title> javascript记载顺序研究 </title> <script type="text/javascript" src="1.js" ></script> <script type="text/javascript" src="2.js" ></script> <script type="text/javascript" src="3.js"></script> </head> <body> <div> this is just a Test </div> <div id="container1"> </div> </body> </html>
*.js
alert("1") //1.js
alert("2") //2.js
alert("3") //3.js
执行结果:在“this is just a Test出现前,alert()语句依次执行,执行完成后,this is just a Test 出现”
测试2:
test.html
<html> <head> <title> javascript记载顺序研究 </title> </head> <body> <script type="text/javascript" src="1.js" ></script> <div> this is just a Test </div> <div id="container1"> </div> <script type="text/javascript" src="2.js" ></script> <script type="text/javascript" src="3.js"></script> </body> </html>
*.js
alert("1") //1.js
alert("2") //2.js
alert("3") //3.js
执行结果:alert("1")->"this is just a Test 出现"->alert("2")->alert("3")
测试3:
test.html
<html> <head> <title> javascript记载顺序研究 </title> </head> <body> <script type="text/javascript" src="a.js" ></script> <div> this is just a Test </div> <div id="container1"> </div> <script type="text/javascript" src="b.js" ></script> </body> </html>
a.js
alert("aaa");
document.getElementById("container1").innerHTML="aaa";
b.js
alert("bbb");
document.getElementById("container1").innerHTML="bbb";
执行结果:alert("aaa")->“运行document.getElementById("container1").innerHTML="aaa"报错,document.getElementById("container1")为空”->alert("bbb")->"运行document.getElementById("container1").innerHTML="bbb"成功"
由一,二,三测试可以看出,在页面中的<script></script>同样会被作为一般的页面元素,按页面顺序加载。与普通DOM不同的是,<script>中的脚本会在加载过程中解释执行。在执行过程中,不能使用未加载的DOM
测试四:
test.html
<html> <head> <title> javascript记载顺序研究 </title> <script type="text/javascript" src="a.js" ></script> </head> <body> <div> this is just a Test </div> <div id="container1"> </div> <div id="container2"> Test <div> <script type="text/javascript" src="b.js" ></script> </body> </html>
a.js
window.onload=function (){ alert("aaa"); document.getElementById("container1").innerHTML="aaa"; }
b.js
alert("bbb");
document.getElementById("container2").innerHTML="bbb";
执行结果:
alert("bbb");->document.getElementById("container2").innerHTML="bbb";->window.onload()->...
测试四表面:window.onload()函数是在页面元素全部加载后再执行。
测试五:
test.html
<html> <head> <title> javascript记载顺序研究 </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="a.js" ></script> </head> <body> <div> this is just a Test </div> <div id="container1"> </div> <div id="container2"> Test <div> </body> </html>
a.js
window.onload=function (){ alert("aaa"); document.getElementById("container1").innerHTML="aaa"; } $(function(){ alert("$aaa"); })
测试结果:alert("$aaa")->alert("aa")表明jquery的$(document).ready(function(){})比window.onload先执行。