직접 선택자
- 전체 선택자 : $("*")
- 아이디 선택자 : $("#아이디명")
- 클래스 선택자 : $(".클래스명")
- 태그 선택자 : $("태그명")
- 그룹 선택자 : $("요소1, 요소2, ..., 요소n")
- 종속 선택자
1) 해당 요소 중 class a를 갖는 요소 선택 : $("요소명.a")
2) 해당 요소 중 id a를 갖는 요소 선택 : $("요소명#a")
인접 관계 선택자
# 상위 요소 관련
- 요소 a의 부모 요소 선택 : $("요소a").parent()
- 요소 a의 모든 상위 요소 선택 : $("요소a").parents()
- 요소 a의 상위 요소 중 요소 b를 모두 선택 : $("요소a").parents("요소b")
- 요소 a의 상위 요소 b 중 가장 가까운 요소 선택 : $("요소a").closest("요소b")
# 하위 요소 관련
- 요소 a의 자식 요소인 모든 요소 b 선택 : $("요소a > 요소 b")
- 요소 a의 하위 요소인 모든 요소 b 선택 : $("요소a 요소b")
- 요소 a의 모든 자식 요소 선택 : $("요소a").children()
# 이전 요소 관련
- 요소 a의 바로 이전 요소 선택 : $("요소a").prev()
- 요소 a의 모든 이전 요소 선택 : $("요소a").prevAll()
- 요소 b 이후부터 요소 a 이전까지의 모든 요소 선택 : $("요소a").prevUntil("요소b")
# 다음 요소 관련
- 요소 a의 바로 다음 요소인 요소 b 선택
i. $("요소a").next()
: .next() 개수만큼 다음으로 넘어가 선택
ii. $("요소a + 요소b")
: 요소 b가 요소 a의 바로 다음에 나오지 않으면 인식하지 못함
- 요소 a의 모든 다음 요소 선택 : $("요소a").nextAll()
- 요소 a 이후부터 요소 b 이전까지의 모든 요소 선택 : $("요소a").nextUntil("요소b")
# 전체 형제 요소 관련
- 요소 a의 모든 형제 요소 선택 (자신 제외) : $("요소a").siblings()
위치 탐색 선택자
** 콜론 양 옆에 띄어쓰기 시 정상적으로 작동하지 않음
# <body> 기준
- 첫 번째 요소 선택
i. $("요소:first")
ii. $("요소").first()
- 마지막 요소 선택
i. $("요소:last")
ii. $("요소").last()
# 같은 레벨의 요소 무리 중
- 첫 번째 요소 선택 : $("요소:first-of-type")
- 마지막 요소 선택 : $("요소:last-of-type")
- 짝수 번째 요소 선택 : $("요소:odd")
- 홀수 번째 요소 선택 : $("요소:even")
- 앞에서 n번째 요소 선택 : $("요소:nth-child(n)")
- 뒤에서 n번째 요소 선택 : $("요소:nth-last-child(n)")
- 인덱스 n번에 해당하는 순서의 요소 선택 : $("요소").eq(n)
- 인덱스 n번보다 작은 순서의 모든 요소 선택 : $("요소:lt(n)")
- 인덱스 n번보다 큰 순서의 모든 요소 선택 : $("요소:gt(n)")
- 인덱스 a번보다 (b-1)번까지의 요소 선택 : $("요소").slice(a, b)
# 부모 요소 기준
- 부모 요소 내에 요소 a가 1개뿐인 경우에 요소 a 선택 : $("요소a:only-child")
속성 탐색 선택자
- 해당 속성이 포함된 요소만 선택 : $("요소[속성]")
- 속성 값이 해당 값과 일치하는 요소만 선택 : $("요소[속성=속성값]")
- 속성 값이 해당 값으로 시작하는 요소만 선택 : $("요소[속성^=속성값]")
- 속성 값이 해당 값으로 끝나는 요소만 선택 : $("요소[속성$=속성값]")
- 속성 값이 해당 값을 포함하는 요소만 선택 : $("요소[속성*=속성값]")
- 숨겨진 상태의 요소만 선택 : $("요소:hidden")
- 보이는 상태의 요소만 선택 : $("요소:visible")
- <input> 요소 중 type이 text인 요소만 선택 : $("요소:text")
- selected 속성이 적용된 요소만 선택 : $("요소:selected")
- checked 속성이 적용된 요소만 선택 : $("요소:checked")
콘텐츠 탐색 선택자
- 해당 텍스트를 포함하는 요소만 선택 (태그 x) : $("요소:contains(텍스트)")
- 해당 태그를 포함하는 요소만 선택 (텍스트 x)
i. $("요소:has(태그명)")
ii. $("요소").has(태그명)
- 해당 요소의 자식 요소들만 선택 : $("요소").contents()
- 특정 요소를 제외하고 나머지 선택
i. $("요소:not(':제외요소')")
ii. $("요소").not(":제외요소")
ex) $("li:not(:first)") : 첫 번째 요소만 제외하고 나머지 li 선택
- 해당 요소 무리 중, 조건에 맞는 요소 선택 (하위 요소 x) : $("요소").filter(".클래스명")
- 해당 요소의 하위 요소 중, 조건에 맞는 요소 선택
i. $("요소a").find("요소b")
ii. $("요소a").find(".클래스명")
- 필터링 취소 (검색, 인덱스 등) : $("요소").~~.end()
'jQuery' 카테고리의 다른 글
| [jQuery] 속성 조작 메서드 (0) | 2023.10.20 |
|---|---|
| [jQuery] 객체 편집 메서드 (0) | 2023.10.20 |
| [jQuery] 배열 관련 메서드 (0) | 2023.10.20 |
| [jQuery] AJAX 통신 시 로딩 스피너 표시하기 (0) | 2023.10.11 |
| [jQuery] 개요 (0) | 2023.04.17 |
댓글