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

页面加载完成有两种事件,一是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 > 
</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数.所以第二段代码无法正确显示.

时间: 2024-11-06 23:26:14

JQuery onload、ready概念介绍及使用方法(转)的相关文章

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

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成,onload,ready概念容易混淆,下面为大家详细介绍下 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常

[Javascript]jquery $(document).ready() 与window.onload的区别

引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同      

【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别

jQuery中处理加载时机的几种方式 第一种: jQuery(document).ready(function() { alert("你好"); }); //或 $(document).ready(function() { alert("你好"); }); 第二种: jQuery(function() { alert("你好"); }); //或 $(function() { alert("你好"); }); 第三种: (fu

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

JQuery的ready函数与JS的onload的区别

JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

jQuery $(document).ready()和window.onload

jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded. 即当DOM加载完毕的时候,执行这个指定的方法. 因为只有document的状态ready之后,对page的操作才是

jQuery $(document).ready()和JavaScript onload事件

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = fu

jquery 的ready() 与window.onload()的区别

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的.最近遇到了这样的问题,查询了多篇文章,做一下总结. 简单来说,要以用以下张表来表示 : Jquery的ready()与Javascrpit的load()   window.onload() $(document).ready() 加载时机 必须等待网页全部加载完毕(包括图片等),然后再执行JS代码 只需

学习JQuery的$.Ready()与OnLoad事件比较

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件都被加载在"Body"的Onload事件里.对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:1.加载多个函数的问题<body ></body>在Onload事件中只能这样加载,很丑陋-而在JQuery中你可以利用多个JQuery.