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事件函数在页面加载完以后对数据做出页面渲染。
2374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
