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 ...
随机推荐
- java填坑记录
一.The absolute uri: [http://java.sun.com/jsp/jstl/core] cannot be resolved in either web.xml or the ...
- IO流 复制文件及文件夹
package io; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; im ...
- IO流18 --- RandomAccessFile实现数据的读写操作 --- 技术搬运工(尚硅谷)
RandomAccessFile实例化时,需要设置读写模式 示例:复制文件 @Test public void test16() throws IOException { RandomAccessFi ...
- 爬虫(四)Selenium + Headless Chrome爬取Bing图片搜索结果
Bing图片搜索结果是动态加载的,如果我们直接用requests去访问页面爬取数据,那我们只能拿到很少的图片.所以我们使用Selenium + Headless Chrome来爬取搜索结果.在开始前, ...
- 2.快速创建springboot项目 连pom文件里面的配置都不用配了
无论是创建项目 还是module 模块 选择这个 .然后在后面的选择中选择自己要的功能 就可以把相关的依赖都加进去 省去了依赖 其后的写法跟第一篇一样 在这个项目下面有一个配置文件 ====>a ...
- hbase连接linux开发过程
最近近公司被安排做hbase开发,太久没做今天记录下过程 import java.io.IOException; import org.apache.hadoop.conf.Configuration ...
- mysql 安装失败 start service执行不下去
简单说一下自己安装mysql的经历坑点,新手应该都会遇到.新买了一个电脑,第一次安装的情况:在网上下载好几个不同的mysql,安装都在最后一步执行的时候,执行不下去,最后打开客户端,就是闪一下就消失了 ...
- Windows 的 80 端口被 System 进程占用解决方案
通过 Windows 的资源监视器(win+R:resmon)可以看到 80 端口已经被占用,下图是已经解决好了,没能截图被占用的情况,下面给出解决方案. PS:贴出两个好用的 windows cmd ...
- Django部署,Django+uWSGI+nginx+Centos部署
说明:系统是在windows上开发的,使用django1.11.4+python3.6.3开发,需要部署在centos6.4服务器上. 第一步:在Centos6.4上安装Python3.6.2 安装请 ...
- androidstudio实现增量更新步骤
本文demo和参考例子参考-传送 门:http://blog.csdn.net/duguang77/article/details/17676797 一.增量更新优点:节省客户端和服务器端流量 增量 ...