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修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
JS数组去重详情
Nov 07 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
用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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python实现停车管理系统
2018/11/30 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python 字典操作提取key,value的方法
2019/06/26 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
自荐信格式的六要素
2013/09/21 职场文书
社会实践活动总结
2015/02/05 职场文书
烈士陵园观后感
2015/06/08 职场文书
春晚观后感
2015/06/11 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
感恩教师节主题班会
2015/08/12 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server