jQuery(4)——jQuery hide、show方法的简单了解

最新推荐文章于 2025-06-24 10:55:52 发布

原创最新推荐文章于 2025-06-24 10:55:52 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #hide #show #toggle #hide原理

jQuery学习专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了jQuery中hide、show及toggle方法的使用，包括语法、参数说明及实际应用示例，揭示了这些方法如何通过修改CSS属性实现元素的隐藏与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery hide、show方法的简单了解

jQuery 效果- 隐藏和显示

jQuery 效果- 隐藏和显示在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用
toggle() 方法能够切换 hide() 和 show() 方法。

语法

$(selector).hide(speed,callback);                
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

根据demo:

 $("#hide").click(
                function(){
                    $("#test").hide();
                }
            )
            $("#show").click(
                function(){
                    $("#test").show();
                }
            )

hide和show方法实现，F12下：
为元素添加/去除css属性：display: none; 来实现的。

<div id="test" style="display: none;"></div>

有意思的是，当加入了入参(speed）之后，需要变换的css属性就多了，如下图：

test2

首先一个overflow:hidden 接着是width，height，padding，margin，opacity ,当点击显示/隐藏的时候，能看到width,height,opacity(透明度)从0到原大小的变换（或反之）。

toggle

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

语法

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
可选的 callback 参数，具有以下三点说明：
1. $(selector)选中的元素的个数为n个，则callback函数会执行n次
2. callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
3. callback既可以是函数名，也可以是匿名函数

测试demo中，有callback的体现

 //toggle()方法测试
            $("#hide-show-toggle").click(
                function(){
                    $("#test3").toggle("slow");
                }
            )

测试demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery hide-show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(){

            $("#hide").click(
                function(){
                    $("#test").hide();
                }
            )
            $("#show").click(
                function(){
                    $("#test").show();
                }
            )
            /**
            带参数的hide,show测试
            hide(speed,callback); 
            show(speed,callback); 
            //speed为完成效果的时间，单位毫秒，callback为执行完成后所执行的方法，两个参数可以单独出现
            **/
            function callback(){
                console.log("success!")
            }
            $("#hide_var").click(
                function(){
                    $("#test2").hide(1000,callback());
                }
            )
            $("#show_var").click(
                function(){
                    $("#test2").show(1000,callback);
                }
            )
            
                //toggle()方法测试
                $("#hide-show-toggle").click(
                    function(){
                        $("#test3").toggle("slow");
                    }
                )

        })
    </script>
    <style>
        .box{
            width: 300px;
            margin:0 auto;
            border: 2px solid green;
        }
        #test,#test2,#test3{
            width:296px;
            height: 100px;
            margin:0 auto;
            border: 2px solid red;
            background-color: rgb(250, 205, 80);
        }
    </style>
</head>
<body>
    <div class="box">
        <input id="hide" type="button" value="隐藏">
        <input id="show" type="button" value="显示">
        <div id="test"></div>
    </div>
    <div class="box">
        <input id="hide_var" type="button" value="隐藏">
        <input id="show_var" type="button" value="显示">
        <div id="test2"></div>
    </div>
    <div class="box">
            <input id="hide-show-toggle" type="button" value="隐藏/显示">
            <div id="test3"></div>
        </div>

</body>
</html>

demo预览:

width="100%" height="300" scrolling="no" title="hide-show" src="//codepen.io/liantao/embed/OBPrQP/?height=300&theme-id=34712&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen hide-show by 练涛 ( @liantao) on CodePen.

See the Pen hide-show by 练涛 (@liantao) on CodePen.