使用jQuery/Javascript的DOM事件仅在$（）.ready或window.onload上工作

我的jQuery代码在单击按钮时向元素添加一个类。仅当我将代码传递给

$（document）.ready（）

时，代码才起作用。Javascript也是如此，只有在使用

window.onload

时，代码才能正常工作。这种行为的原因是什么？My.js文件位于HTML的“head”部分，在浏览器呈现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');
    }
}

---

在文档准备就绪之前，无法安全地操作HTML页面。甚至在编写

之前，您就已经在文档开头的

中添加了

js

标记。因此，如果您正在操作

内容中的某些内容，那么它在执行时不存在。现在，

$（document）.ready（function（）{}

下的内容在整个HTML文档准备就绪且文档中存在所有元素时执行。因此，当您使用时：

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

---

它将在文档中加载id

#switcher large

的按钮之前执行

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

窗口。在构建DOM并加载所有资源（例如：图像）后会触发onload，现在所有元素都可用，脚本将正常工作

有关更多信息，请阅读本页
这是因为您的html尚未呈现。
想象一下，浏览器逐行读取您的页面并执行您要求它执行的任何操作，因此，如果您告诉它在处理元素之前获取元素，它将无法执行

此外，在onload事件中，您还可以将脚本放在元素之后（为了更好地理解事情是如何工作的，您使用onload的方式即使不是更好，也是非常好的）：

你好！
🔎；
var docId=document.getElementById（'switcher-large'）；
docId.onclick=函数（）{
var content=document.getElementById（'content'）.classList.add（'large'）；
};
这是因为您的脚本是在页面其余部分完全加载之前执行的，因此它找不到元素并失败。如果您在浏览器的devtools中打开console，您应该会看到错误。
$（document）。ready
将延迟脚本的执行，直到DOM完全加载，以便在此时找到元素。
<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>