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

Posted 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>

 运行结果如下:


从上面可见,匿名函数与有名称的函数,缩写与不缩写,运行的结果是一样的。

至于什么时候缩写,就在于你的开发团队比较熟悉时,或者没有冲突的时候才这样写。

比特币源码入门教程

https://edu.csdn.net/course/detail/6998

深入浅出Matplotlib
https://edu.csdn.net/course/detail/6859

深入浅出Numpy
http://edu.csdn.net/course/detail/6149 


以上是关于python web py入门(46)- jQuery 事件 - $( document ).ready与$( window ).on( &quot;load&quot;的区别的主要内容,如果未能解决你的问题,请参考以下文章

Python web.py模块基本应用

Web.py学习报告

Web.py学习报告

Python入门自学进阶-Web框架——29DjangoAdmin项目应用-整表只读自定义用户认证

Python入门自学进阶-Web框架——29DjangoAdmin项目应用-整表只读自定义用户认证

Python入门自学进阶-Web框架——3Django的URL配置