javascript中的window.onload() 和 jquery中的 $(document).ready()

最新推荐文章于 2022-07-29 22:36:42 发布

躬匠

最新推荐文章于 2022-07-29 22:36:42 发布

阅读量889

点赞数

分类专栏： JavaScript JQuery 文章标签： window.onload document.ready

本文链接：https://blog.csdn.net/ydm19891101/article/details/42674753

版权

JQuery 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

1、加载DOM (javascript中的window.onload() 和 jQuery中的 $(document).ready())

window.onload()方法是在网页中的所有元素（包含元素的所有关联文件）完全加载到浏览器后才执行

Jquery的$(document).ready()) 方法注册的时间处理程序，在所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西还没有加载完(图片)

如果一个网站有很多图片，那么用window.onload() 加载就要等图片都下载好后才可以执行操作，而用$(document).ready())则是DOM加载完就会执。

    <script type="text/javascript">
        $("document").ready(function () {
            alert("Thank You!");
        });       
    </script>

在<body></body>标签中添加了一个<image>标签，测试效果如下，页面首次加载不显示图片，说明此时通过已经加载了DOM树结构，而图片并未显示出来，图片只会在单击了确定按钮以后才会出来。 $(document).ready())要比window.onload()执行效率高一些。

2、多次使用

使用window.onload()加载

<span style="font-size:14px;"> <script type="text/javascript">
        window.onload = function () {
            alert("This is The first!");
        }
   window.onload = function () {
      alert("This is my second!");
    }
    </script></span>

加载页面只会显示：This is my second! 所以在一个页面中只可以写一个onload()方法，否则除最后一个之外，之前的所有都会被覆盖，只会执行最后一个。

使用$(document.ready())加载

<span style="font-size:14px;"><script type="text/javascript">
    document.ready(function () {
    alert("This is the first!")
    })
    </script>
    <script type="text/javascript">
    document.ready(function () {
    alert("This is the second!")
    })
    </script></span>

加载页面会显示：This is the first!This is my second! 所以在一个页面中可以写多个$(document.ready())方法

3、简写

window.onload()不存在简写的形式，$(document.ready())可以简写为$(function(){})

躬匠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中的window.onload() 和 jquery中的 $(document).ready()

1 加载DOM (javascript中的window.onload() 和 jquery中的 $(document).ready())Window.onload（）方法是在网页中的所有元素（包含元素的所有关联文件）完全加载到浏览器后才执行Jquery的$(document).ready()) 方法注册的时间处理程序，在dom完全就绪就可以被调用如果一个网站有很多图片，那么
复制链接

扫一扫