我是否必須使用為 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，則無需等待任何元素來附加處理程序，因此您可能不需要使用上述任何方法。