요소 탐색하기 & jQuery 메서드 & 필터 정리
jQuery 기본 정리
실무에서 자주 사용하는 것만 모아놨다.
요소 탐색
:header
<h1~6>까지의 모든 제목 요소들
:animated
현재 애니메이션이 적용된 모든 요소들
( * 메뉴할때 가끔 사용)
:focus
현재 포커스를 가지고 있는 요소
jQuery 메서드
1. 크기/위치
.offset()
.position()
.scrollTop()
2. 효과/애니메이션
.animate()
3.이벤트
3-1. 문서/파일
.ready()
.load()
3-2. 사용자 상호작용
.on()
필터
1.콘텐츠 필터
:contains('text')
매개변수로 지정된 텍스트를 가지고 있는 요소들
:empty
자식 요소가 없는 모든 요소들
:parent
자식요소를 가지고 있는 모든 요소들
:has(selector)
선택된 요소 중 매개변수에 지정된 셀렉터에 부합하는 요소를 최소한 하나 이상 가지고 있는 모든 요소
( * 예를 들어, div:has(p)는 <p>요소를 가진 모든 div 요소를 의미)
2. 가시성 필터
:hidden
화면에서 숨겨진 모든 요소들
:visible
페이지 레이아웃에서 공간을 차지하고 있는 모든 요소들
* 선택되지 않은 요소들:
display:none;
height/width:0;인 조상 노드가 숨겨진 요소들
* 선택되는 요소들:
visibility: hidden
opacity:0
선택되는 요소는 눈에 안보이지만 레이아웃에서 특정 공간을 차지하기 때문에 주의해야한다.
3. 자식요소필터
:nth-child(expr)
1부터 시작하는 해당 순번의 요소(ul li:nth-child(2)는 두 번째 요소를 의미한다.)
:first-child
현재 선택된 요소의 첫 번째 자식 요소
:last-child
현재 선택된 요소의 마지막 자식 요소
:only-child
요소의 자식 요소가 하나뿐인 요소(div p:only-child)
4. 특성필터
[attribute]
지정된 특성을 가지고 있는 요소들(특성 값은 무관)
[attribute='value']
지정된 특성과 값을 가진 요소들
[attribute!='value']
지정된 특성 값이 지정된 값이 아닌 요소들
[attribute^='value']
지정된 특성 값이 지정된 값으로 시작하는 요소들
[attribute*='value']
지정된 특성 값이 지정 된 값을 포함하고 있는 요소들
[attribute|='value']
지정된 특성 값이 지정된 값과 이리하거나 지정된 값에 하이픈을 덧붙인 값으로 시작하는 요소들
[attribute~='value']
지정된 특성 값이 공백으로 나열한 값 중 하나인 요소들
[attribute][attribute2]
지정된 특성 중 하나를 가진 모든 요소들
5. 폼
:selected
드롭다운 리스트에서 선택된 모든 요소들
:enabled
현재 활성화된 폼 요소들(기본적으로 모든 폼 요소들)
:disabled
비활성화된 모든 폼 요소들(CSS의 disabled 속성을 사용한다)
:checked
모든 선택된 라디오 버튼이나 체크박스 요소들