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 |
