JavaScript代码放在head和body的区别(QRCode生成)
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生成)的更多相关文章
- javascript 代码放在head和body的区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...
- JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
- JavaScript代码放在HTML代码不同位置的差别
通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...
- asp.net mvc页面javascript代码中如何使用razor
我们需要用<text>将javascript代码包含起来,强制让razor编译器回到内容模式, 或者将javascript代码放在函数中,让razor编译器可以识别,请看下面两个例子: & ...
- css和javascript代码写在页面中的位置说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转]JavaScript放在<head>和<body>的区别
原文:http://liminhappygirl.iteye.com/blog/1841360 javaScript放在<head>和<body>的区别: 在HTML body ...
- javaScript放在head和body的区别
JavaScript写在哪里? 内部:Html网页的<body></body>中: 内部:Html网页的<head></head>中: 外部:外部js文 ...
- 分析JavaScript代码应该放在HTML代码哪个位置比较好
本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...
- JavaScript之将JS代码放在什么位置最合适
1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
随机推荐
- [CF327E]Axis Walking([洛谷P2396]yyy loves Maths VII)
题目大意:给一个长度为$n(1\leqslant n\leqslant24)$的序列$S$和$k(0\leqslant k\leqslant2)$个数. 求有多少种$S$的排列方式使得其任何一个前缀和 ...
- 洛谷 [CQOI2015]选数 解题报告
[CQOI2015]选数 题目描述 我们知道,从区间\([L,H]\)(\(L\)和\(H\)为整数)中选取\(N\)个整数,总共有\((H-L+1)^N\)种方案. 小\(z\)很好奇这样选出的数的 ...
- [模拟赛] GotoAndPlay
GotoAndPlay 10月3日,在杭州市西湖景区,一只小松鼠不停地接受一道道食物,花生. 玉米.饼干,可谓来者不拒,憨态可掬的模样吸引了众多围观者... Description 小松鼠终于吃撑了, ...
- The XOR Largest Pair [Trie]
描述 在给定的N个整数A1,A2--AN中选出两个进行xor运算,得到的结果最大是多少? 输入格式 第一行一个整数N,第二行N个整数A1-AN. 输出格式 一个整数表示答案. 样例输入 3 1 2 3 ...
- angular js module 的理解
module其实就是一个容器,里面可以装controller,service,directive,filter等, 官网的解释是:Module :A container for the differe ...
- java获取mysql数据库表、字段、字段类型、字段注释
最近想要写一个根据数据库表结构生成实体.mapper接口.mapping映射文件.service类的简单代码生成工具,所以查阅了一些资料,怎样获取数据库的表.表中字段.字段类型.字段注释等信息. 最后 ...
- input输入浮动提示
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- POJ1182 食物链---(经典种类并查集)
题目链接:http://poj.org/problem?id=1182 食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submission ...
- HDU2481 Toy
Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission ...
- 【HDU】6146 Pokémon GO
[题意]一个2*n的网格,再保证步数最少的情况下,求从任意格出发遍历完所有格的方案数,格子八连通.n<=10000,T<=100. [算法]递推,DP [题解]原题链接:蓝桥杯 格子刷油漆 ...