zoukankan      html  css  js  c++  java

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

     $(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]
     
    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.             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] 
     
    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.             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] 
     
    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.             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 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。
  • 相关阅读:
    mysql 索引
    mysql binlog相关知识
    分布式系统日志
    学习路线
    分布式学习
    工具
    关于java面试
    mysql悲观锁总结和实践(转)
    app技术博客整理
    Java编程一些经验
  • 原文地址：https://www.cnblogs.com/zzmb/p/8416203.html
Copyright © 2011-2022 走看看