jQuery hide () and show ()
By jQuery, you can use the hide () and show () method to hide and show HTML elements:
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
grammar:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
The optional speed parameter predetermined speed hide / display can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of hide or display function after the completion of the execution.
The following example demonstrates the hide with the speed parameter () method:
Examples
$("button").click(function(){ $("p").hide(1000); });
jQuery toggle()
By jQuery, you can use the toggle () method to switch hide () and show () method.
Show the hidden elements, and hide displayed elements:
Examples
$("button").click(function(){ $("p").toggle(); });
grammar:
$(selector).toggle(speed,callback);
The optional speed parameter predetermined speed hide / display can take the following values: "slow", "fast" or milliseconds.
Optional callback parameter is a function name of the Toggle () method completes performed.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
another way:
I set it with a button to click to set two events, one click to hide, there is a double-click Display one second delay, of course, you can also use a method that depends on personal preference, so I am here just to write test code, because of the possible use of external JQuery files are not the same, so here you introduced yourself
code:
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//点击会隐藏
$("p").hide();
});
. $ ( "# btn1") DblClick (function () {
// hide displayed after completion of double-clicking, one second delay
$ ( "P") Show (1000);.
})
});
</ Script>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id="btn1">BTN1</button>
</body>