javascript - 一个js初级问题：放在head和body里的代码有何区别？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 一个js初级问题：放在head和body里的代码有何区别？

怪我咯 2017-04-10 12:47:02

[JavaScript讨论组]

852

我也不问什么阻塞之类的东西，我就问下面这两段很简单的代码相同的只是放的位置不一样，为什么会alert("aaaaaaaaaaaa");都弹出，而按钮的事件放在body里的代码响应，而放在head里的代码就不响应

<html>
<head> 
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        alert("aaaaaaaaaaaaaaaaaa");
        $("#btn").click(function(){
            alert("abcde");
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="test"/>
    </body>
</html>

<html>
<head> 
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.js"></script>


</head>
<body>
    <input type="button" id="btn" value="test"/>
    <script type="text/javascript">
        alert("aaaaaaaaaaaaaaaaaa");
        $("#btn").click(function(){
            alert("abcde");
        });
    </script>
</body>
</html>

怪我咯

走同样的路，发现不同的人生

全部回复(2)

ringa_lee2017-04-10 12:49:02 2楼

放在body和head其实差不多的，只不过是文档解析的时间不同。浏览器解析html是从上到下的。
如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以$(#btn)会返回空值。如果把javascript放在head里的话，一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：

$(document).ready(function(){
//这里放入执行代码
})

一般情况下最好是单独把javascript放在js文件里，通过head里的<script src="file.js"></script>链接起来，css则是通过<link>。这样做的目的是为了让内容-样式-逻辑分离，以便以后能够更好地维护。

赞 +0

添加回复

天蓬老师2017-04-10 12:49:02 1楼

哈哈虽然我是后台，但是遇到这种简单的前端问题我也来回答一下吧。因为放在head里面的script在执行的时候，下面dom还没有加载完成。所以找不到#btn..

所以一般不都是 $(document).ready(function(){...});

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>