Index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scriptsrc="jqueryUi/js/jquery-1.9.1.min.js"></script>
<scriptsrc="testjs.js"></script>
<script>
$(function(){
alert("当前页面中的$(function(){})1");
});
alert("head中的直接alert");
functiontext1(){
alert("页面中的函数调用text1()");
}
text1();
vartestfun=function(){
vartextvalue = $("#textvalue").val();
alert(textvalue);//undefined
alert("页面中的函数调用testfun()");
}
testfun();
$(function(){
alert("当前页面中的$(function(){}2);");
vartextvalue = $("#textvalue").val();
alert(textvalue);//undefined
});
functiontextonload(){
alert("页面加载完以后最后加载的数据");
}
</script>
<scriptsrc="testjs2.js"></script>
</head>
<bodyοnlοad="textonload()">
<inputtype="text" id="textvalue" value="11111"/>
<script>
alert("body中的弹出层");
</script>
</body>
</html>
Testjs.js
alert("text1前");
function text1(){
alert("textjs");
}
alert("text1后");
$(function(){
alert("text1.js中的$(function(){})");
});
Testjs2.js
alert("text2前");
function text2(){
alert("textjs");
}
alert("text2后");
$(function(){
alert("text2.js中的$(function(){})");
});
//执行顺序
- Text1前
- Text1后
- head中的直接alert
- 页面中的函数调用text1()
- textvalue取值=undefined
- 页面中的函数调用testfun()
- Text2前
- Text2后
- body中的弹出层
- text1.js中的$(function(){})
- 当前页面中的$(function(){})1
- 当前页面中的$(function(){}2);
- textvalue取值=11111
- text1.js中的$(function(){})
- 页面加载完以后最后加载的数据
总结:
- html页面中的来说是按照顺序向下执行的;
- 外链js数据是也是按照页面的引入顺序执行的;(其实可以看做引入的js就在当前引入的位置);
- $(function(){})这种代码块的数据会在页面等加载完以后最后才执行这些代码块;
- textvalue取值=undefined是因为页面的标签还未渲染;所以我们获取不到值;
- 通常函数的调用我们都是在页面全部渲染完才开始操作的;所以不会出现(undefined)
- 如果需要页面初始化的时候获取后台数据做渲染;那么我们应该在$(function(){})执行;或者使用onload事件函数在页面加载完以后对数据做出页面渲染。