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. [洛谷P1251]餐巾计划问题

    题目大意:一个餐厅N天,每天需要$r_i$块餐巾.每块餐巾需要p元,每天用过的餐巾变脏,不能直接用.现在有快洗店和慢洗店,快洗店洗餐巾需要m天,每块花费f元:慢洗店洗餐巾需要n天,每块餐巾s元(m & ...

  2. 深入探讨Android异步精髓Handler

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  3. 【TMD模拟赛】上低音号 链表

    这道题一看有两个出发现点,一枚举点去找边界,想了一会就Pass了...,二是枚举相框,我们最起码枚举两个边界,然后发现平行边界更好处理,然而仍然只有30分,这个时候就来到了链表的神奇应用,我们枚举上界 ...

  4. [USACO] 2004 Open MooFest 奶牛集会

    题目背景 MooFest, 2004 Open 题目描述 约翰的N 头奶牛每年都会参加"哞哞大会".哞哞大会是奶牛界的盛事.集会上的活动很 多,比如堆干草,跨栅栏,摸牛仔的屁股等等 ...

  5. poj1185 炮兵阵地 状压dp

    司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用"P"表示) ...

  6. 简单瞎搞题（bitset的操作）

    链接:https://www.nowcoder.com/acm/contest/132/C来源:牛客网 题目 一共有 n个数,第 i 个数是 xi  xi 可以取 [li , ri] 中任意的一个值. ...

  7. 新手如何更换自己喜欢的背景以及此背景的css码

    以下内容为转载(对于css码可以自己写当然也可以去网上搜现成的): 更换背景教学:https://jingyan.baidu.com/album/fc07f9897c730412ffe519c0.ht ...

  8. HTML5学习之新增标签

    转自:http://www.cnblogs.com/fly_dragon/archive/2012/05/25/2516142.html 作者:FlyDragon 一.引言 在本节中,笔者将向大家讲述 ...

  9. POJ 3070 + 51Nod 1242 大斐波那契数取余

    POJ 3070 #include "iostream" #include "cstdio" using namespace std; class matrix ...

  10. HDFS 的Trash回收站

    1)在core-site.xml文件中添加这个配置 在每个节点(不仅仅是主节点)上添加配置 core-site.xml,增加如下内容 <property> <name>fs.t ...