JQuery执行函数与window.onload函数
JavaScript和HTML之间的交互:
1.通过用户和浏览器操作页面时引发的事件来处理的。
2.当文档或者它的某些元素发生某些变化时,浏览器会自动生成一个事件。
例如:当浏览器装载完一个文档后,会生成事件(属于2);当用户单击某个按钮时,也会生出事件(属于1)。
DOM加载完成:初始化页面的前提大都是DOM文档就绪,即文档树加载完成,而非整个页面(包括页面中的所有元素)载入完成。
因为后者涉及到载入页面中包含的图像及其他二进制内容完成后才能触发页面载入事件(即onload)
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。
在常规的JavaScript代码中,通常使用windows onload方法,
而在jQuery中,使用的事$(document).ready()方法。
jQuery就是用$(document).ready()方法来代替传统JavaScript的w$(document).ready()方法的。通过使用该方法,可以在DOM载入就绪时(文档树)就对其进行操纵并调用执行它所绑定的函数。
$(document)。ready()方法和windows onload方法之间的细微区别:
1.执行时机
windows onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任何元素。
jQuery中的$(document).ready()方法注册的时间处理程序, 在DOM完全就绪时就可以被调用。此时,网页的所有元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。
举一个例子,偶一个大型的图库网站,为网页中所有图片添加某些行为,例如单击图片后让它隐藏或显示。如果使用windows onload方法来处理,那么用户必须等到每一幅图片都加载完毕后,才可以进行操作。如果使用jQuery中的$(document).ready()方法来进行设置,只要DOM就绪就可以操作了,不需要等待所有图片下载完毕很显然,把网页解析为DOM树的速度比把页面中的所有关联文件加载完毕的速度快很多。
另外,需要注意一点,由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用jQuery中另一个关于页面加载的方法----load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后出发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后出发。
$(document).ready{function(){
//编写代码
}}
等价于JavaScript中的一下代码:
Window.onload=function(){
//编写代码
}
2.多次使用
JavaScript的onload事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数,因此不能在现有的行为上添加新的行为。
支持onload事件的 HTML 标签:<body>, <frame>, <frameset>, <iframe>, <link>, <script>
<script>中支持
<script type="text/javascript">//<![CDATA[
window.onload = function get(){
alert('jkl');
} </script>
<script type="text/javascript">
window.onload =function bit(){
alert('123');
}
</script>
最后输出 123
例如有多个JavaScript文件,每个文件都需要用到windows onload方法,这种情况下用上面提到的编写代码会非常麻烦。
jQuery的$(document).ready()方法
能够很好地处理这些情况,每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。
3.像onload事件之类的使用匿名函数执行,即window.onload=function(){ShowMessage();}这种形式。才是在页面加载完成后执行
例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function ShowMessage()
{
alert("true");
}
window.onload=ShowMessage();
</script>
</head>
<body>
当你看到true时看不到我
</body>
</html>
当页面没有加载完成就执行了ShowMessage函数
下面的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function ShowMessage()
{
alert("true");
}
window.onload=function(){ShowMessage();}
</script>
</head>
<body>
你看到true时就看到我了
</body>
</html>
页面加载完成后才执行onload函数
JQuery执行函数与window.onload函数的更多相关文章
- 深入理解,函数声明、函数表达式、匿名函数、立即执行函数、window.onload的区别.
一.函数声明.函数表达式.匿名函数1.函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 2.函数表达式 var fnNam ...
- JQuery语法 JQuery对象与原生对象互转 文档就绪函数与window.onload的区别
[JQuery语法] 1.jQuery("选择器").action();通过选择器调用事件函数,但是jquery中,jquery可以用$(“选择器”).action(); ① ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- javascript中怎么让一个页面执行多个window.onload?
我们都知道在javascript中window.onload 只能有一个如果有多个的话后面的会覆盖前面的,今天我们来看看怎么让一个页面执行多个window.onload <script type ...
- jQuery $(document).ready()和window.onload
jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个func ...
- 立即执行函数与window.onload作用类似
(function(){ }()); // 立即执行函数 或者用window.onload=function(){}也可以
- window.onload 函数不执行处理
Google Chrome window.onload = function(){} 函数不执行处理 function pageOnLoad(){} window.onload = pageOnL ...
- jquery load()函数和window.onload事件
我想用jquery load()一个饼状图页面, 但是load不出来 代码如下: 后来百度了一下,解决办法如下: window.onload事件只有在文档载入的时候才会执行的,你载入子页面不会触发这个 ...
随机推荐
- 【扩展欧几里得】BAPC2014 I Interesting Integers (Codeforces GYM 100526)
题目链接: http://codeforces.com/gym/100526 http://acm.hunnu.edu.cn/online/?action=problem&type=show& ...
- 关于STM32 定时器 PWM 实时调节占空比时,预装载特性
最近在调试项目的时候遇到一个奇怪的现象:在调试状态下,给定时器捕获比较寄存器赋不同值,能产生不同占空比的波形(图1).反映到器件上也有不同的电压显示,但是在设备运行的时候,就不行了(图2). 图1 图 ...
- C基本语句测试
- 武汉Uber优步司机奖励政策(1月18日~1月24日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Spring Boot 入门
Spring Boot自动配置 http://blog.javachen.com/2015/03/13/how-to-run-spring-boot-application.html http://b ...
- 全面剖析XML和JSON
1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许 ...
- select默认选择的实现方法
<script type="text/javascript"> <!-- document.biao.bbb.value = "云南";//b ...
- spring mvc使用ClassPathXmlApplicationContext或FileSystemXmlApplicationContext和XmlWebApplicationContext类的操作其中 XmlWebApplicationContext是专为Web工程定制的。
一.简单的用ApplicationContext做测试的话,获得Spring中定义的Bean实例(对象).可以用: ApplicationContext ac = new ClassPathXmlAp ...
- Android 图标右上角添加数字提醒
方法一:使用开源项目ViewBadger,github上的地址:https://github.com/jgilfelt/android-viewbadger 效果如图所示: <TextView ...
- 获取context path或者basePath
转自:http://hexudonghot.blog.163.com/blog/static/532043422012112264411234/ 在jsp中获取context path或者basePa ...