SeouliteLab

jQuery.selector: jQuery 선택자 사용법과 예제 본문

프로그래밍

jQuery.selector: jQuery 선택자 사용법과 예제

Seoulite Lab 2024. 4. 9. 08:45

예제 1: 클래스 선택자 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 선택자 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".example-class").css("color", "blue");
    });
  </script>
</head>
<body>
  <p class="example-class">이 문장은 파란색으로 변합니다.</p>
  <p>이 문장은 파란색으로 변하지 않습니다.</p>
</body>
</html>

설명:

이 예제는 jQuery 선택자를 사용하여 클래스에 속한 요소를 선택하고, CSS 속성을 변경하는 방법을 보여줍니다.

  • $(".example-class")은 클래스가 "example-class"인 요소를 선택합니다.
  • .css("color", "blue")는 선택된 요소의 텍스트 색상을 파란색으로 변경합니다.

예제 2: ID 선택자 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 선택자 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#example-id").text("이 문장이 변경되었습니다.");
    });
  </script>
</head>
<body>
  <p id="example-id">이 문장은 초기 문장입니다.</p>
</body>
</html>

설명:

이 예제는 jQuery 선택자를 사용하여 ID에 속한 요소를 선택하고, 텍스트를 변경하는 방법을 보여줍니다.

  • $("#example-id")는 ID가 "example-id"인 요소를 선택합니다.
  • .text("이 문장이 변경되었습니다.")는 선택된 요소의 텍스트를 변경합니다.

예제 3: 속성 선택자 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 선택자 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input[type='text']").attr("placeholder", "여기에 입력하세요.");
    });
  </script>
</head>
<body>
  <input type="text">
</body>
</html>

설명:

이 예제는 jQuery 선택자를 사용하여 속성에 따른 요소를 선택하고, 해당 속성을 변경하는 방법을 보여줍니다.

  • $("input[type='text']")는 type 속성이 "text"인 input 요소를 선택합니다.
  • .attr("placeholder", "여기에 입력하세요.")는 선택된 요소의 placeholder 속성을 변경하여 사용자에게 입력 안내를 제공합니다.

위의 예제들을 통해 jQuery를 사용하여 다양한 선택자를 활용하는 방법을 익힐 수 있습니다. 선택자를 효과적으로 활용하면 웹 개발 과정에서 요소를 정확하게 선택하여 조작할 수 있습니다. 여러 예제를 통해 선택자의 다양한 활용법을 익혀보세요.

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

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

jQuery.boxModel  (0) 2024.04.09
jQuery .andSelf() 메서드  (0) 2024.04.09
jQuery.support: 브라우저 기능 지원 여부 확인하기  (0) 2024.04.09
jQuery.browser: 브라우저 정보 확인하기  (0) 2024.04.09
jQuery .context 속성: 이벤트 처리 및 선택된 요소의 컨텍스트 확인하기  (0) 2024.04.09
'프로그래밍' Related Articles more