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")
方法进行分离。
让我们尝试一个例子:
<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() "
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()
方法在调整大小时显示窗口的宽度和高度。
转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处
本文地址:
相关文章
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 事件。