jquery隐藏显示和切换示例
时间：2020-02-23 14:46:09 来源:igfitidea点击:
在本教程中，我们将看到jQuery隐藏，显示和切换示例。
jquery hide()
它用于隐藏匹配的元素。
使用jQuery，我们可以使用隐藏方法隐藏元素示例：
$("#hide").click(function(){
$("p").hide();
});
语法 ：
$(selector).hide(speed,callback);
可选的速度参数用于指定隐藏的速度，可以采用以下值："slow"，"fast"或者毫秒ms。
可选的回调参数是隐藏()方法完成后将执行的函数。
以下示例演示了使用hide()的速度参数：
$("button").click(function(){
$("p").hide(1000);
});
创建HTML文件作为jqueryhide.html
<!doctype>
<html>
<head>
<title>JQuery Toggle to Show/Hide Content</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery Toggle Example to Display and Hide Content</h2>
<style>
div{
border:3px dotted red;
color:red;
font-family: arial narrow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$(".mydiv").hide();
});
});
</script>
<body>
<button id="button">Click to Hide Content</button>
<div class="mydiv">
<p>Hello world from theitroad!!!!</p>
<p>Welcome to JQuery.</p>
</div>
</body>
</html>
jquery show()
它用于显示匹配的元素。
使用jQuery，我们可以使用show方法显示元素示例：
$("#hide").click(function(){
$("p").show();
});
语法 ：
$(selector).show(speed,callback);
可选的速度参数用于指定显示的速度，可以采用以下值："slow"，"fast"或者毫秒ms。
可选的回调参数是在show()方法完成后将执行的函数。
以下示例演示了Show()的速度参数：
$("button").click(function(){
$("p").show(1000);
});
创建HTML文件作为jQueryShow.html
<!doctype>
<html>
<head>
<title>JQuery Toggle to Show/Hide Content</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery Toggle Example to Display and Hide Content</h2>
<style>
div{
border:3px dotted red;
color:red;
font-family: arial narrow;
display : none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$(".mydiv").show();
});
});
</script>
<body>
<button id="button">Click to Show Content</button>
<div class="mydiv">
<p>Hello world from theitroad!!!!</p>
<p>Welcome to JQuery.</p>
</div>
</body>
</html>
jquery toggle()
使用jQuery，我们可以使用Toggle()方法在Hide()和show()方法之间切换。
显示的元素是隐藏和隐藏元素显示：示例：
$("button").click(function(){
$("p").toggle();
});
语法：
$(selector).toggle(speed,callback);
可选的速度参数可以采用以下值："slow"，"fast"或者毫秒ms。
可选的回调参数是切换()完成后要执行的函数。
例子：
<!doctype>
<html>
<head>
<title>JQuery Toggle to Show/Hide Content</title>
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<h2>Jquery Toggle Example to Display and Hide Content</h2>
<style>
div{
border:3px dotted red;
color:red;
font-family: arial narrow;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#mybutton").click(function(){
$(".mydiv").toggle();
});
});
</script>
<body>
<button id="mybutton">Click to Show/Hide Content</button>
<div class="mydiv">
<p>Hello world from theitroad!!!!</p>
<p>Welcome to JQuery.</p>
</div>
</body>
</html>
