JavaScript与jQuery中文档就绪函数的区别

2022-03-20

目录

1、文档就绪函数
2、window.onload 与 $(document).ready()的区别

1、文档就绪函数 JavaScript 的文档就绪函数：

jQuery 中的文档就绪函数：

// 写法1// 写法2

执行以上的代码，我们可以得知，JavaScript 的window.onload=function(){// 执行代码} 和 jQuery 的文档就绪函数 $(document).ready(function(){// 执行函数}) 是等同的运行效果。但是二者也有不同，下面就对其区别与大家分享一下。
【JavaScript与jQuery中文档就绪函数的区别】
2、window.onload 与 $(document).ready()的区别

	window.onload	$(document).ready()
执行时机	必须等网页中所有内容加载完后（包括图片）才能执行	网页中所有DOM结构绘制完后就执行
函数编写个数	不能编写多个，例如： window.onload=function(){}; window.onload=function(){}; 此时第二个覆盖第一个	能同时编写多个，例如： $(document).ready(function(){})； $(document).ready(function(){})；两个函数都执行
简化写法	无	$()

对二者区别的简单说明如下：

（1）在执行时机上，window.onload 表示页面所有内容全部加载完成后执行，$(document).ready() 表示页面所有 DOM 元素加载完成后执行。例如，有一个图片标
文章图片
，JavaScript 的 window.onload 要等 aa.jpg 整个图片加载完后才能执行注册事件中的函数，但是 jQuery 的文档就绪函数要等
文章图片

我们发现，代码执行后，首先弹出bb提示框，并未弹出 aa 提示框，说明 JavaScript 的 window.onload 不能编写多个函数，如果编写多个函数，后写的会覆盖前面的。
现在我们用jQuery编写同样的程序，代码如下：

执行结果如下：

文章图片

根据执行结果可以看到，代码通过使用 jQuery 的文档就绪函数打印了两组数据，程序先打印了第一条数据 aa，接着又打印了第二条数据 bb，说明jQuery的文档就绪函数可以有多个。如果有多个文档就绪函数，那么执行顺序就是从第一条数据开始，逐条进行打印，不会像 window.onload 那样出现覆盖情况。
（3）简化写法属于语法规范。window.onload 没有简写形式；$(document).ready(function(){// 执行代码})的简写形式为$(function(){// 执行代码})，在开发中使用简写形式较多。
到此这篇关于JavaScript与jQuery中文档就绪函数的区别的文章就介绍到这了,更多相关JavaScript与jQuery的文档就绪函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读

上一篇：Keras速查_CPU和GPU的mnist预测训练_模型导出_模型导入再预测_导出onnx并预测

下一篇：使用Redis实现点赞取消点赞的详细代码