隐藏 jQuery 中的 div 元素

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

隐藏 jQuery 中的 div 元素

作者：迹忆客最近更新：2023/03/13 浏览次数：

hide() 是一个内置的 jQuery 函数，用于隐藏 HTML 元素。本教程演示了如何在 jQuery 中使用 hide() 方法。

使用 jQuery 中的 `hide()` 方法隐藏 `div` 元素

hide() 方法用于隐藏 HTML 元素，其工作原理类似于 CSS display:none。一旦使用 hide 隐藏元素，在我们更改 CSS 或使用 show() 方法之前就无法再次看到它们。

语法：

$(selector).hide(speed,easing,callback)

selector 是 id、类或元素名称。Speed 是一个可选参数，用于指定隐藏效果的时间。

该值可以是 slow、fast 或 milliseconds；默认值为 400 毫秒。easing 也是一个可选参数，用于指定元素在动画不同点的速度；缓动的默认值为 swing；它可以更改为线性；这两个值有不同的效果，callback 参数也是一个可选函数，一旦 hide() 方法被执行，就会被执行。

让我们举一个不带任何参数使用 hide() 函数的示例。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#button1").click(function(){
            $("#box1").hide();
        });
        $("#button2").click(function(){
            $("#box2").hide();
        });
        $("#button3").click(function(){
            $("#box3").hide();
        });
        $("#button4").click(function(){
            $("#box4").hide();
        });
        $("#button5").click(function(){
            $("#box5").hide();
        });
    });
    </script>
</head>
<body>
    <h1>jQuery Hide() Method</h1>

    <div id="box1" style="width : 50px; height : 50px; display : block; background-color : pink;"> Div 1 </div> <br>
    <div id="box2" style="width : 50px; height : 50px; display : block; background-color : green;"> Div 2 </div> <br>
    <div id="box3" style="width : 50px; height : 50px; display : block; background-color : blue;"> Div 3 </div> <br>
    <div id="box4" style="width : 50px; height : 50px; display : block; background-color : violet;"> Div 4 </div> <br>
    <div id="box5" style="width : 50px; height : 50px; display : block; background-color : yellow;"> Div 5 </div> <br>

<button id="button1">Hide 1</button>
<button id="button2">Hide 2</button>
<button id="button3">Hide 3</button>
<button id="button4">Hide 4</button>
<button id="button5">Hide 5</button>

</body>
</html>

上面的代码将通过单击相应的按钮隐藏 div。

输出：

jQuery 隐藏方法

让我们尝试使用速度参数的相同示例。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#button1").click(function(){
            $("#box1").hide("slow");
        });
        $("#button2").click(function(){
            $("#box2").hide("fast");
        });
        $("#button3").click(function(){
            $("#box3").hide(500);
        });
        $("#button4").click(function(){
            $("#box4").hide(800);
        });
        $("#button5").click(function(){
            $("#box5").hide(1000);
        });
    });
    </script>
</head>
<body>
    <h1>jQuery Hide() Method</h1>

    <div id="box1" style="width : 50px; height : 50px; display : block; background-color : pink;"> Div 1 </div> <br>
    <div id="box2" style="width : 50px; height : 50px; display : block; background-color : green;"> Div 2 </div> <br>
    <div id="box3" style="width : 50px; height : 50px; display : block; background-color : blue;"> Div 3 </div> <br>
    <div id="box4" style="width : 50px; height : 50px; display : block; background-color : violet;"> Div 4 </div> <br>
    <div id="box5" style="width : 50px; height : 50px; display : block; background-color : yellow;"> Div 5 </div> <br>

<button id="button1">Hide 1</button>
<button id="button2">Hide 2</button>
<button id="button3">Hide 3</button>
<button id="button4">Hide 4</button>
<button id="button5">Hide 5</button>

</body>
</html>

该代码将隐藏具有给定速度和摆动缓动的 div。

输出：

jQuery 快速隐藏方法

让我们看看回调参数是如何工作的。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#button1").click(function(){
            $("#box1").hide("slow", function(){
                alert("Div 1 is hidden");
                });
        });
        $("#button2").click(function(){
            $("#box2").hide("fast", function(){
                alert("Div 2 is hidden");
                });
        });
        $("#button3").click(function(){
            $("#box3").hide(500, function(){
                alert("Div 3 is hidden");
                });
        });
        $("#button4").click(function(){
            $("#box4").hide(800, function(){
                alert("Div 4 is hidden");
                });
        });
        $("#button5").click(function(){
            $("#box5").hide(1000, function(){
                alert("Div 5 is hidden");
                });
        });
    });
    </script>
</head>
<body>
    <h1>jQuery Hide() Method</h1>

    <div id="box1" style="width : 50px; height : 50px; display : block; background-color : pink;"> Div 1 </div> <br>
    <div id="box2" style="width : 50px; height : 50px; display : block; background-color : green;"> Div 2 </div> <br>
    <div id="box3" style="width : 50px; height : 50px; display : block; background-color : blue;"> Div 3 </div> <br>
    <div id="box4" style="width : 50px; height : 50px; display : block; background-color : violet;"> Div 4 </div> <br>
    <div id="box5" style="width : 50px; height : 50px; display : block; background-color : yellow;"> Div 5 </div> <br>

<button id="button1">Hide 1</button>
<button id="button2">Hide 2</button>
<button id="button3">Hide 3</button>
<button id="button4">Hide 4</button>
<button id="button5">Hide 5</button>

</body>
</html>

每次隐藏 div 时，上面的代码都会提醒 div 编号。

输出：

带有回调的 JQuery 隐藏方法

上一篇：在 jQuery 中设置输入值

下一篇：jQuery indexof() 方法

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享