`
huchangan2005
  • 浏览: 77737 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery $(document).ready()方法和window.onload方法的区别

阅读更多
jquery $(document).ready()方法和window.onload方法的区别:
他们的主要的区别有两点:

1、执行时机
window.onload方法是在网页中的所有的元素(包括元素的所有关联文件)都完全加载到浏览器之后才执行。而通过jQuery中的$(document).ready()方法注册的事件处理程序,只要在DOM完全就绪时,就可以调用了,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等。

2、$(document).ready()方法可以多次使用而注册不同的事件处理程序,而window.onload一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。
先来看window.onload方法在一个页面上注册两次会是什么样的结果:
function one(){
alert("one");
}
function two(){
alert("two");
}
window.onload = two ;
window.onload = one ;
上面的代码运行后,会弹出“one”。


再来看看$(document).ready()方法分两次调用会是什么结果。

function one(){
alert("one");
}
function two(){
alert("two");
}
$(document).ready(function(){
one();
});
$(document).ready(function(){
two();
});
上面的代码运行后,会分别弹出“one”和“two”。
分享到:
评论

相关推荐

    jQuery(document).ready(function($) { });的几种表示方法

    总结来说,`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式,而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别,可以帮助开发者更有效地...

    jquery的$(document).ready()和onload的加载顺序

    在JavaScript和jQuery的世界里,了解`$(document).ready()`和`window.onload`的加载顺序是非常重要的,尤其是在处理页面加载和交互效果时。这两个事件都与页面加载有关,但它们触发的时机有所不同,这也可能导致在...

    jQuery之$(document).ready()使用介绍

    在学习jQuery框架时,了解$(document).ready()函数的作用至关重要。这一函数是管理页面加载顺序和时机的核心部分,它确保了页面的DOM元素完全加载并可被脚本操作之后,才执行包裹在其中的代码。 ### 知识点:jQuery...

    全面解析jQuery $(document).ready()和JavaScript onload事件

    这两个阶段分别对应了jQuery中的$(document).ready()方法和JavaScript的onload事件。 $(document).ready()是jQuery提供的一个方法,它允许我们在DOM结构完全加载并且解析后立即执行代码。在描述中提到,$(document)...

    $(document).ready(function() {})不执行初始化脚本

    3. 如果可能,尝试将`$(document).ready()`中的代码移至`window.onload`事件中,看看是否能正常执行,以确定问题是否与DOM加载有关。 4. 如果有多个库在使用`$`,考虑使用`jQuery.noConflict()`来避免冲突。 通过...

    浅析document.ready和[removed]的区别讲解

    本文将深入探讨`document.ready`和`window.onload`这两个事件的区别。 `document.ready`是jQuery库提供的一种方法,它的全称是`$(document).ready()`,它的主要作用是在DOM结构构建完成,但图像或其他资源可能尚未...

    jquery $(document).ready()和[removed]的区别浅析

    两者的用法在很多情况下非常相似,但它们之间也存在一些关键的区别,以下就是$(document).ready()和window.onload的区别浅析。 1. 执行时间上的区别 $(document).ready()方法仅需要DOM元素全部加载完成即可执行,这...

    JQuery下关于$.Ready()的分析

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...

    jquery $(document).ready() 与[removed]的区别

    传统的JavaScript通过window.onload方法来实现此功能,而在jQuery中,则主要使用$(document).ready()方法。虽然这两个方法在功能上相似,都是确保在页面的HTML元素完全加载完毕后执行特定的JavaScript代码,但它们...

    JavaScript类库_JQuery1.8离线Api手册全中文版.zip

    开发者应尽量使用`$(document).ready()`而不是`window.onload`来尽早执行代码,以提高页面加载速度。 **总结** jQuery 1.8 API中文离线手册是开发者不可或缺的参考资料,它详细阐述了jQuery的各种功能和用法。通过...

    jquery中的$(document).ready()使用小结

    而$(document).ready()方法是jQuery中非常重要的一个函数,它提供了一种机制来确保文档完全加载后再执行某些脚本,这对于防止在DOM元素完全就绪之前运行脚本导致的错误至关重要。 首先,我们来解释一下传统...

    my97 datepicker的'$db.cal'为空或不是对象问题解决参考

    2. **加载顺序问题**:my97 datepicker需要在DOM加载完成后才能初始化,因此它的脚本应该放在`&lt;body&gt;`标签的底部,或者使用`window.onload`或`$(document).ready`来确保在调用插件之前页面元素已经完全加载。...

    解决chrome对jQuery的支持问题

    2. **使用jQuery的`$.load()`**:除了`$(document).ready()`,jQuery还提供了`$(window).load()`,它的行为类似于原生的`window.onload`,等待所有资源加载后再执行。 3. **使用`DOMContentLoaded`事件**:这是原生...

    JQ中$(window).load和$(document).ready区别与执行顺序

    在JavaScript和jQuery中,`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数,它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...

    JQuery-- onload,ready方法详细解说

    JQuery onload、ready 方法详细解说 ...JQuery 的 onload 和 ready 方法都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。在实际开发中,我们需要根据实际情况选择使用哪种事件,并注意其优点和缺点。

    jquery教程chm格式

    17. 性能优化:使用$(document).ready()而非window.onload来尽早执行脚本,避免使用$符作为选择器前缀以提高性能。 综上所述,《jQuery教程CHM格式》涵盖了jQuery的各个方面,无论是初学者还是经验丰富的开发者,都...

    用javascript实现jquery的document.ready功能的实现代码

    在使用jQuery时,我们通常使用`$(document).ready()`方法来确保在文档完全加载到浏览器后执行代码。这是一个非常有用的功能,因为它允许开发者确保在操作DOM元素之前,这些元素已经完全可用。 然而,了解如何用纯...

    $(document)

    `$(document).ready(function(){ })` 与 `window.onload` 都可以用来等待页面加载完成后再执行特定的脚本,但它们之间存在明显的区别: - **`$(document).ready(function(){ })`**:仅在DOM加载完成后立即执行,...

Global site tag (gtag.js) - Google Analytics