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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
JS 判断代码全收集
Apr 28 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
JS原形与原型链深入详解
May 09 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编写注册后Email激活验证的实例代码
2013/03/11 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
python图像处理之反色实现方法
2015/05/30 Python
详解Python字符串对象的实现
2015/12/24 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python爬虫 正则表达式解析
2019/09/28 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python爬虫工具例举说明
2020/11/30 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
2014年学校领导班子对照检查材料
2014/09/19 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
解析MySQL索引的作用
2022/03/03 MySQL