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

最新推荐文章于 2024-03-09 22:59:25 发布

kusedexingfu

最新推荐文章于 2024-03-09 22:59:25 发布

阅读量6.2k

点赞数 4

分类专栏： js jquery 文章标签： js jquery

本文链接：https://blog.csdn.net/kusedexingfu/article/details/78417738

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 1 订阅

订阅专栏

直入主题

主页面内容如下：

<!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.打印顺序：

这三条最后顺序打印；

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

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

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

3.打印顺序：

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

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

4.打印顺序：

页面中的普通js代码是顺序执行的。

kusedexingfu

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
页面中的js和jquery的执行顺序

直入主题主页面内容如下： console.log("第一个$(function() {})之前的"); $(function() { console.log("第一个$(function
复制链接

扫一扫