`

JS代码放在head和body的区别

 
阅读更多
    由于在页面中总是难免javascript脚本语言，在代码中看到body里可以放<script type=”text/javascript”>脚本，而head里也可用<scripttype=”text/javascript”>脚本，想要用好他们，就得了解他们的区别，经过自己的总结发现他们的区别如下：
一、在head主体里写，如果有方法体，那么就是在客户点击的时候触发，如果没写方法体，比如引入的js文件，那么在加载页面前就预加载了。
二、写在body主体里，是为了实现某些部分动态地创建文档。 这里比如制作鼠标跟随事件，肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果等。这个是在页面加载的时候加载。
二、会与body和head标签顺序有关。比如下面代码：
<html>
<body>
<script type="text/javascript">
alert("in body");
</script>
</body>
<head>
<script type="text/javascript">
alert("in head");
</script>
</head>
</html>

结果是先弹出body，再弹出head.
如果改下代码结果就截然相反了，例
<html>
<head>
<script type="text/javascript">
alert("in head");
</script>
</head>
<body>
<script type="text/javascript">
alert("in body");
</script>
</body>
</html>
执行时得考虑javascript执行顺序
分享到：
| acegi
评论
1 楼 fuaotech 2015-07-17  
恩 相互借鉴！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS代码放在head和body中的区别分析

    代码如下: &lt;head&gt; function changelocation(id) {…………} &lt;/head&gt; &lt;body&gt;&lt;select class=”input1″ id=”vSort0″ name=”vSort0″ onChange=”changelocation(document.form4.vSort0....

    探讨JavaScript标签位置的存放与功能有无关系

    在网页中，我们可以将JavaScript代码放在html文件中任何位置，但一般放在head或body标签里面。 一般来说，[removed]元素放在哪里与其的功能作用是紧密相关的，在这里讨论2种情况： 1、放在&lt;head&gt;里 将...

    JavaScript程序开发之JS代码放置的位置

    可以直接放在head标签内，如下代码 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;testPage&lt;/title&gt; [removed] //your js code [removed] &lt;/head&gt; &lt...

    css为什么要放在head标签中

    思考: css为什么要放在head标签中, 而不能像javascript一样置于body标签尾部? Talk is cheap, show me the code. OK, 那我们通过写一些代码来得出结果 在这里先说chrome控制台的一个小技巧: 限制download速度对...

    网页精华代码集.doc

    　因为这是一段javascripts代码，所以它们应该放在&lt;SCRIPT LANGUAGE=javascript&gt;标签和之间。&lt;!-- 和 --&gt;是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。...

    JS学习笔记相关代码-测试代码

    clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。 Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子...

    JavaScript_Src.chm

    ====1、以下代码放在一个新建页面的HTML的&lt;body&gt;&lt;/body&gt; 区即可：[页面上必须什么都没有] &lt;HEAD&gt; &lt;TITLE&gt;Blink image &lt;/HEAD&gt; &lt;BODY ONLOAD="soccerOnload()" topmargin="0"&gt; ; left:150; top:0"&gt; 图片的链接....

    Js放到HTML文件中的哪个位置有什么区别

    先明白js能放在HTML的那个位置，分别是head和body中。大部分人都是放到head里面的。我学的时候也是稀里糊涂的跟着放到head的里面，也不知道为什么？今天看说说，放到这两个地方的区别: 先看一段html代码: 代码如下: ...

    《javaScrip开发技术大全》源代码

    • sample02.htm 将JavaScript代码放在了&lt;body&gt;标签与&lt;/body&gt;标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同一个网页中使用不同脚本语言 • sample05....

    js禁止页面复制功能禁用页面右键菜单示例代码

    &lt;body oncontextmenu=”return false”&gt;...} [removed] 注意这段代码必须放在body元素后面，放在前面或者放在head里面都不起作用。 补全：document.body.onselectstart 页面选中功能。 document.body.onc

    JavaScript核心语法总结(推荐)

    本文介绍了JavaScript的基本（常用）语法，供大家参考。 Overview 先说一下Javascript该怎么写。两种形式，一种是直接把JavaScript写在HTML页面里，另一种是存在*.js文件里然后在页面内引用。 直接写时，即可以放在&...

    java+mysql实现的代码分享网（所有源码已开源，效果可看网址：www.admintwo.com）

    5、由于使用了layui前端框架，为了保证代码清晰，每个html文件，均对应一个js文件处理，并且js文件名也和jsp文件名一一对应（非常利用修改）。 6、运行步骤：首先将代码导入到eclipse或者其他IDE，然后利用mysql...

    javascript初学者常用技巧

    里面，当浏览器载入到Body部分的时候就开始执行Javascript &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; [removed] 。。。。。。 [removed] &lt;/body&gt; &lt;/html&gt; 放在HTML的&lt;head&gt;&lt;/...

    使用CDN和AJAX加速WordPress中jQuery的加载

    确定要放在Head部分 ? 事实上最好的情况是，js文件都不要在&lt;head&gt;部分进行加载，否则会影响到head部分的载入速度，直接导致网站的内容（body）载入延迟。如果你确定你不需要在head部分载入jQuery，请将载入...

    javaScript的基本语法

    代码的执行顺序则是从上往下的读取顺序，再一一执行，…元素标签可放在body里面也可以放在head里面。 3.javaScript的代码严谨性 javaSript的代码字母大小写严格区分，举个简单的例子变量A和变量a是两个不同的变量，...

    javascript学习笔记(一) 在html中使用javascript

    1.延时脚本运行的方法： 方法一：把全部javascript引用放在&lt;body&gt;元素中，页面内容后，如 代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;示例1&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!–页面...

    Javascript无阻塞加载具体方式

    还是在head中，用以保证在js加载前，能加载出正常显示的页面。 [removed]放在&lt;/body&gt;前。 2、成组脚本 由于每个[removed]标签下载时阻塞页面解析过程，所以限制页面的[removed]总数也可以改善性能。适用于内联...

    JS API接口和返回的版本

    这个 JavaScript 是在网页中运行的，这里建议大家要把 head 和 body 标签都写全，即使它们对你来说看上去没有什么用处，但是在有些浏览器中，如果这些标签没有写全，或者写的不正确，程序就不能正确运行。...

Magicbox
Global site tag (gtag.js) - Google Analytics