SeouliteLab

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

프로그래밍

jQuery의 :first 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:02

jQuery의 :first 선택자는 문서 객체 중 첫 번째 요소를 선택하는 데 사용됩니다. 이를 활용하여 다양한 상황에서 첫 번째 요소를 선택하고 조작할 수 있습니다.

예제 1: 첫 번째 요소에 클래스 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>첫 번째 요소에 클래스 추가</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p:first").addClass("highlight");
    });
  </script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>첫 번째 문단입니다.</p>
  <p>두 번째 문단입니다.</p>
  <p>세 번째 문단입니다.</p>
</body>
</html>

설명: 위 예제는 문서의 첫 번째 <p> 요소에 highlight 클래스를 추가하여 배경색을 노란색으로 변경합니다.

예제 2: 첫 번째 이미지 숨기기

<!DOCTYPE html>
<html>
<head>
  <title>첫 번째 이미지 숨기기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("img:first").hide();
    });
  </script>
</head>
<body>
  <img src="image1.jpg" alt="이미지 1">
  <img src="image2.jpg" alt="이미지 2">
  <img src="image3.jpg" alt="이미지 3">
</body>
</html>

설명: 이 예제는 문서의 첫 번째 <img> 요소를 숨깁니다.

예제 3: 첫 번째 리스트 아이템 스타일 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>첫 번째 리스트 아이템 스타일 변경</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("ul li:first").css("color", "blue");
    });
  </script>
</head>
<body>
  <ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
  </ul>
</body>
</html>

이 예제는 문서의 첫 번째 <ul> 안에 있는 첫 번째 <li> 요소의 글자색을 파란색으로 변경합니다.

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

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

jQuery의 :gt() 선택자 활용하기  (0) 2024.04.12
jQuery의 :focus 선택자 활용하기  (0) 2024.04.12
jQuery의 :first-of-type 선택자  (0) 2024.04.11
jQuery의 :first-child 선택자  (0) 2024.04.11
jQuery의 :file 선택자  (0) 2024.04.11
'프로그래밍' Related Articles more