jQuery显示，隐藏，切换
之前，我们研究了如何使用jQuery get属性，今天，我们研究了三种有用的jQuery方法，可用于隐藏HTML元素，显示任何隐藏HTML元素并将其从"隐藏/显示"中切换出来。
这些方法在实际的网页中经常使用，您只需单击一下按钮即可查看数据。
再次单击，数据再次被隐藏。
现在让我们逐一研究这些方法。
jQuery隐藏
jQuery hide()方法用于隐藏html元素。
直到调用该元素的show()方法后，该元素才会显示。
我们可以通过多种方式使用hide()方法。
- hide();
此方法隐藏选定HTML元素。
这个jQuery hide方法不带任何参数。
- hide(速度);
参数"速度"决定了这种效果的持续时间。
- hide(速度，回调);
速度：确定此效果的持续时间。
通常使用字符串值，例如" slow"，" fast"和以毫秒为单位的数值。
回调：您可以指定在调用hide()方法之后要执行的操作。
- hide(速度，缓动，回调);
在此方法中，传递了一个另外的参数-" easing"。
这是一个字符串值。
" swing"和" linear"是用于指定在隐藏效果期间运行哪个缓动函数的两个值。
jQuery hide()示例
在下面的示例中，您可以看到jQuery hide()方法使用" fast"参数来隐藏<div>元素。
您可以使用" slow"之类的参数或者毫秒值(例如1000、2000等)。
<!DOCTYPE html>
<html>
<head>
<title> jQuery Hide </title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hideBtn").click(function(){
$("div").hide("fast");
});
});
</script>
</head>
<body>
<div>Hiding Div</div>
<button class="hideBtn">Hide</button>
</body>
</html>
jQuery hide()和回调示例
在此示例中，三个参数传递给hide()方法。
数值1000是隐藏效果的持续时间。
"线性"是使用的缓动函数。
还有一个回调方法也传递给hide方法。
在隐藏效果之后调用此方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() method is finished!");
});
});
});
</script>
</head>
<body>
<div> Hide and Call back</div>
<button class="hidebtn">Hide</button>
</body>
</html>
当需要隐藏某些HTML元素时，jQuery hide方法非常有用。
您可以根据需要选择带或者不带参数的适当hide()方法。
这是jQuery Web设计中非常方便的方法。
jQuery show
jQuery show()方法用于显示隐藏HTML元素。
我们可以通过多种方式使用show()方法。
- show();
此方法显示选定HTML元素。
此方法不带任何参数。
- show(速度);
参数"速度"决定了这种效果的持续时间。
- show(速度，回调);
速度：此参数确定此效果的持续时间。
通常使用字符串值，例如" slow"，" fast"和以毫秒为单位的数值。
回调：您可以指定在调用show()方法之后要执行的操作。
- show(速度，缓动，回调);
在此方法中，传递了一个附加参数-" easing"。
这是一个字符串值。
" swing"和" linear"是用于指定在显示所选元素期间运行哪个缓动功能的两个值。
jQuery show()示例
在下面的示例中，您可以看到show()方法使用参数" fast"来显示<div>元素。
<!DOCTYPE html>
<html>
<head>
<title> jQuery Show </title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hideBtn").click(function(){
$("div").hide("fast");
});
$(".showBtn").click(function(){
$("div").show("fast");
});
});
</script>
</head>
<body>
<div>Hide and Show - Speed</div>
<button class="hideBtn">Hide</button>
<button class="showBtn">Show</button>
</body>
</html>
jQuery显示和回调示例
在此示例中，三个参数传递给show()方法。
数值1000是显示效果的持续时间。
"线性"是使用的缓动函数。
还有一个回调方法也传递给show方法。
在显示<div>元素之后调用此方法。
<!DOCTYPE html>
<html>
<head>
<title> jQuery Show with callback</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"swing",function(){
alert("Hide() method is finished!");
});
});
$(".showbtn").click(function(){
$("div").show(1000,"swing",function(){
alert("Show() method is finished!");
});
});
});
</script>
</head>
<body>
<div> Hide and Show </div>
<button class="hidebtn">Hide</button>
<button class="showbtn">Show</button>
</body>
</html>
当您要显示隐藏HTML元素时，此方法非常有用。
您可以根据需要选择带或者不带参数的适当show()方法。
jQuery切换
jQuery toggle()方法用于更改以显示或者隐藏HTML元素。
当您想在所选HTML元素的隐藏和显示之间进行切换时，可以使用切换方法
我们可以通过多种方式使用jQuery toggle()方法。
- toggle();
此方法显示选定HTML元素。
此方法不带任何参数。
- toggle(速度);
参数"速度"决定了这种效果的持续时间。
- toggle(速度，回调);
速度：此参数确定此效果的持续时间。
通常使用字符串值，例如" slow"，" fast"和以毫秒为单位的数值。
回调：您可以指定在调用toggle()方法之后要执行的操作。
- toggle(速度，缓动，回调);
在此方法中，传递了一个附加参数-" easing"。
这是一个字符串值。
" swing"和" linear"是用于指定用于显示/隐藏哪个缓动功能的两个值。
jQuery toggle()示例
在下面的示例中，您可以看到toggle()方法使用参数" fast"在隐藏和显示选定的<div>元素之间进行切换。
<!DOCTYPE html>
<html>
<head>
<title> jQuery Toggle </title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".togglebtn").click(function(){
$("div").toggle("fast");
});
});
</script>
</head>
<body>
<div>Toggle - Speed</div>
<button class="togglebtn">Toggle</button>
</body>
</html>
jQuery切换和回调示例
在此示例中，三个参数传递给toggle()方法。
数值1000是显示效果的持续时间。
"线性"是使用的缓动函数。
还有一个回调方法也传递给toggle方法。
在<div>元素的隐藏和显示之间切换之后调用此方法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Toggle with callback</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".togglebtn").click(function(){
$("div").toggle(1000,"swing",function(){
alert("toggle() method is finished!");
});
});
});
</script>
</head>
<body>
<div> Toggle - Callback </div>
<button class="togglebtn">Toggle</button>
</body>
</html>
当您要在隐藏和显示HTML元素之间进行切换时，jQuery切换方法非常有用。
您可以根据需要选择适当的toggle()方法。
