1.기본 선택기
기본 선택기는 JQuery에서 가장 일반적으로 사용되는 선택기이며 요소 ID, 클래스 및 태그 이름으로 DOM 요소를 찾는 가장 간단한 선택기입니다. 이는 매우 중요한 내용으로, 다음 내용은 이를 토대로 단계별로 개선해 나가고 있습니다.
1). "$("#id")", id로 지정된 요소를 가져옵니다. ID는 전역적으로 고유하므로 멤버가 하나만 있습니다.
2) "$(".class")", 클래스로 지정된 요소를 가져옵니다. 서로 다른 요소가 동일한 클래스 속성을 가질 수 있으므로 여러 멤버가 있을 수 있습니다.
3) "$("element")", 여러 멤버를 가질 수 있는 요소(div, 테이블 등의 요소 이름)로 지정된 요소를 가져옵니다.
4). "$("*")", 문서와 동일한 모든 요소를 가져옵니다.
5) "$("selector1,selector2,...,selectorN")", 각 선택기와 일치하는 요소를 병합하고 함께 반환합니다. selector1과 일치하는 집합 + selector2와 일치하는 집합 +... + selectorN과 일치하는 집합을 반환합니다. 다음 2. 레이어 선택은 무엇인가요? 그 차원은 부자관계와 형제관계의 결절이다. 따라서 계층적 선택기는 지정된 요소의 부모, 자식 및 형제 노드를 가져오는 데 사용됩니다.
1). "$("ancestorDescendant")", 조상 요소 아래의 모든 요소를 가져옵니다.
2) "$("parent > child")", 상위 요소 아래의 모든 하위 요소를 가져옵니다(하위 요소의 첫 번째 레이어만 포함됨).
3) "$("pre + next")", pre 요소 바로 다음에 다음 형제 요소를 가져옵니다.
4). "$("pre ~ siblings")", pre 요소 다음의 모든 형제 요소를 가져옵니다.
3. 필터 선택기
필터? 반드시 필터 조건을 추가해야 합니다. "$("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로 돌아가고, set B를 선택한 후 [selectorN]을 통해 선택하고 결과 세트를 반환하려면 선택하세요.
5) 하위 요소 필터 선택기
이름에서 알 수 있듯이 특정 요소의 하위 요소를 선택합니다.
a) ":nth-child(index/even/odd)"는 인덱스가 있는 요소, 짝수 인덱스가 있는 요소, 홀수 인덱스가 있는 요소를 선택합니다.
l nth-child(even/odd): 각 상위 요소 아래의 인덱스 값이 짝수(홀수)인 요소를 선택할 수 있습니다.
l nth-child(2): 각 상위 요소 아래에서 인덱스 값이 2인 요소를 선택할 수 있습니다.
l nth-child(3n): 각 상위 요소 아래의 인덱스 값이 3의 배수인 요소를 선택할 수 있습니다.
l nth-child(3n + 1): 각 상위 요소 아래에서 인덱스 값이 3n + 1인 요소를 선택할 수 있습니다.
b) “:first-child”, 첫 번째 하위 요소를 선택합니다.
c) “:last-child”, 마지막 하위 요소를 선택합니다.
d) ":only-child"는 상위 요소에 이 하위 요소만 있는 유일한 하위 요소를 선택합니다.单表6) 양식 필터 선택
양식 요소의 필터 선택을 선택합니다.
a) ":input"은 모든 ,
