<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery hide() 方法说明</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #2980b9;
}
.example-box {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin: 20px 0;
}
.hidden-element {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
margin: 20px 0;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #2980b9;
}
.reference {
margin-top: 30px;
font-style: italic;
color: #7f8c8d;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>jQuery hide() 方法详解</h1>
<p>jQuery 的 <code>hide()</code> 方法用于隐藏选中的 HTML 元素。这是 jQuery 中最常用的效果方法之一。</p>
<h2>基本语法</h2>
<div class="example-box">
<pre><code>$(selector).hide(speed, easing, callback);</code></pre>
</div>
<h2>参数说明</h2>
<ul>
<li><strong>speed</strong> (可选): 指定隐藏动画的速度,可以是 "slow"、"fast" 或毫秒数值。</li>
<li><strong>easing</strong> (可选): 指定动画在不同点的速度,默认是 "swing"。</li>
<li><strong>callback</strong> (可选): 隐藏完成后执行的函数。</li>
</ul>
<h2>示例</h2>
<div class="example-box">
<div id="boxToHide" class="hidden-element">我会被隐藏的元素</div>
<button id="hideBtn">隐藏元素</button>
<button id="showBtn">显示元素</button>
<button id="toggleBtn">切换显示/隐藏</button>
<script>
$(document).ready(function(){
$("#hideBtn").click(function(){
$("#boxToHide").hide("slow");
});
$("#showBtn").click(function(){
$("#boxToHide").show("fast");
});
$("#toggleBtn").click(function(){
$("#boxToHide").toggle(1000);
});
});
</script>
</div>
<h2>注意事项</h2>
<ol>
<li>hide() 方法只是设置元素的 CSS <code>display</code> 属性为 "none"。</li>
<li>隐藏的元素不会占用页面空间。</li>
<li>可以使用 show() 方法重新显示被隐藏的元素。</li>
<li>toggle() 方法可以在显示和隐藏状态之间切换。</li>
</ol>
<div class="reference">
</div>
</body>
</html>
jQuery hide() 方法说明
于 2025-05-24 17:12:34 首次发布