SeouliteLab

jQuery의 ID 선택자 ("#id") 활용하기 본문

프로그래밍

jQuery의 ID 선택자 ("#id") 활용하기

Seoulite Lab 2024. 4. 12. 08:07

jQuery의 ID 선택자는 문서 내에서 특정 ID를 가진 요소를 선택하는 데 사용됩니다. ID는 문서 내에서 고유해야 하므로, 해당 ID를 가진 요소는 하나만 선택됩니다. 이를 활용하여 특정 요소를 선택하고 스타일을 변경하거나 이벤트를 추가할 수 있습니다.

예제 1: 특정 ID를 가진 요소에 배경색 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 ID를 가진 요소에 배경색 적용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#special").css("background-color", "lightblue");
    });
  </script>
</head>
<body>
  <div id="special">특별한 요소</div>
  <div>일반 요소</div>
</body>
</html>

설명: 위 예제는 ID가 "special"인 요소의 배경색을 연보라색으로 변경합니다.

예제 2: 특정 ID를 가진 요소에 이벤트 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 ID를 가진 요소에 이벤트 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#special").click(function(){
        alert("특별한 요소를 클릭했습니다!");
      });
    });
  </script>
</head>
<body>
  <div id="special">특별한 요소</div>
</body>
</html>

설명: 이 예제는 ID가 "special"인 요소를 클릭하면 알림창이 뜨는 이벤트를 추가합니다.

예제 3: 특정 ID를 가진 요소에 텍스트 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 ID를 가진 요소에 텍스트 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#special").text("새로운 내용입니다!");
    });
  </script>
</head>
<body>
  <div id="special">이전 내용</div>
</body>
</html>

설명: 이 예제는 ID가 "special"인 요소의 텍스트 내용을 "새로운 내용입니다!"로 변경합니다.

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

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

jQuery의 :input 선택자 활용하기  (0) 2024.04.12
jQuery의 :image 선택자 활용하기  (0) 2024.04.12
jQuery의 :hidden 선택자 활용하기  (0) 2024.04.12
jQuery의 :header 선택자 활용하기  (0) 2024.04.12
jQuery의 :has() 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more