`

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

 
阅读更多

在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。$(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

window.onload与$(document).ready() 存在如下区别:

  window.onload $(document).ready(function(){...}) $(window).load(function(){...})
执行时间 必须等到页面内包括图片的所有元素加载完毕后才能执行 DOM结构绘制完毕后就执行,不必等到加载完毕 在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行
编写个数

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

window.onload = function(){
  alert(“text1”);
};
window.onload = function(){
  alert(“text2”);
};

可以同时编写多个,并且都可以得到执行

 

以下两个方法都能执行:
$(document).ready(function(){ alert(“Hello World”); });
$(document).ready(function(){ alert(“Hello again”); });

可以同时编写多个,并且都可以得到执行

以下两个方法都能执行:

 $(window).load(function() {

alert("hello,我是jQuery!");

  });

 $(window).load(function() {

alert("hello,我也是jQuery");

 });

 

简写 $(function(){});  
      等价于Window.onload = function (){
     // 编写代码
}

 

在所有DOM元素加载之前执行的jQuery代码:

 

<script type="text/javascript">

(function() {

            alert("DOM还没加载哦!");

        })(jQuery)

  </script>

 

参考:http://www.jb51.net/article/21628.htm

分享到:
评论

相关推荐

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

    **第五种:jQuery的`$(document).ready()`与`window.onload()`的区别** - `$(document).ready()`在DOM元素加载完毕后立即执行,不需要等待所有资源(如图片、CSS等)加载完成。 - 相比之下,`window.onload()`需要...

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

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

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

    在描述中提到,$(document).ready()仅执行一次,并且它和JavaScript的onload事件有着本质的区别。$(document).ready()只关注DOM元素是否已加载,而不是整个页面所有资源都加载完毕。这个方法非常适合用来初始化页面...

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

    与window.onload的区别 $(document).ready()不同于window.onload。window.onload是在整个页面(包括所有的依赖资源如图片、样式表等)加载完成后才会执行。它更适合用于执行依赖于外部资源完全加载的任务,例如计算...

    $(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下关于$.Ready()的分析

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

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

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

    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的各种功能和用法。通过...

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

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

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

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

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

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

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

    它的作用与window.onload相似,但只针对DOM树的加载进行监听,而不必等待图片、样式表等其他资源加载完成。使用$(document).ready()方法的示例如下: ```javascript $(document).ready(function() { alert("我的第...

    解决chrome对jQuery的支持问题

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

    $(document)

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

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

    在JavaScript和jQuery的世界里,`window.onload` 和 `$(document).ready()` 都是用来确保页面内容加载后执行特定脚本的事件,但它们之间存在一些关键的区别。理解这些差异对于编写高效、响应式的网页至关重要。 ...

    jquery教程chm格式

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

Global site tag (gtag.js) - Google Analytics