提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

PythonampjQuery事件OnWeb入门 区别
2023-09-14 09:10:43 时间
在前面学习了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 


相关文章