Jquery 기본 선택기 사용 방법

jQuery는 주로 DOM 조작 및 이벤트 처리를 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery를 사용할 때 선택기를 사용하면 요소와 구성 요소를 쉽게 찾을 수 있습니다. 이 글에서는 jQuery 기본 선택기를 사용하는 방법을 설명합니다.

1. 기본 구문

선택기는 jQuery 함수 $() 또는 jQuery()를 통해 생성됩니다. 일반적으로 선택기는 선택하려는 요소나 구성 요소를 설명하는 문자열입니다. 예를 들어 모든 단락 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("p")

동일한 $() 함수 내에서 여러 선택기를 쉼표로 구분할 수도 있습니다. 예를 들어 모든 단락 및 하이퍼링크 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("p,a")

2. 기본 선택기

jQuery는 일반적으로 사용되는 몇 가지 기본 선택기를 제공합니다.

1. 요소 선택기

요소 선택기는 특정 유형의 요소를 선택합니다. 예를 들어 모든 단락 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("p")

2. ID 선택기

ID 선택기는 ID 속성을 기반으로 요소를 선택합니다. 예를 들어 ID가 "myDiv"인 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("#myDiv")

3. 클래스 선택기

클래스 선택기는 특정 클래스가 있는 요소를 선택할 수 있습니다. 예를 들어 클래스 이름이 "myClass"인 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$(".myClass")

4. 속성 선택기

속성 선택기는 특정 속성 값을 가진 요소를 선택할 수 있습니다. 예를 들어 href 속성이 있는 모든 하이퍼링크 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("a[href]")

3. 결합 선택기

위의 기본 선택기를 결합하여 더 복잡한 선택기를 구현할 수 있습니다. 다음은 일반적으로 사용되는 조합 선택기입니다.

1. 하위 선택자

하위 선택자는 요소 내의 하위 요소를 선택할 수 있습니다. 예를 들어 ID가 "myDiv"인 모든 단락 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("#myDiv p")

2. 하위 요소 선택기

하위 요소 선택기는 하위 요소만 선택할 수 있습니다. 예를 들어 ID가 "myList"인 모든 li 하위 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("#myList > li")

3. Sibling 요소 선택기

Sibling 요소 선택기는 대상 요소에 인접한 요소를 선택할 수 있습니다. 예를 들어 대상 요소에 인접한 ID가 "myDiv"인 모든 div 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("#myDiv + div")

4. 필터 선택기

jQuery는 기본 선택기와 결합 선택기 외에도 다음을 제공합니다. 다양한 필터 옵션 요소의 속성, 내용, 위치 및 기타 조건에 따라 장치를 선택할 수 있습니다.

다음은 일반적으로 사용되는 필터 선택기입니다.

1. :첫 번째 선택자

:첫 번째 선택자는 선택자와 일치하는 첫 번째 요소를 선택할 수 있습니다. 예를 들어 첫 번째 li 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("li:first")

2. :last selector

: 마지막 선택기는 선택기와 일치하는 마지막 요소를 선택합니다. 예를 들어 마지막 li 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("li:last")

3. :even 및 :odd 선택기

:even 및 :odd 선택기는 선택기와 일치하는 짝수 및 홀수 항목을 선택할 수 있습니다. 예를 들어 목록에서 모든 짝수 li 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("li:even")

4. :contains selector

:contains selector는 텍스트 내용을 기반으로 요소를 선택할 수 있습니다. 예를 들어 "JavaScript"라는 텍스트가 포함된 li 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("li:contains('JavaScript')")

5. :not selector

: not 선택기는 지정된 선택기가 있는 요소를 제외할 수 있습니다. 예를 들어 ID "myList"에서 li 요소가 아닌 모든 하위 요소를 선택하려면 다음 구문을 사용할 수 있습니다.

$("#myList *:not(li)")

5. 요약

jQuery에서 선택기는 위치를 지정하고 조작할 수 있는 매우 강력한 도구입니다. 쉽고 빠르게 페이지 요소와 구성요소를 확인하세요. 이 문서에서는 jQuery를 더 잘 이해하고 사용하는 데 도움이 되기를 바라며 기본 선택기, 결합 선택기 및 필터 선택기의 몇 가지 일반적인 방법을 설명합니다.

위 내용은 Jquery 기본 선택기 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!