조작하려는 엘리먼트 선택하기
전 장에서도 간단히 살펴보았지만 우선 jQuery매소드를 사용하기 위해선 페이지에서 조작할 엘리먼트를 선택해야 한다.
여기선 이런 엘리먼트를 선택하는 방법에 대해 알아보자.
- 기본 CSS 선택자를 이용해 선택하기
- 위치로 선택하기
- jQuery 정의 선택자로 선택하기
위의 세가지 방법을 이용해 엘리먼트를 선택하는 것에 대해 알아보자.
기본 CSS 선택자 사용하기
CSS를 사용해 본 유저라면 이 선택 기법은 익숙할 것이다.엘리먼트의 ID, CSS 클래스명, 태그명,
페이지 엘리먼트의 DOM 계층 구조를 이용해 엘리먼트를 선택하는 기법이 그것들이며 아래의 예를 보자.
- a - 모든 링크 엘리먼트와 일치하는 선택자
- #specialID - specialID를 아이디로 가지는 엘리먼트와 일치하는 선택자
- .specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 선택자
- a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 링크와 일치하는 선택자
- p a.specialClass - 단락 엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든 링크와 일치하는 선택자
이러한 기존의 CSS 선택자를 이용하여 엘리먼트를 선택할 수 있게 되는데, jQuery가 지원하는 선택자들은 아래와 같다.
| 선택자 | 내 용 |
| * | 모든 엘리먼트 |
| E | 태그명이 E인 모든 엘리먼트 |
| E F | E의 자손이면서 태그명이 F인 모든 엘리먼트 |
| E>F | E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트 |
| E+F | E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F |
| E~F | E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F |
| E:has(F) | 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트 |
| E.C | 클래스명 C를 가지는 모든 엘리먼트 E |
| E#I | 아이디가 I인 엘리먼트 E |
| E[A] | 속성 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 | 페이지에서 처음으로 일치하는 엘리먼트 |
| :last | 페이제에서 마지막으로 일치하는 엘리먼트 |
| :first-child | 첫 번째 자식 엘리먼트 |
| :last-child | 마지막 자식 엘리먼트 |
| :only-child | 형제가 없는 모든 엘리먼트를 반환 |
| :nth-child(n) | n번째 자식 엘리먼트 |
| :nth-child(even|odd) | 짝수 혹은 홀수 자식 엘리먼트 |
| :nth-child(Xn+Y) | 전달된 공식에 따른 n번째 자식 엘리먼트 |
| :even / :odd | 페이지 전체의 짝수/홀수 엘리먼트 |
| :eq(n) | n번째로 일치하는 엘리먼트 |
| :gt(n) | n번째 엘리먼트 이후의 엘리먼트와 일치 |
| :lt(n) | n번째 엘리먼트 이전의 엘리먼트와 일치 |
jQuery 정의 선택자 사용하기
CSS 선택자를 이용해 우리는 원하는 DOM 엘리먼트를 선택할 수 있었지만 때로는 이것만으로 표현할 수 없는
특성이 있는 엘리먼트를 선택해야 한다.
예를 들어 라디어 버튼 중 check가 된 엘리먼트만을 선택하기에는 CSS선택자만으로는 부족하다.
이렇듯 부족한 부분을 jQuery 정의 선택자를 이용하여 채울 수 있다.
| 선택자 | 설 명 |
| :animated | 현재 애니메이션이 적용되고 있는 엘리먼트 |
| :button | 모든 버튼을 선택 |
| :checkbox | 체크박스 엘리먼트 선택 |
| :checked | 선택된 체크박스나 라디오 버튼을 선택 |
| :contains(foo) | 텍스트 foo를 포함하는 엘리먼트 선택 |
| :disabled | 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 |
| :enabled | 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택 |
| :file | 모든 파일 엘리먼트를 선택 |
| :header | 헤더 엘리먼트 선택 |
| :hidden | 감춰진 엘리먼트 선택 |
| :image | 폼 이미지를 선택 |
| :input | 폼 엘리먼트만 선택 |
| :not(filter) | 필터의 값을 반대로 변경 |
| :parent | 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 |
| :password | 패스워드 엘리먼트 선택 |
| :radio | 라디오 버튼 엘리먼트 선택 |
| :reset | 리셋 버튼을 선택 |
| :selected | 선택된 엘리먼트 선택 |
| :submit | 전송 버튼을 선택 |
| :text | 텍스트 엘리먼트 선택 |
| :visible | 보이는 엘리먼트 선택 |
여러 jQuery 정의 선택자가 폼과 관련되며 덕분에 특정 엘리먼트의 타입이나 상태를 세련되게 표현할 수 있다.
선택자 필터도 조합할 수 있다. 예를 들어 활성화 되고 선택된 체크박스만 일치시키려 한다면 다음과 같다.
:checkbox:checked:enabled |
새로운 HTML 생성하기
jQuery() 함수는 페이지의 엘리먼트를 선택할 뿐 아니라 새로운 HTML을 생성할 수도 있다.
이 표현식은 페이지에 추가할 새로운 <div> 엘리먼트를 생성한다.
다음의 코드를 이용하여 <div> 엘리먼트를 두 개 생성해보자.
$("<div class='foo'>내가 foo를 가졌다.</div><div>나는 foo를 가지지 않았다.")
.filter(".foo").click(function(){
alert("내가 foo이다.");
})
.end().appendTo("#someParentDiv");
|
위의 코드는 <div> 엘리먼트를 생성하는데 첫번째 <div> 엘리먼트는 foo 클래스가 있고,
다른 하나에는 없다. 생성한 첫번째 <div> 엘리먼트를 클릭하면 alert()가 실행된다.
마지막으로 end()메서드를 이용해 필터링 이전의 두 <div>엘리먼트를 지닌 집합으로 돌아간 뒤,
이 집합을 id가 someParentDiv인 엘리먼트에 덧붙인다.
