Question

当我在HTML中注释时，代码可以正常工作。请问问题是什么，为什么会发生？上周刚开始学习网络编程，非常感谢。

<!DOCTYPE html>
    <html lang="en">
    <html>
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <script src="jquery-3.3.1.js"></script>
        <script src="menu.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <span id="id1">Welcome back to my site. </span>
        <div id="div1" >
            <p>Hi</p>
            <a href="javascript:void(0);" id="hyper">Hi</a>
            <!--<script src="menu.js"></script> -->
        </div>
        <input type="button" id="btn" value="Toggle" />

    </body>
</html>

JavaScript（menu.js）

$("#hyper").click(function(){
    alert("Hi");
});

Answer 1

问题在于，当<script>位于<head>时，它在文档加载之前就已执行。这意味着当<script>在<head>中并且$("#hyper")行在该元素被执行时

<a href="javascript:void(0);" id="hyper">Hi</a>

未生成。因此它不起作用。

解决方案：

将您的<script>放在<body>的结尾
或者您可以使用document.ready()

下面是两个例子，以了解区别。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  //At this point "<div id="test"><div>" is not loaded 
  console.log($('#test').length) //0
  console.log(document.querySelector('#test')) //null
</script>

<div id="test"><div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test"><div>

<script>
  console.log($('#test').length) //1
  console.log(document.querySelector('#test')) //<div id="test">…</div>
</script>

Answer 2

$(document).ready(function() { setInterval(function() { $('#timexx').load(location.href + " #timexx>*", "") }, 3000); });

中的脚本有两个问题

这些脚本是在加载主体之前执行的，有时可能会引起问题，但是您可以使用<head>或document.ready等来克服此问题。
在大型应用程序中，脚本会变得非常大，然后，如果您已将脚本加载到window.onload中，则用户必须等到它们完全加载后才能在网页上看到任何内容，但是如果您将它们放在页面的页脚中，然后您可以在网页上创建一个预加载器，然后将其加载并显示给用户，直到所有脚本完全加载为止。

为什么我不能只在其中声明脚本？

2 个答案: