Home > Article > Web Front-end > How to set jquery to hide the div when the mouse clicks on it
How to set jquery to hide the div when the mouse clicks on it
- WBOYOriginal
- 2022-03-22 15:31:151971browse
Jquery method to set the div to be hidden when the mouse clicks on it: 1. Bind the click event to the div element and set the event processing function; 2. In the event processing function, use the hide() method to set the div to be hidden , the syntax is "div element object.hide()".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to set jquery to hide the div when clicking the mouse
hide() method hides the selected element.
The syntax is:
$(selector).hide(speed,easing,callback)
speed Optional. Specifies how quickly the effect is hidden.
Possible values:
Milliseconds "slow" "fast"
easing Optional. Specifies the element's speed at different points in the animation. The default value is "swing".
Possible values:
"swing" - moves slowly at the beginning/end, moves fast in the middle "linear" - moves at a constant speed Tip: More available in the extension Many easing functions available.
#callback Optional. The function to be executed after the hide() method is executed.
When an element is clicked, the click event occurs.
The click() method triggers a click event, or specifies a function to run when a click event occurs.
The syntax is:
Trigger the click event of the selected element:
$(selector).click()
Add a function to the click event:
$(selector).click(function)
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$("div").hide();
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;border:1px solid red;"></div>
</body>
</html> Output results:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of How to set jquery to hide the div when the mouse clicks on it. For more information, please follow other related articles on the PHP Chinese website!