Home > Article > Web Front-end > What function does jquery use to display and hide elements?
What function does jquery use to display and hide elements?
- WBOYOriginal
- 2022-04-15 10:47:162575browse
The functions are: 1. show(), this method can display hidden elements, the syntax is "element object.show()"; 2. hide(), this method can hide the displayed elements, the syntax is "element Object.hide()"; 3. toggle(), this method can show or hide elements, the syntax is "Element object.toggle()".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
What function does jquery use to display and hide elements?
1. Display elements: show()
If the selected element has If hidden, these elements are displayed:
Syntax
$(selector).show(speed,callback)
speed is optional. Specifies how quickly an element goes from hidden to fully visible. Default is "0".
Possible values:
milliseconds (e.g. 1500)
"slow"
"normal"
"fast"
With the speed set, the element will gradually change its height, width, margins, padding, and transparency as it goes from hidden to fully visible.
callback is optional. The function to be executed after the show function is executed. This parameter cannot be set unless the speed parameter is set.
2. Hidden element: hide()
If the selected element has been displayed, hide the element.
Syntax
$(selector).hide(speed,callback)
speed is optional. Specifies how quickly an element goes from visible to hidden. Default is "0".
Possible values:
milliseconds (e.g. 1500)
"slow"
"normal"
"fast"
When the speed is set, the element will gradually change its height, width, margins, padding and transparency as it goes from visible to hidden.
callback is optional. The function to be executed after the hide function is executed.
This parameter cannot be set unless the speed parameter is set.
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>Output result:
##3. Automatically identify, show or hide elements: toggle()
The toggle() method switches between hide() and show() on the selected element. This method checks the visible status of the selected element. If an element is hidden, show() is run, if an element is visible, hide() is run - this creates a toggle effect. Note: Hidden elements will not be fully displayed (no longer affect the layout of the page). Tip: This method can be used to switch between custom functions. Grammar$(selector).toggle(speed,easing,callback)The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>Output result:
The above is the detailed content of What function does jquery use to display and hide elements?. For more information, please follow other related articles on the PHP Chinese website!