jQuery中$(document).ready()函数的理解

最新推荐文章于 2024-05-13 15:29:24 发布

乞屹

最新推荐文章于 2024-05-13 15:29:24 发布

阅读量9.7k

点赞数 4

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42940821/article/details/88345033

版权

7 篇文章 0 订阅

订阅专栏

$(d o c u m e n t) . r e a d y () 方法是事件模块中最重要的一个函数，可以极大的提高 W e b 应用程序的响应速度， j Q u e r y 就是用$ (document).ready()方法来代替传统的JS的window.onload方法的

下面利用对比的方式，可以加深对$(document).ready()的理解

1.执行时机
JS（window.onload）：网页中所有的元素（包括元素的所有关联文件）完全加载后才运行。

jQuery($(document).ready())：DOM加载完毕后即可被调用，这不意味这关联文件已经加载完毕（如图片）

JS的代码如下：

window.onload = function(){
    //编写代码
}
jQuery的代码如下：

$(document).ready(function(){
   //编写代码
})

注意：在使用$(document).ready()的过程中，可能会出现已经将HTML解析为DOM树了，可是图片等相关文件还没有加载完毕，解决这个问题，可以使用jQuery的load()方法：代码如下所示:

$(window).load(function(){
  //编写代码
})

2.多次使用问题
JS（window.onload）：每一个onload只能保存对一个函数的引用，它会自动用后面的函数去覆盖前面的函数

jQuery($(document).ready())：函数会按照注册（绑定）的顺序一次执行

3.简写方式$(document).ready(function(){})

   1）$(function(){ 

        //编写代码

        })

   2）$().ready(function(){

        //编写代码

       })

关注