我是否必须使用为 jQuery 准备的文件？

Question

我有一个我想使用的脚本，但是，我不知道我是否需要准备好文档。

 $(window).scroll(function(){ $(".hero-h1").css("opacity", 1 - $(window).scrollTop() / 250); });

Answer 1

如果 position 并运行您的脚本，以便它所依赖的元素在运行时已经存在，则不。

这与是否有人需要使用本质上是相同的问题

window.addEventListener('DOMContentLoaded', () => {
  // all of the code
});

如果，在您的脚本运行时，您尝试 select 一个无论如何并不总是存在的元素 - 例如页面上的特定<div>

$('.mybutton').on('click', () => {
  // ...

然后在上面的行运行时，您需要确保页面上存在.mybutton 。

这可以通过几种方式来实现。 其中一种方法是将整个脚本包装在.ready中（或者，现在通常首选，只是一个普通函数）：

$(() => {
  $('.mybutton').on('click', () => {
    // ...

可以完成的另一种方法是将脚本放在 HTML 标记中依赖的所有元素之后 - 例如

// lots of HTML code
<button class="mybutton">click</button>
<script src="myscript.js"><script>
</body>

如果将脚本放在正文的末尾，那么 static 页面标记中的所有元素都将存在于 DOM 中。

第三种方法是为您的脚本赋予defer属性。

<script defer src="myscript.js"><script>

这将确保在脚本运行之前加载所有 static 元素。

对于您的这种特殊情况，如果您所做的只是将滚动处理程序添加到 window，则无需等待任何元素来附加处理程序，因此您可能不需要使用上述任何方法。