jQuery之$(document).ready()使用介绍

最新推荐文章于 2025-01-23 14:45:24 发布

转载最新推荐文章于 2025-01-23 14:45:24 发布 · 509 阅读

JAVA 专栏收录该内容

734 篇文章

订阅专栏

本文详细介绍了jQuery中$(document).ready()函数的使用方式，阐述了其在页面加载过程中的作用及优势，同时对比了其他方法的不足之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery之$(document).ready()使用介绍

作者：佚名来源：脚本之家更新时间：2012-4-6

分享到

id="cproIframe_u566310_1" width="336" height="280" src="http://pos.baidu.com/acom?adn=3&at=103&aurl=&cad=1&ccd=24&cec=GBK&cfv=17&ch=0&col=zh-CN&conOP=0&cpa=1&dai=1&dis=0&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DqhBt8lmKCNfTHOrxNfBMYz1dc61vnq-bytm6b-pWTtIuG7SK2xIXhHq4ftMoZBbKUTvhrVuKAq0145zUBRqX6q%26ie%3Dutf-8%26f%3D8%26tn%3Dbaidu%26wd%3D%2520%2524(document).ready%26inputT%3D1562&ltu=http%3A%2F%2Fwww.poluoluo.com%2Fjzxy%2F201204%2F162468.html&lunum=6&n=xiaoc3_cpr&pcs=1036x680&pis=10000x10000&ps=301x44&psr=1440x900&pss=1036x302&qn=a27452529f09f191&rad=&rsi0=336&rsi1=280&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=&td_id=566310&ti=jQuery%E4%B9%8B%24(document).ready()%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D&tn=text_default_336_280&tpr=1429596364728&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u566310&tt=1429596364712.17.565.571" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">

id="cproIframe_u566310_2" width="336" height="280" src="http://pos.baidu.com/acom?adn=3&at=103&aurl=&cad=1&ccd=24&cec=GBK&cfv=17&ch=0&col=zh-CN&conOP=0&cpa=1&dai=2&dis=0&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DqhBt8lmKCNfTHOrxNfBMYz1dc61vnq-bytm6b-pWTtIuG7SK2xIXhHq4ftMoZBbKUTvhrVuKAq0145zUBRqX6q%26ie%3Dutf-8%26f%3D8%26tn%3Dbaidu%26wd%3D%2520%2524(document).ready%26inputT%3D1562&ltu=http%3A%2F%2Fwww.poluoluo.com%2Fjzxy%2F201204%2F162468.html&lunum=6&n=xiaoc3_cpr&pcs=1036x680&pis=10000x10000&ps=301x732&psr=1440x900&pss=1036x582&qn=01bfb51b9717e269&rad=&rsi0=336&rsi1=280&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=&td_id=566310&ti=jQuery%E4%B9%8B%24(document).ready()%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D&tn=text_default_336_280&tpr=1429596364728&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u566310&tt=1429596364712.591.872.872" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">

学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

.代码如下:

 
 $(document).ready(function() { 
   
 // put all your jQuery goodness in here. 
   
 });

有很多方法可以确保事件在页面上正常工作，$(document).ready()比其它方法要更有优势。首先，你不必在HTML上放置任何“ 行为性的”标记。另外，你可以将JavaScript/jQuery写入一个独立的js文件，这样既容易维护，又保证了js与页面内容的隔离。如果你在浏览网页时更加细心，你就会常常看见这种情况：当你将鼠标悬停在一个连接时，有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面，你会在<body>标签中看见“onload”属性。这会导致一个问题：它限定了在body上只能有一个函数事件。是的，因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题，请参考Jeremy Keith的书：DOM Scripting，里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数，它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码，另外，这种方法是在加载window时触发这些事件的，这不得不让我再一次想起 $(document).ready()的好处。

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