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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
基于node实现websocket协议
Apr 25 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
bootstrap中的导航条实例代码详解
May 20 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
PHP 和 COM
2006/10/09 PHP
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
项目实践之javascript技巧
2007/12/06 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python保存数据到本地文件的方法
2018/06/23 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python装饰器语法糖
2019/01/02 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
python中取绝对值简单方法总结
2020/07/24 Python
浅谈Python __init__.py的作用
2020/10/28 Python
C语言笔试题回忆
2015/04/02 面试题
行政文员岗位职责
2013/11/08 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
python超详细实现完整学生成绩管理系统
2022/03/17 Python