JQuery onload、ready概念介绍及使用方法
更新时间：2013年04月27日 16:15:13 作者：
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成，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 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数.所以第二段代码无法正确显示.
一般样式控制的，比如图片大小控制放在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数.所以第二段代码无法正确显示.
您可能感兴趣的文章:
- jquery $(document).ready() 与window.onload的区别
- jquery的$(document).ready()和onload的加载顺序
- jquery中的$(document).ready()与window.onload的区别
- 解析页面加载与js函数的执行 onload or ready
- 一张表格告诉你windows.onload()与$(document).ready()的区别
- JQuery的ready函数与JS的onload的区别详解
- 浅析document.ready和window.onload的区别讲解
- jQuery中document与window以及load与ready 区别详解
- JQ中$(window).load和$(document).ready区别与执行顺序
相关文章
这篇文章主要介绍了jQuery遍历DOM元素与节点方法,结合实例形似详细分析了jQuery遍历DOM父级节点,子级节点及兄弟节点的相关技巧,需要的朋友可以参考下2016-04-04
通过Jquery的Ajax方法读取将table转换为Json
这篇文章主要介绍了通过Jquery的Ajax方法读取将table转换为Json,需要的朋友可以参考下2014-05-05
这篇文章主要为大家详细介绍了基于jquery实现轮播特效的相关资料，感兴趣的小伙伴们可以参考一下2016-04-04
节点的删除在应用中比较常见，如何动态删除某一节点来实现某一特殊效果，下面有个不错的示例，希望对大家有所帮助2014-01-01
我总是乐于尝试新工具或利用节省开发时间的资源。由于市面上存在有许多Web开发工具，你可能很难缩小搜索范围。2009-02-02
这篇文章主要介绍了jQuery中dequeue()方法用法,实例分析了dequeue()方法的功能、定义、使用技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这次项目就有这个要求了，模拟选项框，我选择使用div+css+jquery来实现，总的来说还不错，感兴趣的朋友可以参考下2013-11-11
这篇文章主要为大家详细介绍了jQuery Datatables表头不对齐的解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了EasyUI为Numberbox添加blur事件的方法 ,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery横向擦除焦点图特效，一个具有自己特色的焦点图会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的焦点图，感兴趣的小伙伴可以参考下。2015-09-09
最新评论