$(function() {})和$(document).ready(function(){ })

浅浅的花香味﹌ 2022-06-01 14:26 204阅读 0赞

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果把script标签放到页面最后面那么就没问题了，此时和ready效果一样。

$(document).ready(function()\{\})可以简写成$(function()\{\});

**注意：**

jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。后面的文章会具体讲解它们之间的区别，今天先说明一下$(document).ready(function()\{\})的应用。

举一个简单的例子说明。当点击div后，我们将一个div隐藏。

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html>  
2.  <html lang="en">  
3.  <head>  
4.      <meta charset="UTF-8">  
5.      <title>Title</title>  
6.      <script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>  
7.      <script>  
8.          $(document).ready(function () \{  
9.              $("div").click(function()\{  
10.                 $(this).hide();  
11.             \});  
12.         \});  
13.     </script>  
14.     <style>  
15.         div\{  
16.             width:100px;  
17.             height:100px;  
18.             background-color: \#8ad6ff;  
19.         \}  
20.     </style>  
21. </head>  
22. <body>  
23. <div>点击div，隐藏此div</div>  
24. </body>  
25. </html>

如果把$(document).ready(function() \{\});去掉后，无法隐藏这个div：

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html>  
2.  <html lang="en">  
3.  <head>  
4.      <meta charset="UTF-8">  
5.      <title>Title</title>  
6.      <script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>  
7.      <script>  
8.           $("div").click(function()\{  
9.               $(this).hide();  
10.         \});  
11.     </script>  
12.     <style>  
13.         div\{  
14.             width:100px;  
15.             height:100px;  
16.             background-color: \#8ad6ff;  
17.         \}  
18.     </style>  
19. </head>  
20. <body>  
21. <div>点击div，隐藏此div</div>  
22. </body>  
23. </html>

但是把script放到页面最后的话，就可恢复隐藏效果：

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html>  
2.  <html lang="en">  
3.  <head>  
4.      <meta charset="UTF-8">  
5.      <title>Title</title>  
6.      <script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>  
7.      <style>  
8.          div\{  
9.              width:100px;  
10.             height:100px;  
11.             background-color: \#8ad6ff;  
12.         \}  
13.     </style>  
14. </head>  
15. <body>  
16.     <div>点击div，隐藏此div</div>  
17. </body>  
18. <script>  
19.      $("div").click(function()\{  
20.      $(this).hide();  
21.      \});  
22. </script>  
23. </html>

**所以我们进行总结一下：**

$(document).ready 里的代码是在页面内容都加载完才执行的，如果直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，如果标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错。但是如果把script标签当到页面最后面那么就没问题，可以达到和ready差不多的效果。

$(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。

转载自：[http://blog.csdn.net/u010297791/article/details/53819380][http_blog.csdn.net_u010297791_article_details_53819380]

[view plain]: http://blog.csdn.net/u010297791/article/details/53819380#
[http_blog.csdn.net_u010297791_article_details_53819380]: http://blog.csdn.net/u010297791/article/details/53819380