[jQuery] Element Selector Note
- Nest
- Development
- Category
- Javascript
- Hit
- 554
- Star
- 0
엘리먼트 셀렉터
코드 | 설명 |
---|---|
* | 모든 엘리먼트와 일치 |
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의 생략은 *.C와 동일함 |
E#I | 아이디가 I인 엘리먼트 E와 일치. E의 생력은 *#I와 동일함. |
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와 일치 |
DOM에서 위치를 기반으로 엘리먼트를 선택
코드 | 설명 |
---|---|
: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(event|odd) | 짝수 또는 홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트 반환 |
:nth-child(Xn + Y) | 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환, li:nth-child(5n+1) 은 5의 배수 +1번째 아이템을 반환 |
:even / :odd | 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다. |
:eq(n) | n번째로 일치하는 엘리먼트. |
:gt(n) | n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치. |
:lt(n) | n번재 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치. |
jQuery 정의 필터 셀렉터. 대상 엘리먼트를 식별해내는 데 강력한 기능을 준다.
코드 | 설명 |
---|---|
:animated | 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다. |
:button | 모든 버튼을 선택한다.(input[type=submit], input[type=rest], input[type=button], button) |
:checkbox | 체크 박스 엘리먼트만 선택한다.( input[type=checkbox] ) |
:checked | 선택된 체크박스나 라디오 박스만 선택한다. |
:contains(foo) | 텍스트foo를 포함하는 엘리먼트만 선택한다. |
:disabled | 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다. |
:enabled | 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다. |
:file | 모든 파일 엘리먼트를 선택한다. ( input[type=file] ) |
:header | 헤더 엘리먼트만 선택한다. 예를 들어<h1>부터<h6>까지의 엘리먼트를 선택한다. |
:hidden | 감춰진 엘리먼트만 선택한다. |
:image | 폼 이미지 타입를 선택한다. ( input[type=image] ) |
:input | 폼 엘리먼트를 선택한다. ( input, select, textarea, button ) |
:not(filter) | 필터의 값을 반대로 변경한다. |
:parent | 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다. |
:password | 패스워드 타입의 엘리먼트만 선택한다. ( input[type=password] ) |
:radio | 라디오 타입 버튼 엘리먼트만 선택한다. ( input[type=radio] ) |
:reset | 리셋 타입의 버튼을 선택한다. ( input[type=reset], button[type=reset] ) |
:selected | 선택된 엘리먼트만 선택한다. |
:submit | 전송 버튼을 선택한다. ( button[type=submit], input[type=submit] ) |
:text | 텍스트 엘리먼트만 선택한다. ( input[type=text] ) |
:visable | 보이는(visable) 엘리먼트만 선택한다. |