jQuery에서 Div 요소 숨기기

Sheeraz Gul 2024년2월15일
jQuery에서 Div 요소 숨기기

hide()는 HTML 요소를 숨기는 데 사용되는 내장 jQuery 함수입니다. 이 튜토리얼은 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은 애니메이션의 다른 지점에서 요소의 속도를 지정하는 데 사용되는 선택적 매개 변수이며, 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 숨기기 메서드

작가: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

관련 문장 - jQuery Element