本节咱们来学习如何应用 jQuery 中的办法来实现元素的显示与暗藏效。
hide()办法
hide() 办法用于暗藏指定的元素，与 CSS 中的 display:none 成果相似。
语法如下所示：
$(selector).hide(speed,easing,callback)speed：可选，规定暗藏成果的速度。可选值为slow、fast、毫秒。easing：可选，规定在动画的不同点上元素的速度，可选值为swing、linear。callback：可选，hide()办法执行完之后，要执行的函数。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(".fruit").hide('slow','linear');
});
});
</script>
</head>
<body>
<div>
<button>暗藏上面内容</button>
<div class="fruit">
<p>我喜爱的水果：</p>
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
</html>在浏览器中的演示成果：
show()办法
show() 办法用于显示暗藏的指定元素。与 CSS 中 display:none 的成果相似。
语法如下所示：
$(selector).show(speed,easing,callback)show() 办法中的参数和 hide() 办法中参数相似。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".hide").click(function(){
$(".fruit").hide('slow','linear');
});
$(".show").click(function(){
$(".fruit").show('slow','linear');
});
});
</script>
</head>
<body>
<div>
<button class="hide">暗藏上面内容</button>
<button class="show">显示上面内容</button>
<div class="fruit">
<p>我喜爱的水果：</p>
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
</html>在浏览器中的演示成果：
toggle()办法
下面示例中咱们在实现显示和暗藏成果时，须要应用两个按钮别离管制。那么有没有方法只通过一个按钮就能够实现显示和暗藏成果呢。这就须要用到 toggle() 办法了，toggle() 办法能够用于切换 hide() 和 show() 办法。
语法如下所示：
$(selector).toggle(speed,callback,switch)speed：可选，规定元素从可见到暗藏的速度，可选值又slow、normal、fast、毫秒。callback：可选，toggle函数执行完之后，要执行的函数。switch：可选，规定toggle是否暗藏或显示所有被选元素。True示意显示所有元素，False示意暗藏所有元素。如果设置此参数，则无奈应用speed和callback参数。
示例：
例如实现上述示例成果，咱们只须要像上面这样写即可，次要是批改 jQuery 代码局部：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".toggle").click(function(){
$(".fruit").toggle(1000);
});
});
</script>
</head>
<body>
<div>
<button class="toggle">切换显示与暗藏</button>
<div class="fruit">
<p>我喜爱的水果：</p>
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
<li>哈密瓜</li>
</ul>
</div>
</div>
</body>
</html>在浏览器中的演示成果：
咱们来看一下区别，应用 show() 和 hide() 办法须要的代码：
$(function(){
$(".hide").click(function(){
$(".fruit").hide('slow','linear');
});
$(".show").click(function(){
$(".fruit").show('slow','linear');
});
});应用 toggle() 办法须要的代码：
$(function(){
$(".toggle").click(function(){
$(".fruit").toggle(1000);
});
});所以很显著，在须要实现暗藏和显示两种成果互相切换时，应用 toggle() 办法是很不便的。
链接：https://www.9xkd.com/
发表回复