HOWTO · jQuery

jQuery 선택기

속성을 추가하고 HTML 요소를 조작할 수 있도록 인스턴스가 고려됩니다. 이러한 인스턴스는 선택기로 상호 교환 가능하게 표시됩니다. 기본 jQuery 선택기는 요소 선택기, #id 선택기 및 .class 선택기의 세 가지 유형이 될 수 있습니다.

작성자 Anika Tabassum Era게시일 2023-06-21업데이트 2024-02-15

jQuery에는 HTML 요소, 요소 선택기, #id 선택기 및 .class 선택기의 인스턴스를 시작하는 세 가지 기본 유형의 선택기가 있습니다.

다음 섹션에서는 이러한 기본 선택자와 해당 기능을 다루는 예제를 보여주고 선택자의 다른 파생 가능성 목록을 살펴봅니다.

jQuery에서 `요소 선택기` 및 `#id 선택기` 사용

코드 조각:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $('button').click(function(){
    $('#title').css({'color':'blue'});
});
  });
</script>
</head>
<body>
<p id='title'>Text</p>
<button>Text Change</button>

출력:

요소 선택자 및 ID 선택자 사용

위의 코드에는 p 태그 콘텐츠의 색상을 변경하는 클릭 이벤트가 있습니다. p 태그와 연결된 id='title'과 클릭 이벤트를 트리거하는 버튼 요소가 있습니다. 버튼 요소는 요소 선택기로 인스턴스화되고 p는 #id 선택기를 통해 가져옵니다.

jQuery에서 `클래스 선택기` 사용

코드 조각:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('.x:even').css({'color':'red'});
});
</script>
</head>
<body>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>

출력:

클래스 선택기 사용

유사한 클래스 x가 뒤따르는 일부 p 태그를 고려하고 .class 선택기를 통해 조작하여 내용을 더 쉽게 이해할 수 있도록 했습니다.

짝수 위치에 있는 p 태그는 빨간색으로 표시되었으며 .class 선택기를 고려할 때 속성이 트리거되었습니다.