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

2020/10/31 14:22 · jquery ·  · 0评论

之间有什么区别

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

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

我想确保:

$(document).ready(function(){

}) 

$(function(){

}); 

jQuery(document).ready(function(){

});

是相同的。

你能告诉我它们之间有什么异同吗?

$(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()已删除

这些方法是事件操作的快捷方式,但是有一些API限制。事件.load()方法与ajax.load()
方法
冲突
.error()方法无法被使用window.onerror
的,因为被定义了DOM方法的方式。
如果您需要使用这些名称附加事件,请使用
.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是一个jQuery事件,它在DOM准备就绪时运行,例如,可以找到/使用所有元素,但不一定是所有内容。
window.onload加载图像等后,稍后触发(或在最坏/失败的情况下同时触发)。因此,例如,如果您使用图像尺寸,则通常要使用它。

还请阅读一个相关的问题:
$(window).load()和$(document).ready()函数之间的区别

来自jQuery API文档

虽然JavaScript提供了load呈现页面时执行代码的事件,但只有完全接收到所有资产(例如图像)后,才会触发此事件。在大多数情况下,可以在完全构建DOM层次结构后立即运行脚本。.ready()确保将传递给处理程序的处理程序在DOM准备就绪后执行,因此通常这是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖CSS样式属性值的脚本时,在引用脚本之前,请先引用外部样式表或嵌入样式元素,这一点很重要。

如果代码依赖于加载的资产(例如,如果需要图像的尺寸),则应将代码放置在load事件的处理程序中


回答第二个问题-

不,只要您在无冲突模式下不使用jQuery,它们是相同的。

这三个功能是相同的。

$(document).ready(function(){

}) 

$(function(){

}); 

jQuery(document).ready(function(){

});

这里$被用于定义jQuery$= jQuery

现在的区别是

$(document).ready是在DOM加载时触发的jQuery事件,因此在文档结构准备就绪时触发。

$(window).load 加载整个内容后触发事件,例如页面包含图像,css等。

$(document).ready()$(window).load()函数之间的区别是,$(window).load()一旦加载了整个页面(图像,iframe,样式表等),其中包含的代码就会运行,而在加载所有图像,iframe等之前,但在整个DOM本身之后,将触发文档就绪事件准备好了。


$(document).ready(function(){

}) 

$(function(){

});

jQuery(document).ready(function(){

});

以上三个代码之间没有区别。

它们是等效的,但是如果任何其他JavaScript框架使用相同的美元符号$作为快捷方式名称,则可能会遇到冲突

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

在将唯一的html页面加载到浏览器并执行功能时,总是执行ready事件。但是,在将所有页面内容加载到该页面的浏览器时,都会执行load事件。 ..当我们在jquery脚本中使用noconflict()方法时,我们可以使用$或jQuery ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

$(窗口).load是一个事件,当DOM和页面上的所有内容(所有内容)(如CSS,图像和框架)完全加载时将触发此事件。最好的例子是,如果我们想获取实际的图像尺寸或获取我们使用它的任何东西的细节。

$(document).ready()表示,一旦DOM被加载并准备好被脚本处理,就需要执行其中的代码。它不会等待图像加载以执行jQuery脚本。

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).load在$(document).ready()之后触发。

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

上面的3相同,$是jQuery的别名,如果其他JavaScript框架使用相同的美元符号$,则可能会遇到冲突。如果您遇到冲突,jQuery团队会提供无冲突的解决方案,以了解更多信息。

$(window).load在1.8中已弃用,并在jquery 3.0中删除

本文地址:http://jquery.askforanswer.com/jquery-document-readyhewindow-loadyoushenmequbie.html
文章标签:
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!