[jQuery] .hide() .show() 메소드

형이·2023년 8월 17일

jQuery

목록 보기
6/14
post-thumbnail

📝 jQuery

🖥️ 1. .hide() .show() 메소드

  • .toggle() 메소드와 다르게 속도를 조절할 수 있다.
EX)

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
</head>
<body>
    <h1>.hide() .show() 메소드</h1>
    <p>
        <button id="btnHide">문장 숨기기</button>
        <button id="btnShow">문장 표시하기</button>
    </p>
    <div>안녕하세요. jQuery입니다.</div>
    <script>
        $("#btnHide").on("click", function(){
            $('div').hide(1000);
        })
        $("#btnShow").on("click", function(){
            $('div').show("fast");
        })
    </script>
</body>

🖥️ 2. .toggle() 메소드

  • .hide() .show() 메소드보다 코드가 간결하다.
EX) 

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
</head>
<body>
    <h1>.toggle() 메소드</h1>
    <p>
        <button id="btnToggle">문장토글</button>
    </p>
    <div>안녕하세요, jQuery입니다.</div>

    <script>
        $("#btnToggle").on("click", function(){
            $("div").toggle(1000);
        });
    </script>
</body>

0개의 댓글