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

 更新时间:2009年11月18日 20:01:15   转载 作者:  
浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.
所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; }
解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:
复制代码 代码如下:

//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; }
);
//或者使用简便语法:
/jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);

相关文章

  • jQuery中wrapAll()方法用法实例

    jQuery中wrapAll()方法用法实例

    这篇文章主要介绍了jQuery中wrapAll()方法用法,实例分析了wrapAll()方法的功能、定义及匹配元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery中children()方法用法实例

    jQuery中children()方法用法实例

    这篇文章主要介绍了jQuery中children()方法用法,实例分析了children()方法的功能、定义及过滤所匹配子元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 一次失败的jQuery优化尝试小结

    一次失败的jQuery优化尝试小结

    我经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,从使用者的角度能够进行的优化实在有限
    2011-02-02
  • 提升你网站水平的jQuery插件集合推荐

    提升你网站水平的jQuery插件集合推荐

    jQuery是一个优秀JavaScript库,它简化了HTML文档遍历,事件处理,动画和Ajax交互。 jQuery的确改变了很多人写JavaScript的方式。如今,有很多现成的jQuery插件可供选择,帮助你在网站中加入惊人的功能和效果。
    2011-04-04
  • JQuery和html+css实现带小圆点和左右按钮的轮播图实例

    JQuery和html+css实现带小圆点和左右按钮的轮播图实例

    下面小编就为大家带来一篇JQuery和html+css实现带小圆点和左右按钮的轮播图实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jQuery $.each的用法说明

    jQuery $.each的用法说明

    jQuery中$.each的用法,学习jquery的朋友可以参考下。
    2010-03-03
  • jQuery实现瀑布流布局详解(PC和移动端)

    jQuery实现瀑布流布局详解(PC和移动端)

    这篇文章非常全面的介绍了在PC和移动端上jQuery实现瀑布流布局的详细过程,对瀑布流布局感兴趣的小伙伴们可以参考一下
    2015-10-10
  • jQuery 数据缓存模块进化史详细介绍

    jQuery 数据缓存模块进化史详细介绍

    数据缓存系统最早应该是jQuery1.2引入的,那时它的事件系统完成照搬DE大神的addEvent.js,而addEvent在实现有个缺憾,它把事件的回调都放到EventTarget之上,这会引发循环引用
    2012-11-11
  • jQuery 淡入/淡出效果函数用法分析

    jQuery 淡入/淡出效果函数用法分析

    这篇文章主要介绍了jQuery 淡入/淡出效果函数用法,结合实例形式分析了jQuery 淡入/淡出功能fadeIn()、fadeOut()、fadeToggle()及fadeTo()函数基本功能、使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • jQuery focus和blur事件的应用详解

    jQuery focus和blur事件的应用详解

    本篇文章主要是对jQuery中focus和blur事件的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论