`
黄继华
  • 浏览: 43017 次
  • 性别: 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”。


    分享到:
    评论

    相关推荐

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

      在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。   [removed]() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。 页面中所有HTML DOM,CSS DOM结构...

      onload和jquery运行顺序

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

      初始jQuery

      3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊:包含$符号和连缀操作 6. 每个页面都有对应的DOM模型,DOM模型包括...

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

      常见的方法有使用window.onload和jQuery的(document).ready两种。其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体...

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

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

      jQuery实例教程

      (也许window.onload()能实现同样的功能,但是jQuery更加快速,灵活)。 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web...

      窗口和表单事件.pptx

      1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...

      JQuery Tips相关(1)—-关于$.Ready()

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

      jquery ready函数源代码研究

      一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...

      图库新版jQuery焦点图 JS代码

      document.writeln ('&lt;dd&gt;08月05日 网页背景和小图片添加打包下载&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;07月12日 修复搜索、导航和返回顶部BUG&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;06月26日 改进网页背景频道预览功能&lt;/dd&gt;')...

      jqzoom放大镜插件.zip

      /* * JQZoom Evolution 1.0.1 - Javascript Image magnifier... if($.browser.safari || $.browser.opera) { $(img).css({position:'absolute',top:'0px',left:'0px'}); } /*if(a.css('position')!= 'absolute' &&...

      jQuery快速高效制作网页交互特效

      和onclick 在jQuery中常用的事件有文档就绪事件,对应的方法ready() $(document).ready(fn(){});  b:鼠标事件 常用的鼠标事件有:  click(fn); 单机鼠标时发生,fn表示绑定的函数  keydown(fn); 鼠标指针移...

      一个带验证的jQuery表单,同时支持无刷新编辑

       ,确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件,该方法主要就是设置各个验证项的正则表达式。  通用取值函数分三类进行取值  文本输入框,直接取值el.value  单多选,遍历所有...

      运用jQuery实现的Ajax无刷新删除和添加数据的表单

      ---DOM载入就绪可以查询及操纵时执行该操作|等同window.load,确保在body元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。  用到了一个JS脚本库,主要就是设置各个验证项的正则表达式,基本...

    Global site tag (gtag.js) - Google Analytics