javascript - 影响某些元素的 jQuery 函数是否必须存在于代码中的元素之后？

Question

我遇到了一个问题，我的 jQuery 函数只有在它们存在于页面的最底部，在结束 body 和 html 标记之前才能正常工作。这个影响某些元素的功能的标准是否必须在这些元素之后？

Answer 1

是的，否则元素还没有在 DOM 中。

常见的解决方案是通过 DOM 就绪事件执行您的代码：

$(document).ready(function() {
    // your code
});

它还有一个快捷语法（虽然不太清楚，但我不会使用它）：

$(function() {
    // your code
});

Answer 2

您需要等待文档加载后才能开始操作 DOM。

$(document).ready(function() { /* ... */ });

或者更简洁地说：

$(function() { /* ... */ });

Answer 3

实际上，如果你的函数依赖于被加载元素的样式和属性，你将不得不使用

window.onload = function () { /* actions to do after page elements loaded */ };

例如，HTML5 画布就是这种情况——画布和其中的 svg 元素（连同它们的属性）必须先加载，然后 javascript 才能对其进行操作。

在 jQuery 中，

$(document).load(function() { /* actions to do after page elements loaded */ });

也应该这样做。

当然，如果您的 javascript 只需要准备好 DOM（并且不依赖于要加载的页面元素的属性），那么您可以只使用

$(function() { /* actions to do after DOM is ready */ });