在前端开发中,我们经常需要操作文档对象模型(DOM)来实现交互效果和页面渲染。通常情况下,我们可以使用纯 JavaScript 或者 jQuery 来完成这些任务。虽然 jQuery 在许多方面都比纯 JavaScript 更加便利和简单,但是了解它们的等效性可以帮助我们更好地理解 DOM 操作。
等效性对比
在 jQuery 中,大部分 DOM 操作方法都有对应的纯 JavaScript 方法。例如,jQuery 中的 $()
方法可以用纯 JavaScript 的 document.querySelector()
方法替代,.addClass()
方法可以用 .classList.add()
方法替代,.html()
方法可以用 .innerHTML
属性替代等等。
举个例子,我们可以使用以下两种方法来获取一个元素:
// 使用 jQuery 获取元素 let element1 = $('#my-element'); // 使用纯 JavaScript 获取元素 let element2 = document.querySelector('#my-element');
以上两种方式获得的结果是相同的,都是指向 id 为 #my-element
的元素。
除了基本的 DOM 操作外,jQuery 还提供了一些方便的方法,例如事件处理、动画效果、ajax 请求等等。这些方法在纯 JavaScript 中也可以实现,但是需要编写更多的代码。
ready() 方法
在使用 jQuery 或者纯 JavaScript 操作 DOM 时,需要确保页面已经加载完毕,DOM 元素已经准备就绪。在 jQuery 中,可以使用 ready()
方法来实现这一功能。
$(document).ready(function() { // 在 DOM 准备就绪后执行的代码 });
在纯 JavaScript 中,可以使用以下方法来实现相同的功能:
document.addEventListener('DOMContentLoaded', function() { // 在 DOM 准备就绪后执行的代码 });
需要注意的是,在纯 JavaScript 中,DOMContentLoaded
事件无法检测到图片等外部资源是否加载完成。如果需要等待所有资源都加载完成后再执行某些操作,可以使用 load
事件:
window.addEventListener('load', function() { // 在页面和所有资源都加载完毕后执行的代码 });
示例代码
下面是一个简单的示例代码,演示了如何使用 jQuery 和纯 JavaScript 分别实现获取元素并添加 class 的功能,以及如何使用 ready()
方法在 DOM 准备就绪后执行代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- --- ------------------ ------- ----------------------------------------------------------- ------- ---------- - ------ ---- - -------- ------- ------ --- --------------------- ----------- -------- -- -- ------ ------- ----- -------------------------------------- -- --- ---------- ------- ----- --- ------ - ------------------------------------- ---------------------------------- -- - --- --------- ---------------------------- - -------------------- -------- -- --------- --- --------------------------------------------- ---------- - ------------------------ ---------------- ----- --------- --- --------- ------- -------
在浏览器中打开该页面,可以在控制台中看到 jQuery 和纯 JavaScript 分别输出的日志信息。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/7941