jQuery页面加载初始化常用的三种方法

当使用jQuery进行页面开发时，我们经常需要在页面加载时进行初始化工作，类似于绑定事件、设置样式等等。这篇攻略将会介绍jQuery页面加载初始化常用的三种方法，分别是：

$(document).ready()方法
$(window).load()方法
$(window).on('load', function(){})方法

$(document).ready()方法

$(document).ready()方法是jQuery中最常用的页面加载初始化方法。当整个DOM文档被解析完成后就会触发该方法，这意味着所有的元素都已经可以被正确地获取到。

以下是一个简单的示例说明该方法：

<!DOCTYPE html>
<html>
<head>
  <title>$(document).ready()方法示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="btn">点击我</button>

  <script>
    $(document).ready(function(){
      $('#btn').on('click', function(){
        alert('Hello World!');
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们在页面加载完成后绑定了一个click事件，当用户点击该按钮时，会触发一个弹窗显示"Hello World!"。

$(window).load()方法

$(window).load()方法是在整个页面全部加载完毕后才会触发执行的方法。它包含了页面的所有资源，如图片、视频等。

以下是一个示例说明该方法：

<!DOCTYPE html>
<html>
<head>
  <title>$(window).load()方法示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <img src="image.jpg" id="myImg">

  <script>
    $(window).load(function(){
      var imgHeight = $('#myImg').height();
      var imgWidth = $('#myImg').width();
      alert('The image height is ' + imgHeight + ' and the width is ' + imgWidth);
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了$(window).load()方法来获取图片的高度和宽度，在图片加载完成后才执行alert弹窗。因为我们需要等到图片完全加载完成后才能正确获取图片的尺寸。

$(window).on('load', function(){})方法

$(window).on('load', function(){})方法与$(window).load()方法类似，也是在整个页面全部加载完毕后才会触发执行的方法。但是，它可以被绑定多次，因此可以同时执行多个函数。

以下是一个示例说明该方法：

<!DOCTYPE html>
<html>
<head>
  <title>$(window).on('load', function(){})方法示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="btn">点击我</button>

  <script>
    $(window).on('load', function(){
      alert('执行第一个函数');
    });

    $(window).on('load', function(){
      $('#btn').on('click', function(){
        alert('Hello World!');
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们在$(window).on('load', function(){})方法中绑定了两个函数，一个在页面加载完成后执行弹窗，另一个是绑定了click事件。当我们点击按钮时，会触发第二个函数的执行结果，弹出"Hello World!"的弹窗。

综上所述，以上三种方法都可以实现页面加载初始化，具体的使用需要根据实际情况来选择。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery页面加载初始化常用的三种方法 - Python技术站

jQuery页面加载初始化常用的三种方法

$(document).ready()方法

$(window).load()方法

$(window).on('load', function(){})方法

相关文章