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. LeetCode -- 3SumCloset

    Question: Given an array S of n integers, find three integers in S such that the sum is closest to a ...

  2. AGC017D Game on Tree(树型博弈)

    题目大意: 给出一棵n个结点的树,以1为根,每次可以切掉除1外的任意一棵子树,最后不能切的话就为负,问是先手必胜还是后手必胜. 题解: 首先我们考虑利用SG函数解决这个问题 如果1结点有多个子节点,那 ...

  3. Noip2016滚粗记QAQ

    day1 t1 XBG #include<map> #include<cstdio> #include<string> #include<string.h&g ...

  4. BZOJ2097: [Usaco2010 Dec]Exercise 奶牛健美操 贪心+伪树dp+二分

    //论全局变量的杀伤力....QAQ#include<cstdio> #include<iostream> #include<cstdlib> #include&l ...

  5. bzoj Gty的超级妹子树 块状树

    Gty的超级妹子树 Time Limit: 7 Sec  Memory Limit: 32 MBSubmit: 500  Solved: 122[Submit][Status][Discuss] De ...

  6. shell监控进程是否存在

    1.直接给代码:我这个是两个程序.多半要写成函数 [root@java1 src]# cat checkprocess.sh #!/bin/bashcheckprocess(){ps -ef|grep ...

  7. python异常之with

    1.基本语法 with expression [as target]: with_body 参数说明: expression:是一个需要执行的表达式: target:是一个变量或者元组,存储的是exp ...

  8. php中的split函数

    字符串分割函数:split函数 <?php $email='microsoft@exam!ple.com'; $domain = split('\.|@|!',$email);//split分割 ...

  9. 「6月雅礼集训 2017 Day2」B

    [题目大意] 求n*n的棋盘,每行每列都有2个黑格子的方案数. n<=10^7 [题解] zzq的做法好神奇啊 行列建点,二分图 左边有i个点,右边有j个点的方案数 f[i,j] 左边有i个点, ...

  10. Ubuntu破解开机密码

    使用Ubuntu和使用windows系列产品一样,会忘记开机密码.难道我们在忘记开机密码的时候就必须重装系统吗?当然不是了!既然在windows下面我们可以破解开机密码,那么在Ubuntu里面一样可行 ...