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

最新推荐文章于 2023-12-07 21:59:32 发布

香柠檬YU

最新推荐文章于 2023-12-07 21:59:32 发布

阅读量829

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript 函数

本文链接：https://blog.csdn.net/sinat_36841379/article/details/53376518

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

jQuery提供了ready()方法，用来代替javascript核心的window.onload，事件通常与DOM的文档对象绑定。而ready()方法的参数是一个函数，后者包含在DOM可以遍历和操纵时执行的Javascript代码。但是只有在JavaScript必须嵌入到页面顶端的文档流并封装在<head>元素里时才有必要。如果我们将所有的JavaScript文件包含和内联代码防止<body>结束元素之前，就可以避免使用ready()事件了。以下的一个自然段是引用jQuery Cookbook中的一段话：

首先，现代优化技术已经断言，当javascript放在页面解析的最后由浏览器加载时，页面的加载就会变得很快。换句话说，如果你将javascript放在网页的最后，浏览器将先加载之前的所有内容，然后才加载javascript，这是一件好事，因为大部分浏览器通常会暂停其他的加载活动，等待javascript引擎编译网页中包含的javascript。从某种程度上说，将javascript放在网页文档的开头形成瓶颈。

在jQuery中，通常是有两种写法：$(function(){})和$(document).ready(function(){})两种的写法，前者是$(document).ready(function(){})的简写，所以两种的写法达到的效果是一样的，都是指的是DOM文档树加载完毕之后执行的，不必等到加载完毕。所以，$(document).ready(function(){})与window.onload的不同第一点就是他们各自执行的时间不同。

1.执行时间

window.onload必须等到所有的资源的整个文档加载完全之后才能出发onload事件，否则将会无法获得对象元素。

而$(document).ready(function(){})只要是DOM结构加载完毕即可（页面的所有元素），不需要等到所有东西都加载完毕。



<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
.p1{
  width:100px;
  height:100px;
  border:2px solid black;
}
</script>
<script type="text/javascript">
window.οnlοad=function(){document.getElementById("p1").style.backgroundColor="yellow" ;}
</script>



This is my DOM 1.
This is my DOM 2.
This is my DOM 3.
This is my DOM 4.

javascript脚本是按顺序来执行代码的，但是在上述的例子中，并没有实现css样式中的效果，当执行到document.getElementById("p1").style.backgroundColor="yellow"的时候，还没有加载到id为p1的元素，正因为这样而找不到元素对象，导致无法实现css样式中的效果。

但是当我们给这一段代码加上window.onload之后，就是相当于等所有的文档资源加载之后才触发onload事件，此时就可以找到我们想要找的元素了。或者可以把这一段代码放置在<body>结束元素之前，就可以避免使用window.onload。



<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
.p1{
  width:100px;
  height:100px;
  border:2px solid black;
}
</script>
<script type="text/javascript">
document.getElementById("p1").style.backgroundColor="yellow" ;
</script>



This is my DOM 1.
This is my DOM 2.
This is my DOM 3.
This is my DOM 4.

这个时候就会发现我们设置的css样式有效了。

2.编写的个数不同

window.onload不能同时编写多个，如果有多个window.onlaod方法的话，只能自动执行最后一个，前面的window.onload都会被覆盖的。

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
.p1{
  width:100px;
  height:100px;
  border:2px solid black;
}
</script>
<script type="text/javascript">
window.οnlοad=function(){document.getElementById("p1").style.backgroundColor="yellow" ;}
window.οnlοad=function(){document.getElementById("p1").style.color="blue" ;}
</script>

运行的结果如下：

但是$(document).ready(function(){})就可以同时编写多个，并且都可以得到执行。由于jQuery是为了处理HTML事件而特别设计的，所以我们应该把所有的事件处理都置于文档就绪函数中。可以极大地提高WEB应用程序的速度。

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $(".p1").click(function(){
    $(this).hide();
  });
  $(".p2").click(function(){
    $(this).css("background-Color","red");
});
});
</script>