1.在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。

2.在body中时，直接加载并执行

典型的区别：

如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。

举个栗子：

这段代码会生成一个二维码，二维码的跳转地址为text中超链接

a.js放在body中，可生成二维码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

</head>

<body>

    <div id="qrcode"></div>

    <script>

        $('#qrcode').qrcode({

            width: 128,

            height: 128,

            text: "http://www.bsnc.cn"

        })

    </script>

</body>

</html>

b.js放在head中，网页为空白，没有执行js中内容

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

<script>

        $('#qrcode').qrcode({

            width: 128,

            height: 128,

            text: "http://www.bsnc.cn"

        })

    </script>

</head>

<body>

    <div id="qrcode"></div>

</body>

</html>

c.js放在head中，用window.onload函数执行js文件，这样仍然会生成二维码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

    <script>

        window.onload = function() {

            $('#qrcode').qrcode({

                width: 128,

                height: 128,

                text: "https://www.cnblogs.com/GG-Bond/"

            })

        }

    </script>

</head>

<body>

    <div id="qrcode"></div>

</body>

</html>

生成的二维码：

总结：body中js代码直接执行，head中代码需要触发条件

基于jquery的二维码生成插件qrcode，下载网址：https://github.com/jeromeetienne/jquery-qrcode/

JavaScript代码放在head和body的区别(QRCode生成)的更多相关文章

  1. javascript 代码放在head和body的区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...

  2. JavaScript问题01 js代码放在header和body的区别

    1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...

  3. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  4. asp.net mvc页面javascript代码中如何使用razor

    我们需要用<text>将javascript代码包含起来,强制让razor编译器回到内容模式, 或者将javascript代码放在函数中,让razor编译器可以识别,请看下面两个例子: & ...

  5. css和javascript代码写在页面中的位置说明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [转]JavaScript放在<head>和<body>的区别

    原文:http://liminhappygirl.iteye.com/blog/1841360 javaScript放在<head>和<body>的区别: 在HTML body ...

  7. javaScript放在head和body的区别

    JavaScript写在哪里? 内部:Html网页的<body></body>中: 内部:Html网页的<head></head>中: 外部:外部js文 ...

  8. 分析JavaScript代码应该放在HTML代码哪个位置比较好

    本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...

  9. JavaScript之将JS代码放在什么位置最合适

    1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

随机推荐

  1. arc068 E: Snuke Line

    首先要知道 (m/1 + m/2 + ... + m/m) 约为 mlogm 还有一个比较明显的结论,如果一个纪念品区间长度大于d,那么如果列车的停车间隔小于等于d,则这个纪念品一定能被买到 然后把区 ...

  2. [NOIP2017 TG D2T2]宝藏

    题目大意:给定一个有重边,边有权值的无向图.从某一个点出发,求到达所有的点需要的最少费用,并且限制两点之间只有一条路径.费用的计算公式为:所有边的费用之和.而边$x->y$的费用就为:$y$到初 ...

  3. [洛谷P1430]序列取数

    题目大意:给定一个序列$s$,每个人每轮可以从两端(任选一端)取任意个数的整数,不能不取.在两个人都足够聪明的情况下,求先手的最大得分. 题解:设$f_{i,j}$表示剩下$[i,j]$,先手的最大得 ...

  4. 安徽师大附中%你赛day3T1 怜香惜玉 解题报告

    怜香惜玉 题意: 已知 \(f(x)=\frac{2 \times \sum_{(i,x)=1}^x i}{φ(x)}\) 先给定数据组数\(t\)和\(k\) 每组数据给出\(n\),求\(\sum ...

  5. 停课day5

    一转眼,已经停课五天了. 高二大佬们已经都走了,在机房里面呆着,有时感觉很孤寂. 但是为了能学好竞赛,这些都是在所不惜的. 好像多打打比赛啊,可是cf要FQ,洛谷之类的比赛还不勤. 哎,先去学一发SP ...

  6. HDU 5671 矩阵

    Matrix Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...

  7. poj 2104 （划分树模板）

    Description You are working for Macrohard company in data structures department. After failing your ...

  8. rest与restful

      知乎上面摘抄的,感觉不错,分享下:  https://www.zhihu.com/question/28557115 1. REST描述的是在网络中client和server的一种交互形式:RES ...

  9. css3 新旧伸缩盒的异同

    由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...

  10. 图论：Stoer-Wagner算法

    利用Stoer-Wagner算法求无向图最小割 直接给出算法描述和过程实现: 算法步骤: . 设最小割cut=INF, 任选一个点s到集合A中, 定义W(A, p)为A中的所有点到A外一点p的权总和. ...