Question

我的jQuery代码在按钮点击时为元素添加了一个类。该代码仅在我将其传递给$（document）.ready（）时才有效。同样适用于Javascript，只有在我使用window.onload时代码才能正常工作。这种行为的原因是什么？我的.js文件位于＆＃39; head＆＃39; HTML部分，在浏览器呈现HTML页面时已经阅读过。

$('#switcher-large').on('click', function(){
   $('#content').addClass('large');
});

var docId = document.getElementById('switcher-large');
docId.onclick = function(){
    var content = document.getElementById('content').classList.add('large');
}

工作代码：

$(document).ready(function(){
    $('#switcher-large').on('click', function(){
        $('#content').addClass('large');
    });
});

window.onload = function(){
    var docId = document.getElementById('switcher-large');
    docId.onclick = function(){
        var content = document.getElementById('content').classList.add('large');
    }
}

Answer 1

在文档为ready之前，无法安全地操作HTML页面。您已经在文档的开头添加了js标记，甚至在<head>写入<body>之前。因此，如果您正在操作<body>内容中的某些内容，则在执行时它不存在。现在，$(document).ready(function(){}下的内容在整个HTML文档准备好并且文档中存在所有元素时执行。所以当你使用::

时

$('#switcher-large').on('click', function(){
   $('#content').addClass('large');
});

它将执行before您在文档中加载了ID为#switcher-large的按钮。

Answer 2

您需要了解文档生命周期才能理解此行为。浏览器将在DOM准备好之前执行所有脚本，因为没有附加事件，因为脚本执行时元素不存在。

在构建DOM并加载所有资源（例如：图像）之后触发

window.onload ，现在所有元素都可用，脚本将正常工作。

有关详细信息，请阅读此页面 https://javascript.info/onload-ondomcontentloaded#domcontentloaded

Answer 3

这是因为你的html还没有呈现。想想浏览器逐行读取你的页面并执行你要求它执行的任何内容，所以如果你告诉它在处理元素之前得到一个元素，那么它就无法做到。

此外，在onload事件中，您还可以将脚本放在元素之后（为了更好地理解事物是如何工作的，使用onload的方式，如果不是更好的话，那就完全没问题了）：

<span id="content">Hello StackOverflow!</span>
<button type="button" id="switcher-large">&#x1F50E;</button>
<script>
    var docId = document.getElementById('switcher-large');
    docId.onclick = function(){
        var content = document.getElementById('content').classList.add('large');
    };
</script>

使用jQuery / Javascript的DOM事件仅适用于$（）。ready或window.onload

3 个答案: