SeouliteLab

jQuery .hide() 메서드의 활용 예제와 설명 본문

프로그래밍

jQuery .hide() 메서드의 활용 예제와 설명

Seoulite Lab 2024. 4. 1. 08:44

jQuery의 .hide() 메서드는 선택한 요소를 숨김 처리합니다. 이를 통해 웹 페이지에서 요소를 숨기거나 감추는데 사용됩니다. .hide() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 요소 숨기기

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

<div id="box">이 요소가 숨겨집니다.</div>

<script>
  $(document).ready(function() {
    $("#box").hide(); // 요소를 숨김 처리
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 숨김 처리합니다.

예제 2: 요소 숨긴 후 콜백 함수 실행

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

<div id="box">이 요소가 숨겨집니다.</div>

<script>
  $(document).ready(function() {
    $("#box").hide("slow", function() {
      alert("요소가 성공적으로 숨겨졌습니다."); // 숨김 처리 후 콜백 함수 실행
    });
  });
</script>

</body>
</html>

위 코드에서는 요소를 숨김 처리한 후에 알림창이 뜨도록 설정되어 있습니다.

예제 3: 여러 요소 숨기기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hide() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

<script>
  $(document).ready(function() {
    $(".circle").hide(); // 모든 circle 클래스를 가진 요소를 숨김 처리
  });
</script>

</body>
</html>

위 코드에서는 클래스가 "circle"인 모든 요소를 숨김 처리합니다.

.hide() 메서드는 선택한 요소를 숨김 처리합니다. 이 메서드를 사용하면 웹 페이지에서 요소를 감추거나 숨길 수 있습니다.

위 예제들에서는 다양한 상황에서 .hide() 메서드를 사용하여 요소를 숨기는 방법을 살펴보았습니다.

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

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

jQuery jQuery.fx.off 속성 이해와 활용 예제  (0) 2024.04.01
jQuery.fx.interval 속성 이해와 활용 예제  (0) 2024.04.01
jQuery .finish() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeToggle() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeTo() 메서드의 활용 예제와 설명  (0) 2024.04.01
'프로그래밍' Related Articles more