SeouliteLab

jQuery .show() 메서드 이해와 활용 예제 본문

프로그래밍

jQuery .show() 메서드 이해와 활용 예제

Seoulite Lab 2024. 4. 1. 08:50

jQuery의 .show() 메서드는 숨겨진 요소를 화면에 보여줍니다. 이를 통해 웹 페이지에서 요소의 가시성을 제어할 수 있습니다. .show() 메서드의 사용법과 함께 몇 가지 예제를 살펴보겠습니다.

예제 1: 기본적인 요소의 화면 표시

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .show() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .hidden {
      display: none; /* 숨김 상태로 설정 */
    }
  </style>
</head>
<body>

<div id="box" class="hidden">이 요소는 숨겨져 있습니다.</div>
<button id="showBtn">요소 보이기</button>

<script>
  $(document).ready(function() {
    $("#showBtn").click(function() {
      $("#box").show(); // 숨겨진 요소를 화면에 보여줌
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 숨겨진 요소를 화면에 보여줍니다.

예제 2: 다양한 요소의 화면 표시

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .show() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="hidden" id="box1">요소 1</div>
<div class="hidden" id="box2">요소 2</div>
<div class="hidden" id="box3">요소 3</div>
<button id="showBtn">모든 요소 보이기</button>

<script>
  $(document).ready(function() {
    $("#showBtn").click(function() {
      $(".hidden").show(); // 숨겨진 모든 요소를 화면에 보여줌
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 숨겨진 모든 요소를 화면에 보여줍니다.

예제 3: 애니메이션 효과와 함께 요소 보이기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .show() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .hidden {
      display: none; /* 숨김 상태로 설정 */
    }
  </style>
</head>
<body>

<div id="box" class="hidden">이 요소는 숨겨져 있습니다.</div>
<button id="showBtn">요소 보이기</button>

<script>
  $(document).ready(function() {
    $("#showBtn").click(function() {
      $("#box").show("slow"); // 숨겨진 요소를 천천히 화면에 보여줌
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 숨겨진 요소를 천천히 화면에 보여줍니다.

.show() 메서드는 숨겨진 요소를 화면에 표시합니다. 요소가 이미 화면에 보이는 상태이면 아무런 변화가 없습니다. .show() 메서드는 CSS의 display 속성을 변경하여 요소를 화면에 보이게 만듭니다.

위 예제들에서는 .show() 메서드를 사용하여 숨겨진 요소를 화면에 보여주는 방법을 살펴보았습니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .slideToggle() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideDown() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery.speed 속성을 활용한 애니메이션 속도 제어  (0) 2024.04.01
jQuery jQuery.fx.off 속성 이해와 활용 예제  (0) 2024.04.01
jQuery.fx.interval 속성 이해와 활용 예제  (0) 2024.04.01
'프로그래밍' Related Articles more