- jQuery는 HTML 페이지의 엘리먼트를 조회한 다음 그 결과를 이용하여 사용자가 원하는 동작을
수행하는 데 중점을 둔다.
- $() 함수는 jQuery() 함수의 별칭으로 셀렉터와 일치하고 문서에 정의된 순서를 따른
DOM 엘리먼트 배열을 가진 '특별한' 자바스크립트 객체를 반환한다.
1. 셀렉터
- jQuery가 지원하는 기본 CSS 셀렉터
$("p:even"): 모든 짝수 번째 <p> 엘리먼트 선택
$("tr:nth-child(1)"): 모든 테이블에서 첫째 행을 선택
$("body > div"): <body>의 바로 아래 자식인 <div> 엘리먼트 선택
$(a[href$='pdf']"): PDF 파일에대한 링크 선택
$(body > div:has(a)"): <body>의 바로 아래 자식이면서 링크를 포함하는 <div> 엘리먼트 선택
기본 CSS 셀렉터 사용하기
a: 모든 앵커<a> 엘리먼트와 일치
#specialID: specialID를 id로 가진 엘리먼트와 일치
.specialClass: specialClass를 클래스명으로 가진 모든 엘리먼트와 일치
a#specialID.specialClass: 앵커 태그에 spcialClass를 클래스명으로 가지면서 specialID를 id로 가진
엘리먼트와 일치
p a.specialClass: <p> 엘리먼트의 자손들 중에 specialClass를 클래스명으로 가진 모든 앵커
엘리먼트와 일치
자식 셀렉터, 컨테이너 셀렉터, 어트리뷰트 셀렉터 사용하기
*: 모든 엘리먼트와 일치
E: 태그명이 E인 모든 엘리먼트와 일치
E F: E의 자손이면서 태그명이 F인 모든 엘리먼트
E > F: E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E + F: E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E ~ F: E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E.C: 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일
E#I: 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일
E[A]: 어트리뷰트 A를 가지는 모든 엘리먼트 A와 일치
E[A=V]: 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]: 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]: 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A!=V]: 값이 아예 없거나 값이 V가 아닌 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]: 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
위치로 선택하기
:first: 컨텍스트에서 처음 일치하는 엘리먼트와 일치
li a:first: 리스트 아이템의 자손 중 첫 번째 링크를 반환
:last: 컨텍스트에서 마지막으로 일치하는 엘리먼트와 일치
li a:last: 리스트 아이템의 자손 중 마지막 링크를 반환
:first-child: 컨텍스트에서 첫 번째 자식 엘리먼트와 일치
li:first-child: 각 리스트의 첫 번째 리스트 아이템을 반환
:last-child: 컨텍스트에서 마지막 자식 엘리먼트와 일치
li:last-child: 각 리스트의 마지막 리스트 아이템을 반환
:only-child: 형제가 없는 모든 엘리먼트를 반환
:nth-child(n): 컨텍스트에서 n번째 자식 엘리먼트와 일치
li:nth-child(2): 각 리스트의 두번째 리스트 아이템을 반환
:nth-child(even:odd): 컨텍스트에서 짝수 또는 홀수 자식 엘리먼트와 일치
li:nth-child(even): 각 리스트의 짝수 번째 리스트 아이템을 반환
:nth-child(Xn+Y): 전달된 공식에 따른 n번째 자식 엘리먼트와 일치
li:nth-child(3n): 3의 배수인 리스트 아이템을 반환
:even: 컨텍스트에서 짝수 번째 엘리먼트와 일치
li:even: 모든 짝수 번째 리스트 아이템 반환
:odd: 컨텍스트에서 홀수 번째 엘리먼트와 일치
li:odd: 모든 홀수 번째 리스트 아이템 반환
:eq(n): n 번째로 일치하는 엘리먼트와 일치
:gt(n): n 번째 엘리먼트를 포함하지 않은 이후의 엘리먼트와 일치
:lt(n): n 번째 엘리먼트를 포함하지 않은 이전의 엘리먼트와 일치
CSS와 jQuery 정의 필터 셀렉터
:animated: 현재 애니메이션이 적용되고 있는 엘리먼트를 선택
:button: 버튼 엘리먼트만 선택
:checkbox: 체크박스 엘리먼트만 선택
:checked: 선택된 체크박스 또는 라디오 버튼만 선택
:contains(food): 텍스트 food를 포함하는 엘리먼트만 선택
:disabled: 비활성화 상태인 엘리먼트만 선택
:enabled: 활성화 상태인 엘리먼트만 선택
:file: 파일 타입 엘리먼트만 선택
:has(selector): 셀렉터와 일치한 최소 한 개 이상의 엘리먼트를 포함하는 엘리먼트만 선택
:header: 헤더 엘리먼트만 선택
:hidden: 감춰진 엘리먼트만 선택
:image: 이미지 타입의 엘리먼트만 선택
:input: 폼 엘리먼트만 선택
:not(selector): 셀렉터의 값을 반대로 변경
:parent: 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택
:password: 패스워드 엘리먼트만 선택
:radio: 라디오 엘리먼트만 선택
:reset: 리셋 버튼만 선택
:selected: 선택된 상태의 옵션 엘리먼트만 선택
:submit: 전송 버튼만 선택
:text: 텍스트 타입 엘리먼트만 선택
:visible: 보이는 엘리먼트만 선택
2. 확장 집합
관계를 이용한 확장집합 얻기
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]): 확장 엘리먼트의 모든 형제를 포함하는 확장 집합 반환
'jQuery' 카테고리의 다른 글
| jquery JSON - stringify/ (0) | 2014.08.29 |
|---|---|
| jQuery API List - 확장 집합 관련/ (0) | 2014.07.31 |
| jQuery jqXHR 객체 (0) | 2014.07.18 |
| jQuery Ajax Sample (0) | 2014.07.17 |
| jQuery Ajax 사용하기 (0) | 2014.07.17 |
