jquery中$(document).ready()作用

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

原创最新推荐文章于 2025-01-23 14:45:24 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #Ajax #CSS #HTML #ViewUI

js-prototype 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了jQuery中的$(document).ready()函数，解释了如何利用该函数在页面加载完成时执行JavaScript代码，使得代码更加模块化且易于维护。

$(document).ready()，这是学习jQuery首先要明白的jquery语句：如果你想在你的页面应用jQuery,就得在页面中引用$(document).ready()功能函数。$(document).ready()函数里面的内容将会在整个页面其他内容下载之前预先加载。代码如下所示：

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

$(document).ready()在调用事件方面有非常多的优点，总的来说就是你不必再在HTML中写入任何“行为”标记。有了$(document).ready()，你可以将所有的JavaScript代码写在一个单独的文件中，这样一来便于管理并和页面内容独立开来，可移植性大大增强。自此，当我们把鼠标移动到一个超级链接上时，类似于“javascript:void()”之类的信息将不会再在状态栏出现了。
在一些使用了JavaScript语句的页面，通常可以看到body标签中附带了一个onload属性值。问题就在于，使用“onload”属性局限在于只能使用一个功能函数。甚者，此种方法依然再次在内容上添加了一个“behavioral”标记。Jeremy Keith写的一本非常棒的书 DOM Scripting 给我们展示了如何将导入JavaScript事件函数写在一个单独文件以达到调用多个功能函数的方法。但这种方法有一个最大的缺点就是一些简单的功能却需要写大量的代码。当然，这本书也给了我们另外一种简洁高效的方法，就是使用$(document).ready().
有了$(document).ready()，我们可以在windows加载之前，就预先加载我们想要实现某个功能的代码。这样一来，当你浏览一个运用了jQuery的网站，一打开页面就会看到jQuery效果，没有任何延迟。
下面是一个运用

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd">
      <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <title>your title</title>
        <link rel="stylesheet" type="text/css" href="styles/forms.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
          <script src="yourcustomscript.js" type="text/javascript"></script>
      </head>
        <body>
        <!-- the body of your document goes here -->
      </body>
      </html>