jQuery基础显示隐藏是jQuery动画与特效模块的基础功能，通过show()、hide()、toggle()三个核心方法，可快速实现HTML元素的显示与隐藏操作，简化原生JavaScript的复杂代码，是jQuery开发中最常用的交互效果之一。jQuery显示与jQuery隐藏功能无需复杂的样式操作，仅通过简单的方法调用，即可灵活控制元素的可见状态，适配各类基础交互场景。
show()方法
show()方法用于显示被隐藏的HTML元素，若元素本身处于显示状态，调用该方法不会产生任何效果。该方法支持动画效果控制，可通过参数设置动画时长、过渡效果及回调函数，实现平滑的显示过渡，同时兼容jQuery各主流版本，是实现jQuery显示功能的核心方法。
语法
$(selector).show([speed][, easing][, complete]);参数说明：
speed（可选）：规定动画时长，取值可为数字（单位：毫秒）、预定义字符串（”slow”=600毫秒、”normal”=400毫秒、”fast”=200毫秒），省略时无动画，直接显示元素。
easing（可选）：规定动画过渡效果，默认值为”swing”（先慢后快再慢），另可取值”linear”（匀速），高级版本可扩展更多过渡效果。
complete（可选）：动画完成后执行的回调函数，无参数，仅在动画结束后触发一次。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery show()方法示例</title>
<script src="jquery.js"></script>
<style>
#target {
width: 200px;
height: 200px;
background-color: #f0f0f0;
display: none; /* 初始隐藏元素 */
margin: 20px 0;
}
button {
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="showBtn">显示元素</button>
<div id="target">被显示的目标元素</div>
<script>
// 点击按钮，通过show()方法显示隐藏的元素，设置动画时长500毫秒
$("#showBtn").click(function() {
$("#target").show(500, "linear", function() {
console.log("元素显示动画完成");
});
});
</script>
</body>
</html>hide()方法
hide()方法用于隐藏当前显示的HTML元素，若元素本身处于隐藏状态，调用该方法无效果。与show()方法语法完全一致，仅功能相反，通过控制元素的display属性实现隐藏，支持动画效果，是实现jQuery隐藏功能的核心方法，常与show()方法配合使用，实现元素的显示与隐藏切换场景。
语法
$(selector).hide([speed][, easing][, complete]);参数说明与show()方法完全一致：speed控制动画时长，easing控制过渡效果，complete为动画完成后的回调函数，省略所有参数时，元素将立即隐藏，无动画效果。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery hide()方法示例</title>
<script src="jquery.js"></script>
<style>
#target {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 20px 0;
}
button {
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="hideBtn">隐藏元素</button>
<div id="target">被隐藏的目标元素</div>
<script>
// 点击按钮，通过hide()方法隐藏显示的元素，使用预定义动画时长
$("#hideBtn").click(function() {
$("#target").hide("slow", function() {
console.log("元素隐藏动画完成");
});
});
</script>
</body>
</html>toggle()方法
toggle()方法是show()与hide()方法的组合，可实现元素显示与隐藏的切换功能：若元素当前处于显示状态，调用后将隐藏元素；若元素处于隐藏状态，调用后将显示元素。该方法同样支持动画参数，简化了显示与隐藏切换的代码量，是jQuery显示与隐藏交互中最便捷的方法。
语法
$(selector).toggle([speed][, easing][, complete]);参数说明与show()、hide()方法一致，同时支持额外的布尔参数（jQuery 1.3+版本）：toggle(showOrHide)，当参数为true时显示元素，为false时隐藏元素，省略参数时执行切换逻辑。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery toggle()方法示例</title>
<script src="jquery.js"></script>
<style>
#target {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 20px 0;
}
button {
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="toggleBtn">切换显示/隐藏</button>
<div id="target">切换显示隐藏的目标元素</div>
<script>
// 点击按钮，通过toggle()方法切换元素显示状态，设置动画时长300毫秒
$("#toggleBtn").click(function() {
$("#target").toggle(300, "swing");
});
// 额外示例：通过布尔参数强制显示元素
setTimeout(function() {
$("#target").toggle(true);
}, 2000);
</script>
</body>
</html>show()、hide()与toggle()方法对比
| 方法 | 核心功能 | 参数支持 | 适用场景 |
|---|---|---|---|
| show() | 显示隐藏的元素，无效果若元素已显示 | speed、easing、complete，无额外参数 | 仅需单独显示元素的场景，如按钮触发显示弹窗 |
| hide() | 隐藏显示的元素，无效果若元素已隐藏 | 与show()完全一致 | 仅需单独隐藏元素的场景，如关闭弹窗、隐藏冗余内容 |
| toggle() | 切换元素显示/隐藏状态，支持布尔参数强制控制 | 支持speed、easing、complete，额外支持布尔参数 | 显示与隐藏切换场景，如折叠面板、切换按钮 |
版本变更记录
| jQuery版本 | 变更内容 |
|---|---|
| 1.0+ | 新增show()、hide()方法，仅支持无参数调用，无动画效果 |
| 1.2+ | 为show()、hide()方法添加speed参数，支持动画效果 |
| 1.3+ | 新增toggle()方法，支持布尔参数控制显示/隐藏，完善easing参数支持 |
| 1.4+ | 为三个方法添加complete回调函数参数，优化动画流畅度 |
| 3.3+ | 废弃toggle()方法的布尔参数（仍可使用，但不推荐），推荐使用show()/hide()组合替代 |
| 4.0.0 | 保留show()、hide()、toggle()核心功能，移除内部冗余代码，优化动画性能，与ES模块适配 |
jQuery显示与jQuery隐藏功能通过show()、hide()、toggle()三个方法即可完整实现，无需复杂配置，兼顾简洁性与灵活性。在实际开发中，可根据场景选择合适的方法，配合动画参数实现平滑交互，同时需注意版本差异带来的参数变化，确保代码兼容性。