欢迎光临
我的个人博客网站

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


1、文档就绪函数

  1. JavaScript 的文档就绪函数
    <script>     window.onload = function() {         alert("欢迎!")     } </script>

  2. 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(){});

两个函数都执行

简化写法 $()

对二者区别的简单说明如下:
(1)在执行时机上,window.onload 表示页面所有内容全部加载完成后执行,$(document).ready() 表示页面所有 DOM 元素加载完成后执行。例如,有一个图片标签<img src=”aa.jpg”/>,JavaScript 的 window.onload 要等 aa.jpg 整个图片加载完后才能执行注册事件中的函数,但是 jQuery 的文档就绪函数要等<img></img>标签对加载完成就可以执行了,也就是只需要解析到此处的页面控件是一个图片标签对即可,不用等图片显示完。
(2)函数编写个数主要体现为是覆盖还是追加。下面通过一个简单实例来对比。

先写一个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中——文档就绪函数的区别JavaScript与jQuery中——文档就绪函数的区别

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript与jQuery中——文档就绪函数的区别
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏