jQuery 中的 resize() 方法
resize() 方法是 jQuery 中的一个内置函数，用于在浏览器窗口改变大小时使用。本篇文章演示了如何在 jQuery 中使用 resize() 方法。
在 jQuery 中使用 resize() 方法
resize() 方法的工作方式类似于 JavaScript 的 onresize() 方法。它们用于调整窗口大小。
resize() 方法的语法是：
$(selector).resize(function)
selector 可以是窗口。而 function 是一个可选参数，将在调用 resize() 方法时被调用；这个函数也称为处理程序。
处理程序中的代码永远不应基于调用处理程序的次数，因为此事件可以连续发送，直到正在进行调整大小。此方法的返回值是具有调整大小属性的选定元素。
这里还应该提到 resize() 方法是 on("resize", handler) 的 jQuery 版本。因此，与此类似，可以使用 .off("resize") 方法进行分离。
让我们尝试一个例子：
<!DOCTYPE html>
<html>
<head>
<title> jQuery resize() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
var Window_Size = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
$('#DemoParagraph').html(Window_Size);
});
});
</script>
<style>
span {
font-weight: bold;
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h2> jQuery resize() method </h2>
<p> Resize your browser's window and see the Resize() method effect. </p>
<p> You have resized the window <span> 0 </span> times.</p>
<p id = "DemoParagraph"> </p>
</body>
</html>
上面的代码使用 resize() 方法在调整大小时显示窗口的宽度和高度。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
