文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-29 13:43

关注

小编给大家分享一下JavaScript与jQuery中文档就绪函数的区别是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

1、文档就绪函数

JavaScript 的文档就绪函数:

<script>    window.onload = function() {        alert("欢迎!")    }</script>

jQuery 中的文档就绪函数:

// 写法1<script>    $(document).ready(function() {        alert("欢迎!")    })</script>// 写法2<script>    $(function() {        alert("欢迎!")    })</script>

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

2、window.onload 与 $(document).ready()的区别

 window.onload$(document).ready()
执行时机必须等网页中所有内容加载完后(包括图片)才能执行网页中所有DOM结构绘制完后就执行
函数编写个数

不能编写多个,例如:

window.onload=function(){};

window.onload=function(){};

此时第二个覆盖第一个

能同时编写多个,例如:

$(document).ready(function(){});

$(document).ready(function(){});

两个函数都执行

简化写法$()

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

先写一个JavaScript 程序,里面有 window.onload 注册事件,分别打印不同的数据

代码如下:

<script>    window.onload = function() {        alert("aa")    };    window.onload = function() {        alert("bb")    };</script>

执行结果如下:

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

我们发现,代码执行后,首先弹出bb提示框,并未弹出 aa 提示框,说明 JavaScript 的 window.onload 不能编写多个函数,如果编写多个函数,后写的会覆盖前面的。

现在我们用jQuery编写同样的程序,代码如下:

<script>    $(document).ready(function() {        alert("aa")    });    $(document).ready(function() {        alert("bb")    });</script>

执行结果如下:

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

根据执行结果可以看到,代码通过使用 jQuery 的文档就绪函数打印了两组数据,程序先打印了第一条数据 aa,接着又打印了第二条数据 bb,说明jQuery的文档就绪函数可以有多个。如果有多个文档就绪函数,那么执行顺序就是从第一条数据开始,逐条进行打印,不会像 window.onload 那样出现覆盖情况。
(3)简化写法属于语法规范。window.onload 没有简写形式;$(document).ready(function(){// 执行代码})的简写形式为$(function(){// 执行代码}),在开发中使用简写形式较多。

看完了这篇文章,相信你对“JavaScript与jQuery中文档就绪函数的区别是什么”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯