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


Posted in Javascript onDecember 13, 2009

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

对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:

1.加载多个函数的问题
<body onload="a();b();">
</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数.所以第二段代码无法正确显示.
Javascript 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 #Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 #Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 #Javascript
页面中iframe相互传值传参
Dec 13 #Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 #Javascript
js 加载并解析XML字符串的代码
Dec 13 #Javascript
javascript 强制刷新页面的实现代码
Dec 13 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
在模板页面的js使用办法
2010/04/01 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
jQuery操作css样式
2017/05/15 jQuery
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python笔试面试题小结
2019/09/07 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
数控技术专业毕业自荐书范文
2014/02/05 职场文书
关于读书的活动方案
2014/08/14 职场文书
捐款活动总结
2014/08/27 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL