`
黄继华
  • 浏览: 45006 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

大多数情况下,jquery代码的编写,都要求我们将jquery的代码放在

$(document).ready(function(){
      ........jquery代码...........
});

上面的代码和

$().ready(function(){
      ........jquery代码...........
});
$(function(){
      ........jquery代码...........
});
$().ready(function(){
      ........jquery代码...........
});
是等同的~~最后一种方式是最简洁的方式,绝大多数情况下我都使用最后一种写法,呵呵~~好记!
注意:有时候我们自己编写的jquery代码出现莫名其妙的问题,看似正常的代码,但是就是在运行的时候出错了,那么请先检查一下你的代码有没有放在$(document).ready()方法中运行。

接下来我们来说说$(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 ;
    再来看看$(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()和[removed]的区别浅析

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

      一张表格告诉你windows.onload()与$(document).ready()的区别

      在JavaScript和jQuery中,`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数,但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...

      实现在HTML页面加载完毕后运行js方法.docx

      `window.onload` 事件和 `$(document).ready()` 方法的主要区别在于执行的时机。`window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的,而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的,虽然...

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

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

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

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

      $(document)

      `$(document).ready(function(){ })` 是jQuery库中的一个非常重要的方法,它的主要作用是在文档(DOM)加载完成后执行指定的函数。这里的 `$(document)` 指的是整个HTML文档对象模型(Document Object Model),而 `...

      onload和jquery运行顺序

      window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })

      js 某个页面监听事件渲染完毕的时间.pdf

      本文将深入探讨如何使用JavaScript来监听页面渲染完成的时间,并对比两种常见方法:`window.onload`和jQuery的`$(document).ready`。 首先,我们来看`window.onload`事件。这个事件会在页面中所有的资源,包括HTML...

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

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

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

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

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

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

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

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

      解决chrome对jQuery的支持问题

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

      jquery 教程 详细解释了jquery的使用方法

      `$(document).ready()`与`window.onload()`的区别在于: a. 执行时机:`window.onload()`等待整个页面包括所有资源(如图片)完全加载后执行,而`$(document).ready()`仅在DOM结构构建完毕时触发,不考虑资源加载...

      jquery教程chm格式

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

      JQ ready()和onload的加载耗时

      `$(document).ready()`与`window.onload`的主要区别在于执行时机。`ready`更早,它允许更快地访问和操作DOM,提高用户体验。而`onload`则确保了所有资源加载完毕,适用于那些依赖所有资源的场景,如图片计数、页面...

    Global site tag (gtag.js) - Google Analytics