如何在jQuery中触发窗口尺寸调整事件

如何在jQuery中触发窗口尺寸调整事件

在这篇文章中,我们将讨论如何使用jQuery来触发窗口调整大小的事件。为此目的,我们将使用jQuery提供的以下库函数。

  1. $(<element>).trigger() 这个库函数允许我们同时触发本地和自定义的事件。该方法可以独立使用,也可以由其他事件启动。在这种情况下,我们将使用本地的JavaScript事件 “resize”,以便根据我们的方便来触发调整大小的事件。语法是:$(window).trigger('resize')
  2. $(<element>).resize() 该方法用于监听调整大小的事件。该方法可以接受回调函数作为参数,一旦遇到调整大小的事件,这些函数将被执行。

jQuery CDN链接:

<script src=”https://code.jquery.com/jquery-3.5.1.min.js” integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anonymous”></script>

在这里,为了便于理解,调整大小事件将在一个按钮上触发。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
  
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0">
  
    <script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
        integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <button id="res" style="
                background-color: green;
                color: white;
                font-size: 30px;
                border: none;
                border-radius: 28px;
                width: 200px;
                height: 100px;
                outline: none;
                cursor: pointer;">
        Resize
    </button>
    <br>
      
    <p id="gfg" style>
         (for Geeks For Geeks)
    </p>
  
    <script>
        (document).ready(() => {
            ('#res').on('click', () => {
                (window).trigger('resize');
            });
            (window).resize(() => {
                console.log("resize function called");
            })
        });
    </script>
</body>
  
</html>

给定代码片段的输出:

如何在jQuery中触发窗口尺寸调整事件?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程