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. Codeforces Round #392 (div.2) E:Broken Tree

    orz一开始想不画图做这个题(然后脑袋就炸了,思维能力有待提高) 我的做法是动态规划+贪心+构造 首先把题目给的树变成一个可行的情况,同时weight最小 这个可以通过动态规划解决 dp[x]表示以x ...

  2. VB托盘图标不响应WM_MOUSEMOVE的原因及解决方法

    文章参考地址:http://blog.csdn.net/txh0001/article/details/38265895:http://bbs.csdn.net/topics/330106030 网上 ...

  3. BZOJ1044 [HAOI2008]木棍分割 【二分+Dp】

    1044: [HAOI2008]木棍分割 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 4281  Solved: 1644 [Submit][St ...

  4. 在JS中，一切东东其实都是对象

    对象是组成JavaScript的基本单元,在JS中,一切东东其实都是对象,而且功能非常强大,它不仅风格独特,功能也与众不同. 一.引用(reference) 引用的概念是JS的基础之一,它是指向对象实 ...

  5. Java之戳中痛点 - （5）switch语句break不能忘以及default不同位置的用法

    先看一段代码: public class Test{ public static void main(String[] args){ System.)); } } public static Stri ...

  6. js 加法运算

    搜集网友的各种解决办法: 1.parseInt(),parseFloat()等字符串转换函数 2.eval(执行加法的表达式) 3.a-(-b)  因为减法只有算术运算意义 a*1+b a为字符串 a ...

  7. vue遇到的坑（一）——数组更新

    最近在项目中遇到个问题,数组已经更新了,但是页面中的DOM并没有触发变化.我一直以来的想法就是: 既然vue实现的实时数据双向绑定,那么在model层发生了变化之后为什么就没有在view层更新呢? 在 ...

  8. Maven环境搭建、调试、打包

    1.配置Maven环境 将下载文件解压,然后设置maven环境 新建环境变量M2_HOME 变量名:M2_HOME 变量值:F:\maven\apache-maven-3.0.3 追加path环境变量 ...

  9. 解决tomcat不支持中文路径的问题

    问题描述: 开发文件下载功能时,因为需求比较简单,要求下载一个说明文件.于是,直接给出了文件所在服务器的地址,通过链接直接下载此文件(因需求简单,未考虑安全方面的问题-_-||). 在这个过程中,文件 ...

  10. 【hdu1712】分组背包（每组最多选1个）

    [分组背包] [题意]ACboy要开始选课了,上一门课能够获得的收益和他上这门课的时间是有关的,然后给你若干门课,让你帮他进行选课,每一门课自然是只能选择一个课程时长,问你如何选择,才能使ACboy获 ...