jQuery 필터 선택기에는 ":first", ":last", ":not()", ":even", ":odd", ":eq()", ":gt()", "가 포함됩니다. lt()", ":header", ":empty", ":has()", ":hidden" 등
【관련 추천: jQuery 동영상 튜토리얼】
jQuery 필터 선택기
필터링? 반드시 필터 조건을 추가해야 합니다. "$("div:first")"와 같이 ":"를 통해 필터 조건을 추가하여 div 요소 컬렉션의 첫 번째 div 요소를 반환하고 첫 번째는 필터 조건입니다.
다양한 필터링 규칙에 따라 필터 선택기는 기본 필터링, 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링 및 양식 개체 속성 필터링 선택기로 나눌 수 있습니다.
1. 기본 필터 선택기
a) ":first", 첫 번째 요소를 선택합니다. 이 요소도 컬렉션에 배치된다는 점을 잊지 마세요! JQuery는 DOM 객체의 모음이기 때문입니다. 예를 들어, "$("tr:first")"는 컬렉션에 여전히 저장되어 있는 모든 tr 요소 중 첫 번째 tr 요소를 반환합니다.
b) “:last”, 마지막 요소를 선택합니다. 예를 들어, "$("tr:last")"는 컬렉션에 여전히 저장되어 있는 모든 tr 요소 중 마지막 tr 요소를 반환합니다.
c) ":not(selector)", 주어진 선택기와 일치하는 모든 요소를 제거합니다. 예를 들어 "$("input:not(:checked)")"는 모든 입력 요소를 반환하지만 선택한 요소(라디오 버튼, 다중 선택 상자)를 제거합니다.
d) “:even”은 모든 요소 중에서 짝수 요소를 선택합니다. JQuery 객체는 컬렉션이므로 여기서 짝수는 컬렉션의 인덱스를 의미하며 인덱스는 0부터 시작됩니다.
e) ":odd"는 모든 요소 중에서 홀수 요소를 선택하고 인덱스는 0부터 시작합니다.
f) “:eq(index)”, 지정된 인덱스에 있는 요소를 선택하고 인덱스는 0부터 시작합니다.
g) ":gt(index)", 지정된 인덱스보다 인덱스가 큰 요소를 선택하고 인덱스는 0부터 시작합니다.
h) ":lt(index)", 인덱스가 지정된 인덱스보다 작은 요소를 선택하고 인덱스는 0부터 시작합니다.
i) ":header", hq, h2 등과 같은 모든 헤더 요소를 선택합니다.
j) “:animated”, 현재 실행 중인 모든 애니메이션 요소를 선택합니다.
2. 콘텐츠 필터 선택기
요소 및 텍스트 콘텐츠에 대한 작업입니다.
a) ":contains(text)", 텍스트 텍스트 콘텐츠가 포함된 요소를 선택합니다.
b) ":empty"는 하위 요소나 텍스트 노드를 포함하지 않는 빈 요소를 선택합니다.
c) “:has(selector)”, 선택기와 일치하는 요소를 포함하는 요소를 선택합니다.
d) ":parent", 하위 요소나 텍스트 노드가 포함된 요소를 선택합니다. (부모 노드입니다)
3. 가시성 필터 선택기
표시 여부에 따라 요소를 선택합니다.
":hidden", 보이지 않는 요소를 모두 선택하세요.
":visible"은 보이는 모든 요소를 선택합니다.
Visible 선택기: 숨김에는 스타일 속성 표시가 없음인 요소뿐만 아니라 텍스트 숨김 필드() 및 visible:hidden과 같은 요소도 포함됩니다.
4. 속성 필터 선택기
요소의 속성을 통해 해당 요소를 선택합니다.
a) "[속성]", 이 속성이 있는 요소를 선택하세요.
b) "[속성=값]", 지정된 속성 값을 가진 모든 요소를 값으로 선택합니다.
c) "[attribute !=value]", 속성 값이 value가 아닌 모든 요소를 선택합니다.
d) "[속성 ^= 값]", 속성 값이 value로 시작하는 모든 요소를 선택합니다.
e) "[속성 $= 값]", 속성 값이 value로 끝나는 모든 요소를 선택합니다.
f) "[속성 *= 값]", 속성 값에 값이 포함된 모든 요소를 선택합니다.
g) 복합 선택기인 "[selector1] [selector2]...[selectorN]"은 먼저 [selector1]을 선택하고 세트 A로 돌아가고, 세트 A는 [selector2]를 선택하고 세트 B로 돌아가고, 그 다음 세트 B로 돌아갑니다. [selectorN] 선택 ] 결과 집합을 반환하려면 선택하세요.
5. 하위 요소 필터 선택기
이름에서 알 수 있듯이 특정 요소의 하위 요소를 선택합니다.
a) ":nth-child(index/even/odd)"는 인덱스가 있는 요소, 짝수 인덱스가 있는 요소, 홀수 인덱스가 있는 요소를 선택합니다.
nth-child(even/odd): 각 상위 요소 아래의 인덱스 값이 짝수(홀수)인 요소를 선택할 수 있습니다.
nth-child(2): 각 상위 요소 아래에서 인덱스 값이 2인 요소를 선택할 수 있습니다.
nth-child(3n): 각 상위 요소 아래의 인덱스 값이 3의 배수인 요소를 선택할 수 있습니다.
nth-child(3n + 1): 각 상위 요소 아래에서 인덱스 값이 3n + 1인 요소를 선택할 수 있습니다.
b) ":first-child", 첫 번째 하위 요소를 선택합니다.
c) “:last-child”, 마지막 하위 요소를 선택합니다.
d) ":only-child"는 상위 요소에 이 하위 요소만 있는 유일한 하위 요소를 선택합니다.
6. 양식 필터 선택기
양식 요소의 필터 선택기를 선택하세요.
a) ":input"은 모든 ,
