DOMContentLoaded 事件与 jQuery 的 .ready() 函数完全相同吗

Ajax

DOMContentLoaded 事件与 jQuery 的 .ready() 函数在某些方面是相似的，但在其他方面又有一些区别。在这篇文章中，我们将探讨这两者之间的关系，并提供一些案例代码来说明它们的用法和区别。

DOM加载事件DOMContentLoaded

在浏览器加载HTML文档时，它会按照顺序解析文档，并将其转换为DOM（文档对象模型）。当整个DOM树都被构建完成后，浏览器会触发DOMContentLoaded事件。

这个事件表示文档的初始HTML已经被完全加载和解析，而不需要等待样式表、图像和子框架的加载完成。换句话说，当DOM树构建完成，可以对DOM进行操作时，DOMContentLoaded事件将被触发。

jQuery的.ready()函数

与DOMContentLoaded事件类似，jQuery提供了一个.ready()函数，用于在文档加载完成后执行一些操作。这个函数可以确保在DOM树构建完成后再执行相关的代码。

.ready()函数有多种用法，最常见的是使用回调函数来执行一些初始化操作。回调函数将在整个文档加载完成后被调用，而不需要等待其他资源的加载。

与DOMContentLoaded事件不同的是，.ready()函数不仅在DOM树构建完成后被触发，还在其他资源加载完成之前执行。这意味着在.ready()函数中，可以执行与DOM操作以外的操作，比如加载外部资源或执行Ajax请求。

两者之间的区别

尽管DOMContentLoaded事件和.ready()函数在某些方面是相似的，但它们在某些方面也有一些区别。

一个主要的区别是.ready()函数是jQuery库提供的，而DOMContentLoaded事件是浏览器原生支持的事件。这意味着在没有引入jQuery库的情况下，我们仍然可以使用DOMContentLoaded事件来执行一些初始化操作。

另一个区别是.ready()函数可以用于多个元素，而DOMContentLoaded事件只能用于整个文档。这意味着如果我们只需要在某个特定的元素加载完成后执行代码，可以使用.ready()函数来实现。

案例代码

下面是一个简单的案例代码，演示了如何使用DOMContentLoaded事件和.ready()函数来执行一些初始化操作。

html
<!DOCTYPE html>
<html>
<head>
  <title>DOM加载事件与jQuery的.ready()函数</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
<h1>DOM加载事件与jQuery的.ready()函数</h1>
<div id="content">
  
这是一个段落。
</div>
<script>
  // 使用DOMContentLoaded事件
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM已加载完成");
    // 执行一些初始化操作
    var paragraph = document.querySelector("#content p");
    paragraph.innerHTML = "这是DOMContentLoaded事件触发后修改的内容。";
  });
  // 使用.ready()函数
  $(document).ready(function() {
    console.log("jQuery.ready()已触发");
    // 执行一些初始化操作
    $("#content p").html("这是.ready()函数触发后修改的内容。");
  });
</script>
</body>
</html>

在上面的代码中，我们使用DOMContentLoaded事件和.ready()函数来修改ID为content的元素中的段落内容。当DOM加载完成后，这两个事件将触发，并执行相应的操作。可以在浏览器的开发者工具控制台中查看输出结果。

在本文中，我们讨论了DOMContentLoaded事件和.ready()函数之间的关系和区别。尽管它们在某些方面是相似的，但也有一些区别。DOMContentLoaded事件是浏览器原生支持的，而.ready()函数是jQuery库提供的。此外，.ready()函数可以用于多个元素，而DOMContentLoaded事件只能用于整个文档。无论使用哪种方法，我们都可以在页面加载完成后执行一些初始化操作。