SeouliteLab

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

프로그래밍

jQuery의 :header 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:05

jQuery의 :header 선택자는 문서 내에서 제목(heading) 요소를 선택하는 데 사용됩니다. 이를 활용하여 웹 페이지에서 제목 요소를 선택하고 스타일을 변경하거나 이벤트를 추가할 수 있습니다.

예제 1: 제목 요소에 배경색 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>제목 요소에 배경색 적용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":header").css("background-color", "lightblue");
    });
  </script>
</head>
<body>
  <h1>제목 1</h1>
  <h2>제목 2</h2>
  <h3>제목 3</h3>
</body>
</html>

설명: 위 예제는 모든 제목 요소에 lightblue 배경색을 적용합니다.

예제 2: 제목 요소에 마우스 오버 이벤트 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>제목 요소에 마우스 오버 이벤트 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":header").hover(function(){
        $(this).css("color", "red");
      }, function(){
        $(this).css("color", "black");
      });
    });
  </script>
</head>
<body>
  <h1>제목 1</h1>
  <h2>제목 2</h2>
  <h3>제목 3</h3>
</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(){
      $("h2:header").addClass("subtitle");
    });
  </script>
  <style>
    .subtitle {
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>제목 1</h1>
  <h2>부제목 1</h2>
  <h3>제목 3</h3>
</body>
</html>

설명: 이 예제는 h2 제목 요소에 subtitle 클래스를 추가하여 이탤릭체로 표시합니다.

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

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

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