我已经使用 Bootstrap 模板等模板一段时间了，当我尝试修改或添加更多脚本时，我总是会遇到这两种情况
场景 1:在某些模板中，脚本仅在放置在顶部(即头部)时才有效。 但在元素底部时不起作用
<head>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
</footer>
</body>
场景 2:在某些模板中，脚本仅在放置在底部(即页脚)时才有效。 但放在元素顶部时不起作用
<head>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</footer>
</body>
我想了解这些场景背后的想法。是什么导致了这种行为？或者应该考虑什么？
最佳答案
脚本的放置表明依赖关系:如果脚本 A 需要脚本 B 的一些值，那么脚本 B 将放在脚本 A 的之上。例如:某些 JavaScript 需要 jQuery，因此您将 jQuery 置于任何脚本之上需要它的脚本。
那是因为脚本是从上到下运行的。
有些脚本需要加载 DOM，例如它们对某些 HTML 元素进行操作，即它们使用 document.getElementById 或 $("selector")。在那些情况下，脚本需要 HTML 元素，因此这些元素需要位于需要它们的 JavaScript 之上，或者换句话说，需要一些 HTML 元素的 JavaScript 需要放在 >低于那些。
还有其他方法可以解决这个问题，例如利用 window.addEventListener("DOMContentLoaded", function(){…}) 或 jQuery 的 $(document).ready(function(){ ...})。这些选项添加事件监听器，这些监听器稍后在触发事件时运行。
另一种较新的选择是 defer属性。
更多详情请访问 Why does jQuery or a DOM method such as getElementById not find the element? .
有时，脚本也放在底部，以更快地加载页面内容，因为必须下载脚本，并且内容仅在脚本之后加载。您可以使用 async 属性作为替代。
关于javascript - 为什么javascript在页面底部或有时从页面顶部运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36228495/