您的位置：首页 > Web前端 > JQuery

页面中的js和jquery的执行顺序

2017-11-01 19:56 288 查看
直入主题

主页面内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="outer-up.js"></script>
</head>
<body>
<script>
console.log("第一个$(function() {})之前的");
$(function() {
console.log("第一个$(function(){})中获取文本框的值：" + $("#text1").val());
console.log("第一个$(function(){})中获取后面声明的a的值：" + a);
});
console.log("第一个$(function() {})之后的");
console.log("在文本框前获取文本的值：" + $("#text1").val());
</script>
<input type="text" id="text1" value="文本1" />
<script type="text/javascript" src="outer-center.js"></script>
<script>
console.log("在文本框后获取文本的值：" + $("#text1").val());
var a = 1;
$(function() {
console.log("页面最后的$(function(){})中的");
});
console.log("页面最后的$(function(){})之后的");
</script>
<script type="text/javascript" src="outer-down.js"></script>
</body>
</html>

其中，outer-up.j内容:
console.log("外部的js-上")
outer-center.js内容：
console.log("外部的js-中")
outer-down.js内容：
console.log("外部的js-下")


执行，控制台打印结果如下：



分析如下：

1.打印顺序：



这三条最后顺序打印；

[b]页面中的$(function(){})无论是在什么位置，都是在页面和其他js执行完才执行的，并且位置靠前的$(function(){})中的内容先执行。[/b]

2.打印语句：第一个$(function(){})中获取后面声明的a的值：1;在a变量的前面的$(function(){})中可以获取后面声明的变量a。

$(function(){})是在其他js执行完才执行，所以在$(function(){})中可以获取它位置后声明的变量。

3.打印顺序：



在页面文本框前通过js获取不到其value值，在文本框后可以获得。

说明页面中的普通js代码(此处用于区别 $(function(){})中的代码)和html代码也是顺序执行的。

4.打印顺序：



页面中的普通js代码是顺序执行的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航