学习JQuery的$.Ready()与OnLoad事件比较

$(document).Ready()方法 VS OnLoad事件 VS
$(window).load()方法
接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
1.加载多个函数的问题
<body
>
</body>
在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行

2.代码和内容不分离
 
这个貌似不用说了,让人深恶痛绝-.-!!

3.执行先后顺序不同
 
对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.
 
而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
 
但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.
  <script
type="text/javascript">
       
$(window).load(function() {
           
alert("hello");
       
});
       
$(window).load(function() {
           
alert("hello again");
       
});
   
</script>
 
上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
  当然不要忘了与之对应的Unload方法
$(window).unload(function()
{
           
alert("good bye");
       
});
上面代码会在页面关闭时引发.
在所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的,有时候开发的时候也用这种方法
<body>
   
<script type="text/javascript">
       
(function() {
           
alert("hi");
       
})(jQuery)
   
</script>
</body>
对,就是利用js闭包的形式将js代码嵌入body,这段代码会自动执行,当然也可以直接嵌入js代码,这种方式要注意顺序问题,如下:
<body>
<div
id="test">this is the content</div>
   
<script type="text/javascript">

alert($("#test").html());//I Can display the content
        
   
</script>
</body>
<body>
   <script
type="text/javascript">

alert($("#test").html());//I
Can‘t display the content
        
   
</script>
    <div id="test">this is
the content</div>
</body>
上面两段代码,第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示

时间: 2024-08-28 12:00:58

学习JQuery的$.Ready()与OnLoad事件比较的相关文章

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

javascript jquery document.ready window.onload

网易 博客 下载LOFTER客户端 注册登录 加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我 日志 关于我 Holyson 闻道有先后,术业有专攻 加博友   关注他 文章分类 ·css(2) ·.net控件事件(3) ·帐号密码(0) ·JS与JQ(12) ·sql server指南(5) ·杂谈(2) ·C#基础指南(18) ·.net成长篇(38) ·更多 > LOFTER精选 注册免费冲印20张照片 > 网易新闻 清华毕业学

jQuery中ready与load事件的区别

目录: 1ready与load谁先执行 2DOM文档加载的步骤 3ready事件 4load事件 5总结 概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...code... }) //document ready 简写 $(function(){     ...code... }) 有些时候也会这么写: 1 2 3 4 //document lo

jQuery中ready与load事件

jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... }) 一个是ready一个是load,这两个到底有什么区别呢? ready与load谁先执行:大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答

jQuery $(document).ready()和JavaScript onload事件

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = fu

jquery学习笔记一之window.onload与$(document).ready()区别

1.window.onload与$(document).ready()区别 执行时机:前者必须等待网页中所有的内容加载完毕后(包括图片)才能执行,后者 网页中说有的Dom结构绘制完毕后就执行,可能Dom元素关联的内容并没有加载完成. <!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="js/j

jQuery学习之路(3)- 事件

▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onlo

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

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(d

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

引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同