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. C#中构造函数和析构函数的用法

    构造函数与析构函数是一个类中看似较为简单的两类函数,但在实际运用过程中总会出现一些意想不到的运行错误.本文将较系统的介绍构造函数与析构函数的原理及在C#中的运用,以及在使用过程中需要注意的若干事项.一 ...

  2. 【C++ 拾遗】Function-like Macros

    Macro expansion is done by the C preprocessor at the beginning of compilation. The C preprocessor is ...

  3. ARC074 E RGB Sequence DP

    ---题面--- 题解: 首先,有一个不太直观的状态,f[i][j][k][l]表示DP到i位,三种颜色最后出现的位置分别是j, k, l的方案数.因为知道了三种颜色最后出现的位置,因此也可以得知以当 ...

  4. MySQL使用笔记（三）表的操作

    By francis_hao    Dec 11,2016 表的操作 表的操作有创建表.查看表.删除表和修改表 创建表 创建表之前要在某个数据库中. mysql> create table ta ...

  5. missing blocks错误

    Datanode的日志中看到: 10/12/14 20:10:31 INFO hdfs.DFSClient: Could not obtain block blk_XXXXXXXXXXXXXXXXXX ...

  6. Eclipse中的Web项目自动部署到Tomcat的webapp目录下

    Eclipse中的Web项目自动部署到Tomcat   原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...

  7. 修改select样式，vue select

    <style> .selectbox{ width: 200px; display: inline-block; overflow-x: hidden; height: 28px; lin ...

  8. C++构造函数重载以及默认参数引起的二义性

    大家都知道当我们声明一个类时,系统会提供一个默认构造函数.当我们需要提供参数进行对类数据成员进行初始化时,就需要对类的带参构造函数进行重载.同时,如果我们需要调用默认构造函数进行类数据成员的初始化时, ...

  9. Liberty中应用的contextroot

    参考:http://www-01.ibm.com/support/knowledgecenter/api/content/SSEQTP_8.5.5/com.ibm.websphere.wlp.doc/ ...

  10. 【bzoj1911-[Apio2010]特别行动队】斜率优化

    [题目描述] 有n个数,分成连续的若干段,每段的分数为a*x^2+b*x+c(a,b,c是给出的常数),其中x为该段的各个数的和.求如何分才能使得各个段的分数的总和最大. [输入格式]  第1行:1个 ...