jQuery UI 实例 - 显示（Show）
jQuery UI实例 - 显示（Show）
介绍
jQuery UI是一个基于jQuery的用户界面库，提供了一系列的插件和组件，包括了accordion、datepicker、dialog、slider等。其中，显示（Show）组件则是在页面上展示或隐藏某个元素的组件。
准备工作
在使用jQuery UI之前，需要先引入jQuery和jQuery UI的库文件。
<!-- 引入jQuery库文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery UI库文件 -->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<!-- 引入jQuery UI样式 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
基本用法
显示（Show）组件的基本用法是通过调用.show()方法来展示某个元素。例如，如果我们有一个按钮和一个段落元素，当点击按钮时展示这个段落元素，可以通过如下代码实现：
<button id="showBtn">点击展示</button>
<p id="showText" style="display:none">这是要展示的文本。</p>
<script>
$(document).ready(function () {
$("#showBtn").click(function () {
$("#showText").show();
});
});
</script>
在上面的代码中，我们先将段落元素的CSS样式设置为display:none，即初始时隐藏。然后，通过jQuery选择器选择按钮元素，并调用它的click事件，当点击按钮时调用.show()方法将段落元素显示出来。
同样地，也可以使用.hide()方法将元素隐藏起来。
动画效果
通过为.show()方法传递参数，可以实现一些动画效果。例如，可以通过以下代码来实现一个淡入效果：
<button id="fadeInBtn">淡入效果</button>
<p id="fadeInText" style="display:none">这是要展示的文本。</p>
<script>
$(document).ready(function () {
$("#fadeInBtn").click(function () {
$("#fadeInText").fadeIn();
});
});
</script>
在上面的代码中，我们使用.fadeIn()方法来实现淡入效果。同样地，还有.fadeOut()方法来实现淡出效果。
回调函数
.show()方法还支持使用回调函数。回调函数即在.show()方法执行完毕后，需要执行的另一个函数。例如，以下代码实现了一个在展示文本后，在控制台输出一段文字的功能：
<button id="callbackBtn">点击展示</button>
<p id="callbackText" style="display:none">这是要展示的文本。</p>
<script>
$(document).ready(function () {
$("#callbackBtn").click(function () {
$("#callbackText").show(function () {
console.log("我被展示出来了！");
});
});
});
</script>
在上面的代码中，我们通过在.show()方法中传入一个回调函数来在展示文本后输出一段文字。
总结
.show()方法是jQuery UI中实现显示（Show）功能的一个方法，支持基本用法和动画效果，同时还支持回调函数。在实际开发中，可以根据需要灵活使用，提升用户交互效果和用户体验。