jquery中$(function(){}) 和 $(document).ready(function(){})的区别

学习过程中出现了一个问题那就是

之前在W3Cschool中学习的时候 我们所有的jQuery代码都写在了$(document).ready()函数中而现在遇见了jQuery代码写在 $(function(){}) 未免一脸蒙圈。

[$(document).ready()]:

这个函数的名字叫做文档就绪函数

[模板]：

1 $(document).ready(function(){
2 --- jQuery functions go here ----
3 });
4 Eg: $(document).ready(function(){
5     $("button").click(function(){
6         $("#test").hide();
7     })
8 })

这是为了防止文档在完全加载（就绪）之前运行jQuery代码

如果文档没有完全加载（就绪）之前就运行函数，操作可能失败。

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

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

注意：

所以我们看到了 $(function(){})其实是$(document).ready()的简写。

jQuery中的$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。今天先说明一下$(document).ready(function(){})的应用。

举一个简单的例子（当点击div时候 我们将一个div进行隐藏）

 

 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：

 

 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放到页面最后的话，就可恢复隐藏效果：

 

 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>

 

是不是特别像 js中学过的 window.onload（）方法？

 

 

 

[总结]：

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

 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

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

posted @ 2018-01-17 12:45  Lay-Buddhist  阅读(331)  评论(0)    收藏  举报