SeouliteLab

jQuery의 :hidden 선택자 활용하기 본문

프로그래밍

jQuery의 :hidden 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:06

jQuery의 :hidden 선택자는 화면에 표시되지 않는(hidden) 요소를 선택하는 데 사용됩니다. 이를 활용하여 웹 페이지에서 숨겨진 요소를 선택하고 조작할 수 있습니다.

예제 1: 숨겨진 요소에 스타일 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>숨겨진 요소에 스타일 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":hidden").css("color", "red");
    });
  </script>
</head>
<body>
  <div style="display: none;">이 요소는 숨겨져 있습니다.</div>
  <span style="visibility: hidden;">이 요소도 숨겨져 있습니다.</span>
  <input type="hidden" value="숨겨진 입력 필드">
</body>
</html>

설명: 위 예제는 숨겨진 요소들의 텍스트 색상을 빨간색으로 변경합니다.

예제 2: 숨겨진 요소를 나타내기

<!DOCTYPE html>
<html>
<head>
  <title>숨겨진 요소를 나타내기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#showButton").click(function(){
        $(":hidden").show();
      });
    });
  </script>
</head>
<body>
  <div style="display: none;">이 요소는 숨겨져 있습니다.</div>
  <span style="visibility: hidden;">이 요소도 숨겨져 있습니다.</span>
  <input type="hidden" value="숨겨진 입력 필드">
  <button id="showButton">숨겨진 요소 보이기</button>
</body>
</html>

설명: 이 예제는 숨겨진 요소를 보이도록 변경하는 버튼을 클릭했을 때 숨겨진 요소들을 나타냅니다.

예제 3: 숨겨진 요소 제거하기

<!DOCTYPE html>
<html>
<head>
  <title>숨겨진 요소 제거하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#removeButton").click(function(){
        $(":hidden").remove();
      });
    });
  </script>
</head>
<body>
  <div style="display: none;">이 요소는 숨겨져 있습니다.</div>
  <span style="visibility: hidden;">이 요소도 숨겨져 있습니다.</span>
  <input type="hidden" value="숨겨진 입력 필드">
  <button id="removeButton">숨겨진 요소 제거하기</button>
</body>
</html>

설명: 이 예제는 숨겨진 요소들을 제거하는 버튼을 클릭했을 때 숨겨진 요소들을 제거합니다.

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

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

jQuery의 :image 선택자 활용하기  (0) 2024.04.12
jQuery의 ID 선택자 ("#id") 활용하기  (0) 2024.04.12
jQuery의 :header 선택자 활용하기  (0) 2024.04.12
jQuery의 :has() 선택자 활용하기  (0) 2024.04.12
jQuery의 속성 선택자 [name] 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more