jquery如何让一个div隐藏和显示

发布时间：2022-06-16 10:09:51 作者：iii
来源：亿速云阅读：1968

jQuery如何让一个div隐藏和显示

在前端开发中，控制元素的显示和隐藏是一个非常常见的需求。jQuery功能强大且易于使用的JavaScript库，提供了多种方法来实现这一功能。本文将详细介绍如何使用jQuery来控制一个div元素的显示和隐藏。

1. 使用`hide()`和`show()`方法

jQuery提供了hide()和show()方法，分别用于隐藏和显示元素。

1.1 `hide()`方法

hide()方法用于隐藏选中的元素。调用该方法后，元素将从页面中消失，但仍然存在于DOM中。

$("#myDiv").hide();

1.2 `show()`方法

show()方法用于显示被隐藏的元素。调用该方法后，元素将重新出现在页面中。

$("#myDiv").show();

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Hide and Show</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;">
        这是一个div
    </div>
    <button id="hideButton">隐藏</button>
    <button id="showButton">显示</button>

    <script>
        $(document).ready(function() {
            $("#hideButton").click(function() {
                $("#myDiv").hide();
            });

            $("#showButton").click(function() {
                $("#myDiv").show();
            });
        });
    </script>
</body>
</html>

在这个示例中，点击“隐藏”按钮时，#myDiv会被隐藏；点击“显示”按钮时，#myDiv会重新显示。

2. 使用`toggle()`方法

toggle()方法可以在隐藏和显示之间切换元素的状态。如果元素当前是可见的，调用toggle()会隐藏它；如果元素当前是隐藏的，调用toggle()会显示它。

$("#myDiv").toggle();

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Toggle</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;">
        这是一个div
    </div>
    <button id="toggleButton">切换</button>

    <script>
        $(document).ready(function() {
            $("#toggleButton").click(function() {
                $("#myDiv").toggle();
            });
        });
    </script>
</body>
</html>

在这个示例中，点击“切换”按钮时，#myDiv会在显示和隐藏之间切换。

3. 使用`fadeIn()`和`fadeOut()`方法

除了简单的显示和隐藏，jQuery还提供了fadeIn()和fadeOut()方法，可以实现淡入淡出的效果。

3.1 `fadeOut()`方法

fadeOut()方法会逐渐将元素的透明度降低，直到元素完全隐藏。

$("#myDiv").fadeOut();

3.2 `fadeIn()`方法

fadeIn()方法会逐渐将元素的透明度增加，直到元素完全显示。

$("#myDiv").fadeIn();

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Fade In and Out</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;">
        这是一个div
    </div>
    <button id="fadeOutButton">淡出</button>
    <button id="fadeInButton">淡入</button>

    <script>
        $(document).ready(function() {
            $("#fadeOutButton").click(function() {
                $("#myDiv").fadeOut();
            });

            $("#fadeInButton").click(function() {
                $("#myDiv").fadeIn();
            });
        });
    </script>
</body>
</html>

在这个示例中，点击“淡出”按钮时，#myDiv会逐渐消失；点击“淡入”按钮时，#myDiv会逐渐显示。

4. 使用`slideUp()`和`slideDown()`方法

slideUp()和slideDown()方法可以实现元素的滑动效果。

4.1 `slideUp()`方法

slideUp()方法会将元素从下往上滑动，直到元素完全隐藏。

$("#myDiv").slideUp();

4.2 `slideDown()`方法

slideDown()方法会将元素从上往下滑动，直到元素完全显示。

$("#myDiv").slideDown();

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Slide Up and Down</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;">
        这是一个div
    </div>
    <button id="slideUpButton">上滑</button>
    <button id="slideDownButton">下滑</button>

    <script>
        $(document).ready(function() {
            $("#slideUpButton").click(function() {
                $("#myDiv").slideUp();
            });

            $("#slideDownButton").click(function() {
                $("#myDiv").slideDown();
            });
        });
    </script>
</body>
</html>

在这个示例中，点击“上滑”按钮时，#myDiv会从下往上滑动并隐藏；点击“下滑”按钮时，#myDiv会从上往下滑动并显示。

5. 使用`css()`方法

除了上述方法，还可以直接使用css()方法来控制元素的display属性，从而实现显示和隐藏。

5.1 隐藏元素

$("#myDiv").css("display", "none");

5.2 显示元素

$("#myDiv").css("display", "block");

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CSS Display</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;">
        这是一个div
    </div>
    <button id="hideButton">隐藏</button>
    <button id="showButton">显示</button>

    <script>
        $(document).ready(function() {
            $("#hideButton").click(function() {
                $("#myDiv").css("display", "none");
            });

            $("#showButton").click(function() {
                $("#myDiv").css("display", "block");
            });
        });
    </script>
</body>
</html>

在这个示例中，点击“隐藏”按钮时，#myDiv会被隐藏；点击“显示”按钮时，#myDiv会重新显示。

6. 总结

通过以上几种方法，我们可以轻松地使用jQuery来控制div元素的显示和隐藏。每种方法都有其适用的场景，开发者可以根据具体需求选择合适的方法来实现效果。无论是简单的显示隐藏，还是带有动画效果的淡入淡出、滑动效果，jQuery都提供了简洁易用的API来帮助我们实现这些功能。

jquery如何让一个div隐藏和显示

jQuery如何让一个div隐藏和显示

1. 使用hide()和show()方法

1.1 hide()方法

1.2 show()方法

示例代码

2. 使用toggle()方法

示例代码

3. 使用fadeIn()和fadeOut()方法

3.1 fadeOut()方法

3.2 fadeIn()方法

示例代码

4. 使用slideUp()和slideDown()方法

4.1 slideUp()方法

4.2 slideDown()方法

示例代码

5. 使用css()方法

5.1 隐藏元素

5.2 显示元素

示例代码

6. 总结

相关阅读

1. 使用`hide()`和`show()`方法

1.1 `hide()`方法

1.2 `show()`方法

2. 使用`toggle()`方法

3. 使用`fadeIn()`和`fadeOut()`方法

3.1 `fadeOut()`方法

3.2 `fadeIn()`方法

4. 使用`slideUp()`和`slideDown()`方法

4.1 `slideUp()`方法

4.2 `slideDown()`方法

5. 使用`css()`方法