JQuery onload、ready概念介绍及使用方法
一般样式控制的，比如图片大小控制放在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 onload、ready概念介绍及使用方法的更多相关文章
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
- jQuery笔记: 基本概念与jQuery核心
目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...
- jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
- jquery的ready方法（DOM是否加载完）详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别
1.首先说JQuery的几个写法 $(function(){ //do someting }); $(document).ready(function(){ //do so ...
- jQuery $(document).ready()和window.onload
jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个func ...
- 学习JQuery的$.Ready()与OnLoad事件比较
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...
随机推荐
- Scss sass
http://www.ruanyifeng.com/blog/2012/06/sass.htmlscss 声明:1,$blue : #1875e7;2,.class1 { border: 1px so ...
- RM报表的打印偏移
自己摸索一下 RMReport1.SaveReportOptions.AutoLoadSaveSetting := True; RMReport1.SaveReportOptions.UseRegis ...
- 在OpenShift云空间上部署java web应用
在使用之前先来介绍下OpenShift空间 OpenShift是由红帽推出逇一款面向开源开发人员开放的平台即服务(PaaS). OpenShift通过为开发人员提供在语言.框架和云上的更多的选择,使开 ...
- xlistview的java（头）
package com.bwie.xlistviews; import com.bwie.test.R; import android.content.Context;import android.u ...
- 100个iOS开发/设计面试题汇总
常见问题 你昨天/这周学习了什么? 你为什么热衷于软件开发? 你对哪一种控制系统比较熟悉? 是否参与过GitHub项目? 是否参与过GitHub或其他同类型网站的iOS开源项目? 请描述一下你的iOS ...
- namenode 无法启动之每次开机需要重新格式化-tmp
最近遇到了一个问题,执行start-all.sh的时候发现JPS一下namenode没有启动 每次开机都得重新格式化一下namenode才可以 其实问题就出在tmp文件,默 ...
- 去除hadoop启动时的警告
hadoop启动的时候,会出现以下警告提示: 执行more start-all.sh查看该文件 但/libexec下不存在hadoop-config.sh文件,所以会执行bin/hadoop-conf ...
- C#移动无标题栏窗体的四种代码
第一种采用,需注意窗体上的控件是否把窗体覆盖了...MouseDown.MouseMove.MouseUp事件应该是鼠标所处位置最顶层的控件的事件在窗体的类中声明两个变量private Point m ...
- MyEclipse 安装目录下找不到Common目录
最近在安装了MyEclipse,由于是自己指定的安装目录,在成功安装后要破解的时候却发现找不到安装目录下的Common目录,很是郁闷,后来发现如下: MyEclipse启动后的上方导航中找到MyEcl ...
- 一道面试题：按照其描述要求用java语言实现快速排序
回来想了想,写出了如下的程序: /** * 一道面试题,按照其描述要求进行快速排序(英文的,希望理解是对的..) * 要求:和一般的快速排序算法不同的是,它不是依次交换pivot和左右元素节点(交换2 ...