jQuery 필터 selector_jquery에 대한 자세한 설명

필터 선택기

필터 선택기는 주로 특정 필터링 규칙을 통해 필수 DOM 요소를 필터링합니다. 선택기는 모두 ":"로 시작합니다.

다양한 필터링 규칙에 따라 필터 선택기는 기본 필터링, 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링 및 양식 개체 속성 필터링 선택기로 나눌 수 있습니다.

기본 필터 선택기

기본 필터 선택기 예시

첫 번째 div 요소의 배경색을 #bbffaa로 변경

마지막 div 요소의 배경색을 #bbffaa로 변경

클래스가 하나가 아닌 모든 div 요소의 배경색을 #bbffaa로 변경합니다

짝수 인덱스 값을 가진 div 요소의 배경색을 #bbffaa로 변경합니다

홀수 인덱스 값을 가진 div 요소의 배경색을 #bbffaa로 변경

인덱스 값이 3보다 큰 div 요소의 배경색을 #bbffaa로 변경

인덱스 값이 3인 div 요소의 배경색을 #bbffaa로 변경합니다

인덱스 값이 3 미만인 div 요소의 배경색을 #bbffaa로 변경

모든 제목 요소의 배경색을 #bbffaa로 변경

현재 애니메이션 중인 모든 요소의 배경색을 #bbffaa로 변경합니다

콘텐츠 필터 선택기

콘텐츠 필터링 선택기의 필터링 규칙은 주로 하위 요소와 여기에 포함된 텍스트 콘텐츠에 반영됩니다

콘텐츠 필터링 선택기 예시

'di'라는 텍스트가 포함된 div 요소의 배경색을 #bbffaa로 변경합니다

하위 요소(또는 텍스트 요소)가 포함되지 않은 빈 div 요소의 배경색을 #bbffaa로 변경합니다

class mini 요소가 포함된 div 요소의 배경색을 #bbffaa로 변경

하위 요소(또는 텍스트 요소)가 포함된 div 요소의 배경색을 #bbffaa로 변경합니다

가시성 필터 선택기

가시성 필터 선택기는 표시 및 표시 상태에 따라 해당 요소를 선택합니다

표시 선택기: 숨김에는 스타일 속성 표시가 없음인 요소뿐만 아니라 텍스트 숨김 필드() 및 visible:hidden과 같은 요소도 포함됩니다.

가시성 필터 선택기 예시

표시되는 모든 div 요소의 배경색을 #bbffaa로 변경

보이지 않는 요소를 모두 선택하고 jQuery의 show() 메서드를 사용하여 표시한 다음 배경색을 #bbffaa로 설정합니다

숨겨진 텍스트 필드를 모두 선택하고 해당 값을 인쇄하세요

속성 필터 선택기

속성 필터 선택기의 필터링 규칙은 요소의 속성을 통해 해당 요소를 얻는 것입니다

속성 필터 선택기 예시

다음 요소를 선택하고 배경색을 #bbffaa로 변경하세요

속성 제목이 포함된 div 요소

속성 제목 값이 "test"인 div 요소입니다.

속성 제목 값이 "test"가 아닌 요소를 분할합니다(속성 제목이 없는 요소도 선택됨).

속성 제목 값이 "te"로 시작하는 div 요소입니다.

속성 제목 값이 "est"로 끝나는 div 요소입니다.

속성 제목 값에 "es"가 포함된 div 요소입니다.

ID 속성이 있는 div 요소를 선택한 다음, 결과에서 속성 제목 값에 "es"가 포함된 div 요소를 선택하세요.

하위 요소 필터 선택기

nth-child() 선택기에 대해 자세히 설명하면 다음과 같습니다.

(1) :nth-child(even/odd): 각 상위 요소 아래의 인덱스 값이 짝수(홀수)인 요소를 선택할 수 있습니다

(2):nth-child(2): 각 상위 요소 아래에서 인덱스 값이 2인 요소를 선택할 수 있습니다

(3):nth-child(3n): 각 상위 요소 아래의 인덱스 값이 3의 배수인 요소를 선택할 수 있습니다

(3):nth-child(3n 1): 각 상위 요소 아래에서 인덱스 값이 3n 1인 요소를 선택할 수 있습니다

하위 요소 필터 선택기의 예

다음 요소를 선택하고 배경색을 #bbffaa로 변경하세요

클래스 1이 있는 각 div의 상위 요소 아래에 있는 두 번째 하위 요소

클래스 1이 있는 각 div의 상위 요소 아래 첫 번째 하위 요소

클래스 1이 있는 각 div의 상위 요소 아래 마지막 하위 요소

클래스 1의 div 상위 요소 아래에 하위 요소가 하나만 있는 경우 이 하위 요소를 선택하세요.

양식 객체 속성 필터 선택기

이 선택기는 주로 선택한 양식 요소를 필터링합니다.

양식 객체 속성 필터 선택기 예시

jQuery 개체의 val() 메서드를 사용하여 양식에서 사용 가능한 요소의 값을 변경합니다. jQuery 개체의 val() 메서드를 사용하여 사용할 수 없는 요소의 값을 변경합니다.

jQuery 객체의 length 속성을 사용하여 선택된 다중 선택 상자의 개수를 가져옵니다

jQuery 개체의 text() 메서드를 사용하여 드롭다운 상자에서 선택한 콘텐츠를 가져옵니다.

 양식 선택기

위 내용은 jQuery 필터 선택기에 대한 내용입니다. 매우 상세하게 설명되어 있어 친구들에게 도움이 되기를 바랍니다.