js代码放在head和body的区别

区别

代码放在head和body中主要是dom的加载顺序

如果是调用方法可以直接放在head中，因为此时dom元素已经加载完毕

如果是希望直接加载dom对象建议放在body中

代码演示

<html>
<head>
    <title>Test</title>
    <style type="text/css">

    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        console.log($("h1"));
    </script>

</head>

<body>
    <h1>标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>
    <script type="text/javascript">
        console.log($("h1"));
    </script>
</body>

</html>

F12可以看出两者的加载内容是不一样的

 解决方案

通过JQuery解决上面的问题

<html>
<head>
    <title>Test</title>
    <style type="text/css">

    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>

        $(function() {
           // 文档载入完毕
           $("h1").html("修改内容");
        });
    </script>

</head>
<body>
      <h1>内容1</h1>
      <h1>内容2</h1>
      <h1>内容3</h1>
      <h1>内容4</h1>
      <h1>内容5</h1>
   
</body>
</html>

文档加载完毕后才执行相应的事件

posted @ 2020-11-01 12:26  bradleydan  阅读(322)  评论(0)    收藏  举报