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. 前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)实现下

    提醒自己:上一篇文章属于纯理论的文章,我自己有的部分之从网上摘抄的,我自己也是不理解的.或许过一段日子我就能全明白了.我自己还是喜欢实战,做几个例子就明白了. 怎么做让自己网页的标签来实现语义化,我直 ...

  2. 什么是Redis的事务

    一.什么是Redis的事务 可以一次执行多个命令,本质上是一组命令的集合.一个事务中的所有命令都会序列化,然后按顺序地串行化执行,而不会被插入其它命令. 二.Redis的事务可以做什么 一个队列中,一 ...

  3. cdh版本的hadoop安装及配置(伪分布式模式) MapReduce配置 yarn配置

    安装hadoop需要jdk依赖,我这里是用jdk8 jdk版本:jdk1.8.0_151 hadoop版本:hadoop-2.5.0-cdh5.3.6 hadoop下载地址:链接:https://pa ...

  4. [Leetcode] subsets ii 求数组所有的子集

    Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...

  5. 网络编程：listen函数

    listen函数仅由TCP服务器调用,它做两件事: 当socket函数创建一个套接字时,它被假设为一个主动套接字,也就是说,它是一个将调用connect发起连接的客户套接字.listen函数把一个未连 ...

  6. Seajs的用法

    以前经常听到Seajs,但是没深入了解过,不清楚到底是用做哪个方面,后来调组到M站做开发,发现项目用到了Seajs,便去了解下 SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实 ...

  7. java AWT repaint paint update 方法

    paint(Graphic g): awt调用这个方法有2种形式.程序驱动方式和系统驱动方式. 在系统驱动的情况下(比如界面第一次显示组件),系统会判断组件的显示区域,然后向事件分发线程发出调用pai ...

  8. codeforces 1065D

    题目链接:https://codeforces.com/problemset/problem/1065/D 题意:给你一个又1~n^2组成的n行n列的矩阵,你可以走日字型,直线,斜线,现在要求你从1走 ...

  9. Terminals Project

    https://github.com/Terminals-Origin Terminals Project Terminals is a secure, multi tab terminal serv ...

  10. React 开发常见报错解决方法

    1. 使用 redux 的异步 action 时浏览器报错: Error: Actions must be plain objects. Use custom middleware for async ...