body中的onload()和window.onload以及$(document).ready()的区别:

1、前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中都兼容,而$(document).ready()表示的是JQuery中的一个方法因而只有在支持jQuery的浏览器中才适用,同时该方法是在当页面的dom节点加载完毕后就执行,无需等待页面中的图片等加载完成。

2、当代码中同时存在body中的onload()和window.onload()要注意的 :

a、当JS代码在head中时且window.onload()中方法是匿名时:将会跳过window中的方法。

<html>

<head>

<script type="text/javascript"> alert('a');

window.onload=function () {

alert('b');

} ;

alert('c');

</script>

</head>

<body onload="alert('d');">

</body>

</html>

上面的代码中执行的结果是:a,c,d

b、当JS代码在head中同时window.onload()中方法不是匿名时,这时会对浏览器的不同有差异,在IE8以及IE8以下的版本中会顺序执行JS代码到window.onload()但其后面的将不会被执行(除了定义的方法在其他地方被调用的外),而在IE8以上以及chrome等浏览器中都将会被执行。

<html>

<head>

<script type="text/javascript"> alert('a');

window.onload=fn();

function fn() {

alert('b');

} ;

alert('c');

</script>

</head>

<body onload="alert('d');">

</body>

</html>

由上知当在IE8以及以下的版本中的执行结果为:abd,在其他浏览器中的执行结果为:

a,b,c,d

c、当JS代码在body中时同时window.onload()中的方法不是匿名的时:

<html>

<head>

</head>

<body onload="alert('a');">

<script type="text/javascript"> alert('b');

window.onload=fn();

function fn () {

alert('c');

} ;

alert('d');

</script>

</body>

</html>

上述代码在IE8以及以下版本中的执行结果为:b,c,a在其他浏览器中的执行结果为:b,c,d

d、当JS代码中body中同时window,onload()中的方法是匿名函数时:

<html>

<head>

</head>

<body onload="alert('a');">

<script type="text/javascript"> alert('b');

window.onload=function  () {

alert('c');

} ;

alert('d');

</script>

</body>

</html>

上述代码的执行结果为:b,c,d

将JS代码放在body和放在head中的结果不一样这是和文档的加载顺序相关的。

jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别的更多相关文章

  1. jquery中的$(document).ready()使用小结

    本篇文章主要是对jquery中的$(document).ready()使用方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 window.onload = function(){ ...

  2. jquery中的$(document).ready()

    window.onload = function(){ alert("welcome"); } 这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(d ...

  3. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. jquery的$(document).ready()与js的window.onload区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. jquery学习之$(document).ready()

    参考资料: 1.W3School在线教程:http://www.w3school.com.cn/jquery/event_ready.asp 2.某人博客园:http://www.cnblogs.co ...

  6. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

  7. jQUery中的$(document).ready()方法和window.onload()方法的区别

    1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...

  8. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. jquery中的$(document).ready(function(){})和$(window).load()比较

    1.执行时间 window.onload()即jquery写法中的$(window).load(function(){})必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document). ...

随机推荐

  1. ai seek

    原文地址链接:http://gamedevelopment.tutsplus.com/tutorials/understanding-steering-behaviors-seek--gamedev- ...

  2. [Leetcode] Recover Binary Search Tree

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  3. springmvc入门基础之注解和参数传递

    一.SpringMVC注解入门 1. 创建web项目2. 在springmvc的配置文件中指定注解驱动,配置扫描器 <!-- mvc的注解驱动 --> <mvc:annotation ...

  4. DBLink创建 ORA-12154: TNS: 无法解析指定的连接标识符

    因为对oracle不了解,这个问题可TM的搞了好久! 走的弯路: 1. 在客服端的PLSQL连接工具上折腾,而不是在服务器的PLSQL解决 2. 配置的tnsnames.org文件在环境变量path( ...

  5. osg 路径 动画 效果

    osg 路径 动画 效果 转自:http://blog.csdn.net/zhuyingqingfen/article/details/8248157 #include <osg/Group&g ...

  6. HTTP协议及其请求头分析

    HTTP协议及其请求头分析 HTTP协议及其请求头分析   众所周知,Internet的基本协议是TCP/IP协议,目前广泛采用的FTP.Archie Gopher等是建立在TCP/IP协议之上的应用 ...

  7. Material Design - CollapsingToolbarLayout

    一.概述 CollapsingToolbarLayout是Material Design的一个Layout,直接继承于FrameLayout. 二.使用 1.导包 2.使用 - 设置相关属性 三.参考 ...

  8. 类库,委托,is和as运算符,泛型集合

    类库:其实就是一堆类文件,只不过用户看不到这些类的源代码,保密性好. 优点:保密性好缺点:如果这个方法不好用,使用者无法自己去更改它. 类文件是.cs    类库是.dll 新建项目为类库,在debu ...

  9. [转载]对于GetBuffer() 与 ReleaseBuffer() 的一些分析

    先 转载一段别人的文章 CString类的这几个函数, 一直在用, 但总感觉理解的不够透彻, 不时还有用错的现象. 今天抽时间和Nico一起分析了一下, 算是拨开了云雾: GetBuffer和Rele ...

  10. 创造tips的秘籍——PHP回调后门

    作者:Phithon 原文连接:https://www.leavesongs.com/PENETRATION/php-callback-backdoor.html 最近很多人分享一些过狗过盾的一句话, ...