📅 最后修改于: 2023-12-03 14:43:11.586000 🧑 作者: Mango
jQuery是一个非常受欢迎的JavaScript库，它简化了DOM操作、AJAX请求和事件处理等任务。其中，show()方法是jQuery中最常用的方法之一。
show()方法用于显示被选元素。它通过将元素样式的"display"属性设置为"block"，使元素变为可见状态。
$(selector).show(speed, callback);
selector：必需，用于指定被选择的元素。speed：可选，规定显示/隐藏的速度。可以是"slow"，"normal"和"fast"，也可以是以毫秒为单位的数字。默认值为0。callback：可选，规定当show()方法完成后要执行的函数。以下示例演示了如何使用show()方法显示一个被选择的元素：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button>显示段落</button>
<p style="display:none;">这是一个段落。</p>
</body>
</html>
在上面的代码中，使用show()方法来显示一个被选择的段落元素($("p"))，并且这个元素的"dislay"属性最初被设置为"none"来隐藏它。
以下示例展示了如何使用show()方法来动画地显示一个元素：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").show(1000);
});
});
</script>
<style>
p {
background-color: yellow;
border: 1px solid black;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<button>显示段落</button>
<p style="display:none;">这是一个段落。</p>
<p style="display:none;">这是另一个段落。</p>
</body>
</html>
在上面的代码中，给每个段落元素添加了背景颜色、边框和内边距，然后调用了show()方法来显示这些元素。使用1000毫秒的速度来实现一个1秒钟的动画效果。
以下示例展示了如何使用show()方法的可选回调函数：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").show("slow", function(){
alert("动画已经完成！");
});
});
});
</script>
</head>
<body>
<button>显示段落</button>
<p style="display:none;">这是一个段落。</p>
</body>
</html>
在上面的代码中，使用show()方法来显示一个被选择的段落元素，并使用了一个可选的回调函数，在动画完成后显示一个警告窗口。