jQuery hide() 方法说明

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值