jQuery 事件 - resize() 方法 概述
jQuery 2022-06-01 12:11:2613小码哥的IT人生shichen
jQuery 事件 - resize() 方法
实例
对浏览器窗口调整大小进行计数：
$(window).resize(function() { $('span').text(x+=1); });
完整实例：
<html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> x=0; $(document).ready(function(){ $(window).resize(function() { $("span").text(x+=1); }); }); </script> </head> <body> <p>窗口大小被调整过 <span>0</span> 次。</p> <p>请试着重新调整浏览器窗口的大小。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
当调整浏览器窗口的大小时，发生 resize 事件。
resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
触发 resize 事件
语法
$(selector).resize()完整实例：
<html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> x=0; $(document).ready(function(){ $(window).resize(function() { $("span").text(x+=1); }); $("button").click(function(){ $(window).resize(); }); }); </script> </head> <body> <p>窗口的大小被调整了 <span>0</span> 次。</p> <p>请试着调整浏览器窗口的大小。</p> <button>触发窗口的 resize 事件</button> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
将函数绑定到 resize 事件
语法
$(selector).resize(function)| 参数 | 描述 |
|---|---|
| function | 可选。规定当发生 resize 事件时运行的函数。 |
完整实例：
<html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> x=0; $(document).ready(function(){ $(window).resize(function() { $("span").text(x+=1); }); }); </script> </head> <body> <p>窗口大小被调整过 <span>0</span> 次。</p> <p>请试着重新调整浏览器窗口的大小。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
