JavaScript 执行顺序操纵 DOM

Question

我有以下代码，结果附在最后。我知道 JQuery.ready 和 JQuery.Window 加载事件是运行在 DOM 创建之后，所以它可以操纵 DOM 但不是第一个改变背景的功能约翰.

我的问题是：

John的背景没有变成黄色是因为JavaScript本质上是向后引用，在脚本执行的时候无法定位到id为name1的元素运行?
如果我必须运行第一个函数来改变约翰的背景，这个函数应该在DIV标签之后使用吗？

Blockquote

<script>
    (function () {
        $('#name1').css('background-color', 'yellow');
    })();

    $(function () {
        $('#name2').css('background-color', 'red');
    });

    $(window).load((function () {
        $('#name3').css('background-color', 'blue');
    }));
</script>

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>
    (function () {
        $('#name4').css('background-color', 'yellow');
    })();
</script>

Blockquote

Answer 1

当通过 Javascript（或 Javascript 库或框架）操作 DOM 时，您必须将 DOM 你想操纵它们存在 在你试图操纵它们之前 。

如果你不这样做，那么......根本没有什么可以操纵的。

Answer 2

HTML 由浏览器从上到下读取。所以：

<script>

这会立即执行：（但由于还没有任何内容，因此不会有任何更改）。为了进一步解释，这些被称为立即执行函数 (IEF) ==> (function(){ ... })(); 但在这种情况下拥有它是没有意义的，因为无论如何代码都会立即执行。

    (function () {
        $('#name1').css('background-color', 'yellow');
    })();

这实际上是 jQuery 中用于 $(document).ready(...); 的快捷方式。它被认为不是一个很好的做法，因为它的可读性不佳。

    $(function () {
        $('#name2').css('background-color', 'red');
    });

这个执行 window 负载（不完全相同）。

    $(window).load((function () {
        $('#name3').css('background-color', 'blue');
    }));
</script>

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>

这也会立即执行 (IEF)：在这种情况下它会起作用，但这样做不是最佳做法。

    (function () {
        $('#name4').css('background-color', 'yellow');
    })();
</script>

如果您想了解更多 document.ready 和 window.load 之间的差异，请查看 this Whosebug question

JavaScript 是一种事件驱动的语言，优点是你可以根据需要添加任意数量的事件监听器，所以为 DOM 加载的内容添加事件监听器几乎是——永远是最好的方法。始终在最后加载脚本也是一种最佳做法，这样您可以让用户先获取内容和样式，然后再启动功能。

我会如何编写您的代码：

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // DOM fully loaded and parsed
        $('#name1').css('background-color', 'yellow');
        $('#name2').css('background-color', 'red');
        $('#name3').css('background-color', 'blue');
        $('#name4').css('background-color', 'yellow');
    });
</script>

虽然我不会为此使用 jQuery :P。我什至不会为此使用 JavaScript，只是老 CSS ;)

JavaScript 执行顺序操纵 DOM

Manipulation of DOM by JavaScript execution order

javascript

onready