脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-$(document).ready()，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

简介

 $( document ).ready(function() {     console.LOG( "ready!" ); });

在网页文档加载完毕前一个页面是无法安全操纵的。jQuery可以为我们检测到待发状态。

$(document).ready()中的代码在 Document Object Model (DOM) 完毕后会立即执行。

$( window ).on( “load”, function() { … })中的代码需要在全部页面（图片或框架等）完毕后才会执行，而不仅仅是DOM。

简写：

$(function() {
console.log( “ready!” );
});

调用命名函数

 function readyFn( jquery ) {     // 文档加载后执行的代码 } $( document ).ready( readyFn ); // 或： $( window ).on( "load", readyFn );  测试 

<script src="https://code.jquery.COM/jquery-1.9.1.min.js"></script><script> $( document ).ready(function() { console.log( "document loaded" ); }); $( window ).on( "load", function() { console.log( "window loaded" ); }); </script><iframe src="https://techcrunch.com"></iframe>

运行后在控制台可以看出，在页面还是空白的时候已经”document loaded”了，等行内框架加载好后，才“window loaded”。

优点：

执行时机
使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

多次执行
window.onload事件每次只能保存对一个函数的引用，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题，每次调用$document.ready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。

 function say(str){     alert(str) } $(document).ready(function(){     say('hello') }) $(document).ready(function(){     say('jQuery') }) //依次弹出hello jQuery

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-$(document).ready()全部内容，希望文章能够帮你解决javascript代码实例教程-$(document).ready()所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。