JS放在body与head中的不同
放在body和head其实差不多的,只不过是文档解析的时间不同。浏览器解析html是从上到下的。
如果把javascript放在head里的话,则先被解析,但这时候body还没有解析,所以$(#btn)会返回空值。如果把javascript放在head里的话,一般都会绑定一个监听,当全部的html文档解析完之后,再执行代码:
$(document).ready(function(){
//这里放入执行代码
})
一般情况下最好是单独把javascript放在js文件里,通过head里的<script src="file.js"></script>链接起来,css则是通过<link>。这样做的目的是为了让内容-样式-逻辑分离,以便以后能够更好地维护。
JS放在body与head中的不同的更多相关文章
- vue.js引用出错-script代码块放在head和body中的区别
这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...
- 将展示内容(div、iframe)放在Expand控件中
Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 谷歌浏览器修改CSS和js后同步保存到文件中 (译)
本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-m ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- Sticker.js – 帮助你在网站中加入贴纸效果
Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...
- js中eval详解,用Js的eval解析JSON中的注意点
先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...
- UEditor js动态创建和textarea中渲染【原】
UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...
- immutable.js 在React、Redux中的实践以及常用API简介
immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark : https://yq.aliyu ...
随机推荐
- python实现简单的百度翻译
这段时间,一直在学python,想找点东西实现一下,练手,所以我想通过python代码来实现翻译,话不多说,看吧! 以chrome为例 1 打开百度翻译 https://fanyi.baidu.co ...
- 【DM642学习笔记七】缓冲区管理BufferManagement
(参考文档:The TMS320DM642 VideoPort Mini-Driver ——3.2 Buffer Management) 认识输入/输出视频数据的缓冲区管理,有利于对视频图 ...
- 逻辑备份(mysqldump/select into outfile)
#mysqldump备份 shell> mysqldump -uroot -p -P4306 sakila actor>E:\sakila-actor.sql shell> mysq ...
- spring-搭建-概念-配置详解-属性注入
1 spring介绍 三层架构中spring位置 spring一站式框架 正是因为spring框架性质是属于容器性质的. 容器中装什么对象就有什么功能.所以可以一站式. 不仅不排斥其他框架,还能帮其 ...
- 洛谷P4022 熟悉的文章
题意:给定一个串集合s,每次给定一个串t,询问一个最大的L,使得存在一种划分能把t划分成若干个子串, 其中好的子串总长不小于0.9|t|.好的子串定义为长度不小于L且是s中某一个串的子串. 解:发现这 ...
- linux系统之间互传文件
参考网址:http://blog.csdn.net/shaoxiaohu1/article/details/23191637 1.文件复制:本机->远程服务器: scp /home/shaoxi ...
- PHP--Button按钮没有设置type类型,默认会提交表单
例如: <from > <input type='submit' value='提交'></input> <button >提交</button& ...
- JQuery--计算元素的宽度
/*width:只能计算元素的内容宽度 * innerWidth():可以获取元素的 内容+padding 的宽度 * outerWidth():可以获取元素的 内容+padding+border 的 ...
- php学习知识点框架
图片来源于知乎,感觉挺全面,通过查看可以更好的了解自己的薄弱知识点,大家共勉.
- WPF内嵌CEF控件,与JS交互
1)安装cefsharp.winform包 打开VS2017,打开nuget,找到cefsharp.winform,安装 问:为什么wpf程序不使用cefsharp.wpf? 答:因为cefwpf 4 ...