工作留档--jquery的$(document).ready(function(){})和原生js里的window.onload区别。

最新推荐文章于 2023-03-31 11:20:54 发布

YANXS1

最新推荐文章于 2023-03-31 11:20:54 发布

阅读量237

点赞数

分类专栏： js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/YANXS1/article/details/113112632

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天开发过程中，遇到了一个以前没有留意的问题。那就是jquery里的$(document).ready(function(){})，以前使用原生js的话，其中的window.onload在一个界面是只能出现一次的，因此我想当然的就把jquery里的$(document).ready(function(){})也只能使用一次（我的同事也是这样理解的），但是在看源码的过程中，有一个界面出现多个ready的情况，那我就很疑惑，有两个ready的话，它们之间的加载顺序是什么样的呢？
有这个疑惑的原因就是，我写的js修改界面下拉框动态加载数据的时候，有时候数据可以显示，有时候数据不能显示。（当然还有另一个原因，下篇博文$.post和$.ajax的区别，来介绍）。
废话不多说，下面是我查询资料及实际解决时候的理解。首先原生js的window.onload和jquery的$(document).ready(function(){})区别之一就是前者在界面中只能使用一次，如果有多次，那么后面的会覆盖前面的，也就是只会执行最后一次。而后者在js中可以使用多次，每一个都是单独的事件函数不存在覆盖问题。
区别之二就是执行时间的问题，前者执行时间是必须等到包括图片在内的等所有页面元素完全加载完毕后才会执行，比较慢；而后者是在DOM对象完成后就立刻执行的，不必等到所有元素加载完毕，比较快；
区别之三前者写法只有这一种，而后者可以简写为$(function(){})；（这些区别在网上随处可见）。
讲完了区别那么又回到最初的起点，多个ready它们的加载顺序是怎么样的呢？是正常的按顺序加载吗？为了了解这个顺序，咱上代码（该代码转载博友的，原因你晓得）：

<html>
<head>
<script src="./jquery-1.9.0.min.js"></script>
<script type="text/javascript">
  $(function(){
    alert('1');
    $(function(){
      alert('2');
      $(function(){
        alert('3');
      });
    });
  });
</script>
<body>
<script type="text/javascript">
  $(document).ready(function() {
    alert('4');
    $(function(){
      alert('5');
    });


  });
</script>
<script type="text/javascript">
  $(function(){
    alert('6');
    $(document).ready(function() {
      alert('7');
    });
  });
</script>
</body>
</html>