요소 선택과 조작의 핵심 기술
다운로드 가능한 예제 파일 chapter2/lab.selectors.html을 통해 다양한 jQuery 선택자 표현식을 테스트할 수 있습니다.
컨텍스트 제어
$() 메서드는 두 번째 인수로 컨텍스트를 지정할 수 있습니다. 이는 선택 범위를 특정 DOM 영역으로 제한하는 데 유용합니다.
$('.wrappedElement', '#sampleDOM').removeClass('wrappedElement');
이 문장은 #sampleDOM 내부에만 .wrappedElement 클래스를 가진 요소를 찾습니다.
기본 CSS 선택자 사용
jQuery는 대부분의 CSS3 선택자 규칙을 지원하며, 직접 $() 함수에 전달할 수 있습니다.
| 선택자 | 설명 |
|---|---|
a |
모든 링크 요소 선택 |
#specialID |
ID가 specialID인 요소 선택 |
.specialClass |
specialClass 클래스를 가진 요소 선택 |
a#specialID.specialClass |
ID가 specialID이고 클래스가 specialClass인 링크 요소 |
p a.specialClass |
<p> 요소의 자식 중 specialClass 클래스를 가진 <a> 요소 |
div, span |
모든 <div>와 <span> 요소 선택 |
하위 요소 및 특성 기반 선택
하위 요소 선택자
p > a:<p>의 직접 자식인<a>요소만 선택ul.myList > li > a:myList클래스를 가진<ul>의 바로 아래<li>안의<a>요소
특성 선택자
a[href^='http://']:href속성이http://로 시작하는 모든 링크form[method]:method속성을 가진 모든<form>요소input[type='text']:type이text인 모든<input>a[href$='.pdf']:.pdf로 끝나는 링크a[href*='jquery']:href에jquery문자열을 포함한 링크
| 선택자 | 설명 |
|---|---|
* |
모든 요소 |
e |
요소 e |
e f |
e의 후손 f |
e > f |
e의 자식 f |
e + f |
e 바로 다음에 오는 형제 f |
e ~ f |
e 이후의 형제 f |
e.c |
클래스가 c인 e |
e#i |
ID가 i인 e |
e[a] |
a 속성을 가진 e |
e[a=v] |
a 속성이 값 v인 e |
e[a^=v] |
a 속성이 v로 시작하는 e |
e[a$=v] |
a 속성이 v로 끝나는 e |
e[a!=v] |
a 속성이 v가 아닌 e |
e[a*=v] |
a 속성에 v가 포함된 e |
위치 기반 필터링
선택자의 앞부분은 컨텍스트를, 뒷부분은 필터 조건을 나타냅니다.
| 필터 | 설명 |
|---|---|
:first |
컨텍스트 내 첫 번째 요소 |
:last |
컨텍스트 내 마지막 요소 |
:first-child |
첫 번째 자식 노드 |
:last-child |
마지막 자식 노드 |
:only-child |
유일한 자식 요소 |
:nth-child(n) |
n번째 자식 (1부터 시작) |
| `:nth-child(even | odd)` |
:nth-child(Xn+Y) |
선형 공식에 맞는 자식 요소 (예: 2n+1) |
:even |
짝수 인덱스 요소 (0부터 시작) |
:odd |
홀수 인덱스 요소 |
:eq(n) |
n번째 요소 (0부터 시작) |
:gt(n) |
n보다 큰 인덱스 요소 (포함하지 않음) |
:lt(n) |
n보다 작은 인덱스 요소 (포함하지 않음) |
고급 필터 선택자
| 필터 | 설명 |
|---|---|
:animated |
애니메이션 중인 요소 |
:button |
버튼 요소 (input[type=submit], input[type=reset], button) |
:checkbox |
체크박스 (input[type=checkbox]) |
:checked |
선택된 체크박스 또는 라디오버튼 |
:contains(text) |
텍스트 내용에 text 포함된 요소 |
:disabled |
비활성화된 요소 |
:enabled |
활성화된 요소 |
:file |
파일 입력 요소 (input[type=file]) |
:has(selector) |
지정된 선택자와 일치하는 자식을 가진 요소 |
:header |
제목 태그 (h1~h6) |
:hidden |
숨겨진 요소 |
:image |
이미지 입력 요소 (input[type=image]) |
:input |
폼 요소 (input, select, textarea, button) |
:not(selector) |
지정된 선택자와 일치하지 않는 요소 |
:parent |
자식 요소(또는 텍스트)를 가진 요소 |
:password |
비밀번호 입력 필드 |
:radio |
라디오 버튼 |
:reset |
리셋 버튼 |
:selected |
선택된 <option> 요소 |
:submit |
제출 버튼 |
:text |
일반 텍스트 입력 필드 |
:visible |
시각적으로 보이는 요소 |
실습 예시
// 체크박스가 아닌 입력 요소 선택
$('input:not(:checkbox)');
// src에 'dog' 문자열을 포함하지 않는 이미지 선택
img:not([src*="dog"]);
// `span`을 자식으로 가지는 `div` 선택
div:has(span);
// `src` 끝이 `puppy.png`인 이미지를 포함하는 행 선택
tr:has(img[src$="puppy.png"]);
동적 요소 생성
새로운 이미지 요소를 동적으로 생성하고 문서에 추가하는 방법:
$('![]()', {
src: 'images/little.bear.png',
alt: 'Little Bear',
title: 'I woof in your general direction',
click: function () {
alert($(this).attr('title'));
}
})
.css({
cursor: 'pointer',
border: '1px solid black',
padding: '12px 12px 20px 12px',
backgroundColor: 'white'
})
.appendTo('body');
첫 번째 인수는 태그 이름이며, 두 번째 인수는 특성과 값의 객체입니다. 일부 메서드(val, css, html, text, data, width, height, offset)는 이 방식으로 값을 전달할 수 있습니다.
요소 집합 관리
여러 표현식을 통해 생성된 요소 집합을 정제하고 조작하는 방법.
테스트용 페이지 chapter2/lab.operations.html에서 코드를 실험해 볼 수 있습니다.
요소 집합 크기 확인
size(): 요소 개수 반환 (현재는length사용 권장)
요소 접근 방법
- 인덱스로 접근
get(index)eq(index)first()last()
- 전체 요소 배열로 변환
toArray()
- 요소의 인덱스 확인
index(element)
요소 집합 분해 및 조작
- 집합 확장
$('img[alt]').add('img[title]');
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough');
$('p').add('hi there!');
- 요소 제거 및 필터링
$('img[title]').not('[title*=puppy]');
$('img').not(function() {
return !$(this).hasClass('keepMe');
});
$('td').filter(function() {
return this.innerHTML.match(/^\d+$/);
});
- 부분 추출
slice(begin, end)has(test)
- 요소 변환
var allIds = $('div').map(function() {
return this.id ? this.id : null;
}).get();
- 반복 처리
each(iterator)
계층적 관계 기반 선택
| 메서드 | 설명 |
|---|---|
children([selector]) |
자식 요소 선택 |
closest([selector]) |
가장 가까운 부모 요소 선택 |
contents() |
자식 노드(텍스트 포함) 모두 선택 |
next([selector]) |
다음 형제 요소 |
nextAll([selector]) |
다음 모든 형제 요소 |
nextUntil([selector]) |
지정된 요소까지의 다음 형제들 |
offsetParent() |
오프셋 기준 부모 요소 |
parent([selector]) |
부모 요소 |
parents([selector]) |
모든 상위 요소 |
parentsUntil([selector]) |
지정된 요소까지의 상위 요소들 |
prev([selector]) |
이전 형제 요소 |
prevAll([selector]) |
이전 모든 형제 요소 |
prevUntil([selector]) |
지정된 요소까지의 이전 형제들 |
siblings([selector]) |
형제 요소들 |
$(this).closest('div');
$(this).closest('div.myButtonContainer');
$(this).siblings('button[title="Close"]');
기타 요소 집합 조작 기법
wrappedSet.find('p cite');
var hasImage = $('*').is('img');
jQuery 체이닝 관리
$('img').filter('[title]').hide().end().addClass('anImage');
$('div').addClass('a').find('img').addClass('b').andSelf().addClass('c');