1. jQuery에 의한 HTML 요소/노드의 선택/추출
ㅇ jQuery() 또는 $() 함수에, CSS 선택자 형식으로 인수 전달하면, 이에 매칭하는 요소들을 리턴
- HTML 문서 DOM 트리의 요소들에 대해,
- () 안에 언급된 1 이상 매칭되는 요소들을 추출
2. jQuery 선택자 사용법 : $('선택자') ☞ CSS 선택자 참조
ㅇ 기본 선택자 : *, id, class, 태그 선택자
- $('*') : 모든 요소 선택
- $('#id명')
- $('.class명')
- $('태그명')
ㅇ 조합 선택자 : 콤머(,) 및 샵(#)
- OR 선택자 : $('#id명_1, #id명_2, #id명_3, ... ')
- AND 선택자 : $('태그명#id명') => 해당 태그명에 해당 id명이 동시에 부합되는 것
ㅇ 계층 선택자
- 직계 자식 선택자 (> 기호) : $('부모태그명 > 자식태그명')
. 부모 바로 밑 직계 자식 만 대상으로 함
- 모든 하위 선택자 (빈 칸) : $('#id명 태그명')
. 부모 밑 모든 자손 요소들을 대상으로 함
- 다음 인접 선택자 (+ 기호) : $('왼쪽형제태그명 + 오른쪽형제태그명')
. 동등 계층에서, 자신포함 바로 다음 인접 형제 요소 만을 선택
- 다음 형제 선택자 (~ 기호) : $('왼쪽형제태그명 ~ 오른쪽형제태그명')
. 동등 계층에서, 자신 포함 뒤의 모든 일치하는 형제 요소들을 모두 선택
ㅇ 속성 선택자 (찾는 속도가 다소 느림)
- $('태그명[속성명]') : 속성 존재 여부로 만 요소 선택
- $('태그명[속성명="완전일치속성"]') : 속성 값이 일치 여부
- $('태그명[속성명*="부분일치속성"]') : 속성 값에 주어진 문자열의 포함 여부로 요소 선택
- $('태그명[속성명~="일치속성"]') : 속성 값에 주어진 문자열이 단어로써 포함
- $('태그명[속성명|="일치속성"]') : 속성 값에 주어진 문자열 그대로 포함 여부
또는, 하이픈(-) 붙은 접두어로써 포함
- $('태그명[속성명!="일치속성"]') : 속성 값이 존재 안하거나, 주어진 문자열과 불일치
- $('태그명[속성명^="시작일치속성"]') : 속성 값에 주어진 문자열로 시작하는 요소 선택
- $('태그명[속성명$="끝일치속성"]') : 속성 값에 주어진 문자열로 끝나는 요소 선택
ㅇ 필터 선택자 (찾는 속도가 다소 느림)
- 콜론(:) 기호로 시작하는 문자열 형식 ☞ 아래 3.항 참조
3. jQuery 필터 선택자 사용법 : $('선택자:필터형식')
ㅇ 특정 아이템은 제거하고 필요한 것 만 걸러내는 것
- 콤머(:) 뒤에 필터 이름을 적음
ㅇ 위치 필터
- :even => 짝수번째(짝수 인덱스를 갖는) 엘리먼트 만 선택 (주의: 인덱스가 0부터 시작)
. 例) $('tr:even')
- :odd => 홀수번째(홀수 인덱스를 갖는) 엘리먼트 만 선택
* 특히, odd,even 필터는 CSS 선택자에는 없는 유용한 기능 임
- :nth-child(index/even/odd/equation) => n번째 자식 요소를 선택
. (이때, 자식 순서는 1부터 시작)
- :first => 첫번째 엘리먼트 만 선택
- :last => 마지막 엘리먼트 만 선택
- :eq(i) => i번째 요소를 선택 (주의: 인덱스 i는 0부터 시작)
- :gt(i) => i번째 이후의 요소를 선택
- :lt(i) => i번째 이전의 요소를 선택
ㅇ 선택 필터
- 폼 요소 선택
. 폼 요소 선택 => :input, :text, :radio, :checkbox, :submit, :button 등
. 폼 요소 상태에 따른 선택 => :selected, :checked, :disabled, :enabled, :focus 등
. 例) $('input[type="radio"]:checked),
$('input[type="password"], input[type="text"]:disabled')
- header 요소 선택 => :header
- 비 선택 => :not(원치않는선택자)
- 포함된 것 만을 선택 => :has(내부포함선택자)
- 텍스트 포함 선택 => :contains('텍스트')
- 숨겨진 것 만을 선택 => :hidden
- 보이는 것 만을 선택 => :visible
4. jQuery 상세 선택
ㅇ 현재 선택된 요소 집합에서 더 좁혀 탐색
ㅇ 조건 필터링 메서드
* CSS 선택자에 의해 선택된 요소 집합 중에서,
. 필터링에 의해 세부적으로 선택
- $().first() : 선택된 요소들 중 1번째 요소를 선택
- $().last() : 선택된 요소들 중 마지막 요소를 선택
- $().filter() : 선택된 요소들 중 선택 조건에 맞는 요소를 선택
. filter( selector )
. filter( function )
.. Type: Function( Integer index, Element element ) => Boolean
. filter( elements )
. filter( selection )
- $().has() : 선택된 요소의 후손들 중 선택 조건에 맞는 요소를 선택
- $().not() : 선택된 요소 집합에서 일치하지 않는 요소들 만을 선택
. 例) $("a").not("[data-id='1']") : a 요소들 중 data-id가 1이 아닌 요소를 선택
- $().eq(index) : 선택된 요소들 중 index+1번째 요소를 선택
- $().slice(start[,end]) : start+1 ~ end번째 요소를 선택
ㅇ 조건 탐색 메서드
* 이미 선택된 요소를 기점으로,
. 어느 방향으로도 부모,형제,자식 노드를 접근하며 새로운 요소를 탐색
- $().find( [Selector] ) : 현재 선택된 요소 내부에서 선택
- $().parents( [Selector] ) : 모든 상위 요소들을 반환
- $().parent( [Selector] ) : 가장 근접한 상위 요소 1개 만 반환
- $().closest( [Selector] ) : 가장 근접한 상위 요소 1개 만 반환
. 단, 특정한 요소부터 지정 가능
- $().children( [Selector] ) : 자식 노드들을 반환
- $().siblings( [Selector] ) : 인접한 형제 노드들을 반환
- $().prev( [Selector] ) : 직전 형제 노드 만을 반환
- $().prevAll( [Selector] ) : 이전 모든 노드들을 반환
- $().next( [Selector] ) : 직후 형제 노드 만을 반환
- $().nextAll( [Selector] ) : 이후 모든 형제 노드들을 선택
- $().add( [Selector] ) : 선택되어 넘어온 요소 집합에 현재 선택한 요소 집합과의 합집합
- $().addBack( [Selector] ) : 선택되어 넘어온 요소 집합에 현재 선택한 요소 집합과
그 이전에 제외되었던 요소 집합도 추가하여 합집합
- $().end( [Selector] ) : 직전 단계에서 선택되었던 요소를 선택
* [Selector] : (option) CSS 선택자