Home >Web Front-end >Front-end Q&A >How to add browser size change trigger event in jquery
How to add browser size change trigger event in jquery
- WBOYOriginal
- 2022-01-14 11:59:062014browse
In jquery, you can use the resize method to add a browser size change trigger event. The function of this method is to generate a resize event when the browser window is resized, or to specify a function to be run when a resize event occurs. The syntax is "$(selector).resize()".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to add a browser size change trigger event in jquery
When the browser window is resized, the resize event occurs.
The resize() method triggers the resize event, or specifies a function to run when the resize event occurs.
Trigger the resize event
Syntax
$(selector).resize()
Bind the function to the resize event
Syntax
$(selector).resize(function)
function Optional. Specifies the function to run when the resize event occurs.
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.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>Output result:
The above is the detailed content of How to add browser size change trigger event in jquery. For more information, please follow other related articles on the PHP Chinese website!