放在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中的不同的更多相关文章

  1. vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...

  2. 将展示内容(div、iframe)放在Expand控件中

    Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...

  3. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  4. 谷歌浏览器修改CSS和js后同步保存到文件中 (译)

    本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-m ...

  5. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  6. Sticker.js – 帮助你在网站中加入贴纸效果

    Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...

  7. js中eval详解,用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  8. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  9. immutable.js 在React、Redux中的实践以及常用API简介

    immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyu ...

随机推荐

  1. Tomcat6 配置快逸报表

    一.下载快逸报表程序,安装并创建报表 thunder://QUFodHRwOi8vZnRwY25jLXAyc3AucGNvbmxpbmUuY29tLmNuL3B1Yi9kb3dubG9hZC8yMDE ...

  2. 构建工具Bazel入门

    Bazel入门   原文:http://bazel.io/docs/getting-started.html 译者:chai2010 安装 安装过程请参考: http://bazel.io/docs/ ...

  3. 深入浅出 Java Concurrency (2): 原子操作 part 1[转]

    从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始).很多情况下我们只是需要一个简单的 ...

  4. MySQL实战总结

    极客上买了<MySQL实战45讲>,用导图大致总结后,跟大家分享下

  5. 加载框(loading)

    一般在用户提交数据或者新加载页面时,请求服务器的过程,页面没有响应,但是用户并不知道,此时在发生什么.这时,就需要loading框给用户提示,增加用户体验. 1.引入loading.css. html ...

  6. PAT甲级——A1059 Prime Factors

    Given any positive integer N, you are supposed to find all of its prime factors, and write them in t ...

  7. 在线模拟http-post请求

    今天,要测试一个post请求的API,找了下,下面的网站可以直接利用起来,mark下 http://www.atool.org/httptest.php

  8. hbase 利用rowkey设计进行多条件查询

    摘要 本文主要内容是通过合理Hbase 行键(rowkey)设计实现快速的多条件查询,所采用的方法将所有要用于查询中的列经过一些处理后存储在rowkey中,查询时通过rowkey进行查询,提高rowk ...

  9. springcloud的服务提供者与服务消费者

    1.说明 springcloud中由服务消费者调用服务提供者一共有两种方法rest和feign 2.feign (1)使用feign的方式进行服务调,搭建服务提供者. 创建一个web项目(服务提供者) ...

  10. LintCode_44 最小子数组

    题目 给定一个整数数组,找到一个具有最小和的子数组.返回其最小和. 注意事项 子数组最少包含一个数字 样例 给出数组[1, -1, -2, 1],返回 -3 思路 动态规划解决 C++代码 int m ...