GVKun编程网logo

jQuery - $(document).ready 和 $(window).load 有什么区别?(window.onload和jquery.ready的区别)

13

如果您对jQuery-$(document).ready和$(window).load有什么区别?感兴趣,那么本文将是一篇不错的选择,我们将为您详在本文中,您将会了解到关于jQuery-$(docum

如果您对jQuery - $(document).ready 和 $(window).load 有什么区别?感兴趣,那么本文将是一篇不错的选择,我们将为您详在本文中,您将会了解到关于jQuery - $(document).ready 和 $(window).load 有什么区别?的详细内容,我们还将为您解答window.onload和jquery.ready的区别的相关问题,并且为您提供关于 $(document).ready () 与 window.onload 的区别、$(document).ready();和$(window).load();的区别、$(document).ready()与$(window).load()的区别、$(window).load() 和 $(document).ready() 函数之间的区别的有价值信息。

本文目录一览:

jQuery - $(document).ready 和 $(window).load 有什么区别?(window.onload和jquery.ready的区别)

jQuery - $(document).ready 和 $(window).load 有什么区别?(window.onload和jquery.ready的区别)

之间有什么区别

$(document).ready(function(){ //my code here});

$(window).load(function(){  //my code here});

我想确保:

$(document).ready(function(){})

$(function(){});

jQuery(document).ready(function(){});

是相同的。

你能告诉我它们之间有什么不同和相似之处吗?

答案1

小编典典
$(document).ready(function() {  // executes when HTML-Document is loaded and DOM is ready  console.log("document is ready");});$(window).load(function() {  // executes when complete page is fully loaded, including all frames, objects and images  console.log("window is loaded");});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

查询 3.0 版本

[重大更改:删除了 .load()、.unload() 和 .error()](https://jquery.com/upgrade-

guide/3.0/#breaking-change-load-unload-and-error-removed)

这些方法是事件操作的快捷方式,但有一些 API 限制。事件.load()方法与 ajax.load() 方法冲突。 由于 DOM
方法的定义方式,该.error()方法无法使用。window.onerror如果您需要通过这些名称附加事件,请使用该.on()方法,例如更改
$("img").load(fn)$(img).on("load", fn). 1

$(window).load(function() {});

应改为

$(window).on(''load'', function (e) {})

这些都是等价的:

$(function(){});jQuery(document).ready(function(){});$(document).ready(function(){});$(document).on(''ready'', function(){})

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

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

Jquery 中 $(document).ready () 的作用类似于传统 JavaScript 中的 window.onload 方法,不过与 window.onload 方法还是有区别的。

 

1. 执行时间 

 

        window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。 

        $(document).ready () 是 DOM 结构绘制完毕后就执行,不必等到加载完毕。 

 

2. 编写个数不同 

 

         window.onload 不能同时编写多个,如果有多个 window.onload 方法,只会执行一个 

         $(document).ready () 可以同时编写多个,并且都可以得到执行 

 

3. 简化写法 

 

         window.onload 没有简化写法 

         $(document).ready (function (){}) 可以简写成 $(function (){});


$(document).ready();和$(window).load();的区别

$(document).ready();和$(window).load();的区别

1.执行时间不同:

从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来 了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是 dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是 有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。

2.可以被执行的次数不同:

$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行; 而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一 个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;

<script>    
    $(document).ready(function(){    
        alert("test1");//这段代码会被执行    
    });    
    $(document).ready(function(){    
        alert("test2");//这段代码会被执行    
    });    
    $(window).load(function(){    
        alert("test1");//这段代码不会被执行    
    });    
    $(window).load(function(){    
        alert("test2");//这段代码将被执行    
    });    
</script>

3.执行的效率不同:
如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比 用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下 载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

<script>
    $(document).ready(function(){    
        $(".the_body a").attr("onclick","alert(''test'')");    
    });    
    $(window).load(function(){    
        $(".close_btn").click(function(){    
            $("#app_down").hide();    
        });    
    });    
</script>

 

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

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

       首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象。

1.执行时间不同:

从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。ready事件可以同时注册多个,执行时,按照注册的先后顺序执行。注意,就算是注册不同元素的ready事件,也是按照先后顺序执行。

2.可以被执行的次数不同:

$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;

<script>
$(document).ready(function(){
  alert("document1");//这段代码会被执行
});
$(document).ready(function(){
  alert("document2");//这段代码会被执行
});
$(window).load(function(){
  alert("window1");//这段代码不会被执行
});
$(window).load(function(){
  alert("window2");//这段代码将被执行
});
</script>


3.执行的效率不同:
如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

<script>
$(document).ready(function(){
  $(".add_btn").attr("onclick","alert(''add...'')");
});
$(window).load(function(){
  $(".close_btn").click(function(){
    $("#app_down").hide();
  });
});
</script>

$(window).load() 和 $(document).ready() 函数之间的区别

$(window).load() 和 $(document).ready() 函数之间的区别

$(window).load(function() {})jQuery和jQuery有什么区别$(document).ready(function() {})

我们今天的关于jQuery - $(document).ready 和 $(window).load 有什么区别?window.onload和jquery.ready的区别的分享已经告一段落,感谢您的关注,如果您想了解更多关于 $(document).ready () 与 window.onload 的区别、$(document).ready();和$(window).load();的区别、$(document).ready()与$(window).load()的区别、$(window).load() 和 $(document).ready() 函数之间的区别的相关信息,请在本站查询。

本文标签: