0

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

我的问题是：

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

  2. 如果我必须运行第一个函数来改变约翰的背景，这个函数应该在 DIV 标签之后使用吗？

块引用

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

块引用

在此处输入图像描述

4

2 回答 2

2

浏览器从上到下读取 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 之间的区别，请查看此 stackoverflow 问题

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 ;)

于 2015-04-18T23:16:13.460 回答
1

当通过 Javascript（或 Javascript 库或框架）操作 DOM 时，您必须在尝试操作之前将要操作的 DOM 元素带入存在。

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

于 2015-04-18T22:52:49.913 回答