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全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
php5.2时间相差8小时
2007/01/15 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
js实现常见的工具条效果
2017/03/02 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Angular中支持SCSS的方法
2017/11/18 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Python深入学习之对象的属性
2014/08/31 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
jupyter安装小结
2016/03/13 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python自动点赞功能的实现思路
2020/02/26 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
演讲稿的格式及范文
2014/08/22 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
maven依赖的version声明控制方式
2022/01/18 Java/Android
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android