JQuery onload、ready概念介绍及使用方法


Posted in Javascript onApril 27, 2013

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!)
一般样式控制的,比如图片大小控制放在onload 里面加载;

jS事件触发的方法,可以在ready 里面加载;
用jQ的人很多人都是这么开始写脚本的:
通常的写法

$(function(){ 
// do something 
});

其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){ 
//do something 
})

也等于下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){ 
//do something 
})

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载 在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
加载 多个函数的问题
■<body onload="a();b();">
</body>
在Onload事件中 只能这样加载,很丑陋…
■而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行
代码和内容不分离
这个貌似不用说了,让人深恶痛绝-.-!!◦ 执行先后顺序不同
■对于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方法
<script type="text/javascript"> 
$(window).unload(function() { 
alert("good bye"); 
}); 
</script>

上面代码会在页面关闭时引发.
在 所有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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 #Javascript
javascript中强制执行toString()具体实现
Apr 27 #Javascript
用客户端js实现带省略号的分页
Apr 27 #Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 #Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 #Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 #Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
You might like
浅谈php错误提示及查错方法
2015/07/14 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
详解redux异步操作实践
2018/08/15 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
竞聘演讲稿开场白
2014/08/25 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年女职工工作总结
2014/11/27 职场文书
布达拉宫的导游词
2015/02/02 职场文书
我的长征观后感
2015/06/09 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python