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 相关文章推荐
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JavaScript判断对象和数组的两种方法
May 31 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 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
第十四节--命名空间
2006/11/16 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
理解javascript正则表达式
2016/03/08 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python基础知识点 初识Python.md
2019/05/14 Python
OpenCV 模板匹配
2019/07/10 Python
PyQt5实现登录页面
2020/05/30 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
傲盾软件面试题
2015/08/17 面试题
党风廉政建设调研报告
2015/01/01 职场文书
就业证明函
2015/06/17 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
SQL基础的查询语句
2021/11/11 MySQL