JQuery method summary for displaying hidden page elements
- 2020-05-30 19:20:46
- OfStack
In jquery, there are many ways to show hidden div methods, such as the simpler functions show(),hide(),toggle(),slideDown(), and then css to set style property of div.
show () method
Shows hidden
<
p
>
Elements.
$(".btn2").click(function(){
$("p").show();
});
toggle () method
The toggle() method switches the visible state of the element.
If the selected elements are visible, they are hidden, and if the selected elements are hidden, they are displayed.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>
slideDown () method
Slide to show hidden
<
p
>
Chemical element:
$(".btn2").click(function(){
$("p").slideDown();
});
hide () method
Hidden visible
<
p
>
Chemical element:
$(".btn1").click(function(){
$("p").hide();
});
This function is often used with show1
css () method
The css() method sets or returns one or more style attributes of the selected element.
Returns the CSS property
To return the value of the specified CSS property, use the following syntax:
css("propertyname");
$("p").css("display","none");
Let's look at an example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(document).ready( function(){});
function hiden(){
$("#divObj").hide();//hide() function , Implementation hidden , You can also put it in parentheses 1 Time parameter ( ms ) For example, hide(2000) In order to 2000 The speed of milliseconds is hidden , You can also take slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);// The switch of curtain effect , point 1 Under the closed , point 1 Under the open , Parameters can be zero , Parameter description is the same as above
}
function show(){
$("#divObj").show();// According to , Parameter description is the same as above
}
function toggle(){
$("#divObj").toggle(2000);// Show hide switch , Parameters can be zero , Parameter description is the same as above
}
function slide(){
$("#divObj").slideDown();// Curtain effect unfolding
}
</script>
</head>
<body>
<h3>div Content in the show hidden effects </h3>
<input type="button" value=" hidden " onclick="hiden()"/>
<input type="button" value=" According to " onclick="show()"/>
<input type="button" value=" Curtain effect display 2" onclick="slide()"/>
<input type="button" value=" The switch of curtain effect " onclick="slideToggle()"/>
<input type="button" value=" Hide display effect toggle " onclick="toggle()"/>
<div id="divObj" style="display:none">
1. Test cases <br/>
2. Test cases <br/>
3. Test cases <br/>
4. Test cases <br/>
5. Test cases <br/>
6. Test cases <br/>
7. Test cases <br/>
8. Test cases <br/>
9. Test cases <br/>
0. Test cases <br/>
</div>
</body>
</html>