python web py入门（46）- jQuery 事件 - $( document ).ready与$( window ).on( "load"的区别

Posted 2022-08-27 caimouse

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python web py入门（46）- jQuery 事件 - $( document ).ready与$( window ).on( "load"的区别相关的知识，希望对你有一定的参考价值。

在前面学习了ready方法，这个方法是在当文档准备好时触发运行，因为一个页面是否安全地操作html元素，是需要DOM完成，否则会发现有一些元素还没有加载，就去操作，必然会出错。jQuery自动地检测这个DOM完成时刻，省了不少事情。并且只自动地执行一次代码，不会多次执行，导致浪费运行资源。如果把代码放到$( window ).on( "load", function() ... )，它不是DOM完成时刻执行，而是整个页面完全加载完成，包括图片、iframes等等，不是DOM完成时刻，差别就在这里。如果下面的代码运行时，就可以看到差别：

<html>
  <head>
    <meta charset="utf-8">
    <title>
      ready()方法window.load与的例子
    </title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
    <script type="text/JavaScript">
      $( document ).ready(function() 
          console.log( "document已经加载" );
      );

      $( window ).on( "load", function() 
          console.log( "window已经加载" );
      );
    </script>
  </head>
  <body>
    <iframe src="https://blog.csdn.net/caimouse"></iframe>
  </body>
</html>

运行结果如下：

在这里看到document首先加载，接着才到window.load方法加载。

在ready方法里，不仅可以使用匿名函数，也可以有名称的函数，并且当你熟悉之后，也可以把$( document ).ready()写成$()，如下：

<html>
  <head>
    <meta charset="utf-8">
    <title>
      ready()方法window.load与的例子
    </title>
    <script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
    <script type="text/JavaScript">
      function readyFn( jQuery ) 
        console.log( "非匿名函数演示，document已经加载" );
      
      $(readyFn);
    </script>
  </head>
  <body>
    <iframe src="https://blog.csdn.net/caimouse"></iframe>
  </body>
</html>

运行结果如下：