hide()와 show()

jquery

by 헬로제이콥 2024. 12. 5. 17:07

hide()와 show() 메서드 설명 및 예제

hide() 메서드

hide() 메서드는 jQuery에서 선택된 요소를 화면에서 숨기는 데 사용됩니다. 이 메서드는 선택된 요소의 display 속성을 none으로 설정하여 요소를 화면에서 완전히 제거한 것처럼 보이게 합니다.

예제:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>hide() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="myParagraph">이 단락은 숨겨질 것입니다.</p>
  <button id="hideButton">숨기기</button>
  <script>
    $(document).ready(function(){
      $("#hideButton").click(function(){
        $("#myParagraph").hide();
      });
    });
  </script>
</body>
</html>

코드를 사용할 때는 주의가 필요합니다.

위 예제에서는 버튼을 클릭하면 id가 "myParagraph"인 <p> 태그가 숨겨집니다. 즉, 화면에서 완전히 사라지게 됩니다.

show() 메서드

show() 메서드는 hide() 메서드와 반대로, 숨겨진 요소를 다시 화면에 보이게 하는 데 사용됩니다. 이 메서드는 선택된 요소의 display 속성을 block으로 설정하여 요소를 다시 화면에 표시합니다.

예제:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>show() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #hiddenParagraph {
      display: none; /* 처음부터 숨겨진 상태 */
    }
  </style>
</head>
<body>
  <p id="hiddenParagraph">처음에는 숨겨진 단락</p>
  <button id="showButton">보이기</button>
  <script>
    $(document).ready(function(){
      $("#showButton").click(function(){
        $("#hiddenParagraph").show();
      });
    });
  </script>
</body>
</html>

코드를 사용할 때는 주의가 필요합니다.

위 예제에서는 처음부터 display: none으로 설정되어 숨겨진 <p> 태그를 버튼을 클릭하면 다시 화면에 보이게 합니다.

참고:

toggle() 메서드: hide()와 show() 메서드를 번갈아 실행하는 효과를 내는 메서드입니다.
fadeTo(), fadeIn(), fadeOut() 메서드: 요소를 서서히 숨기거나 나타내는 애니메이션 효과를 제공합니다.
slideUp(), slideDown(), slideToggle() 메서드: 요소를 위아래로 슬라이드하며 숨기거나 나타내는 애니메이션 효과를 제공합니다.

요약

hide() 메서드는 선택된 요소를 화면에서 숨깁니다.
show() 메서드는 숨겨진 요소를 다시 화면에 보이게 합니다.
두 메서드 모두 선택된 요소의 display 속성을 변경하여 동작합니다.

활용 예시:

특정 조건에 따라 요소를 숨기거나 보이게 하여 동적인 웹 페이지를 구현할 수 있습니다.
사용자의 행동에 따라 콘텐츠를 보여주거나 숨길 수 있습니다.
애니메이션 효과와 함께 사용하여 더욱 다양한 표현을 할 수 있습니다.

주의:

hide() 메서드로 숨겨진 요소는 여전히 DOM에 존재하며, show() 메서드로 다시 보이게 할 수 있습니다.
CSS의 visibility 속성을 사용하여 요소를 숨기는 방법도 있지만, hide() 메서드와는 약간 다른 동작을 합니다.

'jquery' 카테고리의 다른 글

jQuery의 animate()와 stop() (0)	2024.12.05
jQuery의 slideDown(), slideUp(), slideToggle() (0)	2024.12.05
jQuery의 fadeIn(), fadeOut(), fadeToggle() (0)	2024.12.05
제이쿼리 선택자 (2)	2024.12.05
jquery 란 ? (0)	2024.12.05