javascript - 通过 JavaScript 执行顺序操作 DOM

Question

我有以下代码，结果附在最后。据我了解，JQuery.ready 和 JQuery.Window 加载事件在创建 DOM 之后运行，因此它可以操作 DOM，但不是第一个更改 John 背景的函数。

我的问题是:

1. John 的背景没有变成黄色是因为 JavaScript 本质上是向后引用的，在脚本运行时无法找到 id name1 的元素？

   <

2. 如果我必须运行第一个函数来更改 John 的背景，该函数是否应该在 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

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

<script>

这会立即执行:(但由于还没有任何东西，所以不会有任何变化)。为了进一步解释，这些被称为立即执行函数 (IEF) ==> (function(){ ... })(); 但在这种情况下拥有它是没有意义的，因为代码将无论如何立即执行。

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

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

    $(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>

这也会立即执行(IEF):在这种情况下它会起作用，但这不是最佳实践。

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

如果您想了解 document.ready 和 window.load 之间的更多差异，请查看 this stackoverflow 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 ;)