예제

설명

*

모든엘리먼트와 일치

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를 가지는 모든 엘리먼트 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와 일치

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번째 자식 엘리먼트와 일치. Y가 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수인 리스트 아이템을 반환한다. li:nth-child(5n+1)은 5의 배수 + 1번째 리스트 아이템을 반환한다.

:even

컨텍스트에서 짝수번째 엘리먼트와 일치. li:even은 모든 짝수 번째 리스트 아이템을 반환한다. 

:odd

컨텍스트에서 홀수번째 엘리먼트와 일치. li:odd은 모든 홀수번째 리스트 아이템을 반환한다.

:eq(n)

n번째로 일치하는 엘리먼트와 일치

:gt(n)

n번째 엘리먼트를 포함하지 않은 이후의 엘리먼트와 일치

:lt(n)

n번째 엘리먼트를 포함하지 않은 이전의 엘리먼트와 일치.

셀렉터

설명

:animated

현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.

:button

버튼 엘리먼트만 선택한다.( input[type=submit], input[type=reset], input[type=button], button)

:checkbox

체크박스 엘리먼트만 선택한다.(input[type=checkbox])

:checked

선택된 체크박스 또는 라디오 버튼만 선택한다.

:contains(food)

텍스트 food를 포함하는 엘리먼트만 선택한다.

:disabled

비활성화 상태인 엘리먼트만 선택한다.

:enabled

활성화 상태인 엘리먼트만 선택한다.

:file

파일 타입 엘리먼트만 선택한다(input[type=file])

:has(selector)

셀렉터와 일치한 최소 한 개 이상의 엘리먼트를 포함하는 엘리먼트만 선택한다.

:header

헤더엘리먼트만 선택한다. 예를 들어 <h1>에서 <h6>까지의 엘리먼트를 선택한다.

:hidden

감춰진 엘리먼트만 선택한다.

:image

이미지 타입의 엘리먼트만 선택한다.

:input

폼 엘리먼트만 선택한다.(input, select, textarea, button)

:not(selector)

셀렉터의 값을 반대로 변경한다.

:parent

빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.

:password

패스워드 엘리먼트만 선택한다.(input[type=password])

:radio

라디오 엘리먼트만 선택한다.(input[type=radio])

:reset

리셋버튼만 선택한다.(input[type=reset]이나 button[type=reset])

:selected

선택된 상태의 옵션(<option>)엘리먼트만 선택한다.

:submit

전송 버튼만 선택한다.(button[type=submit], input[type=submit])

:text

텍스트 타입 엘리먼트만 선택한다.(input[type=text])

:visible

보이는 엘리먼트만 선택한다.

메서드

설명

children([selector])

확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환한다.

closest([selector])

존재할 경우, 전달된 표현식과 일치하는 가장 가까운 조상 하나로 구성된 확장 집합을 반환한다.

contents()

확장 집합에서 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환한다. 여기에는 텍스트 노드도 포함되며 주로 <iframe>엘리먼트의 콘텐츠를 얻고자 사용한다.

next([selector])

확장 집합의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다.

nextAll([selector])

확장 집합의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다.

nextUntil([selector])

확장집합의 각 확장 엘리먼트 다음에 나오는 모든 형제부터 셀렉터와 일치하는 엘리먼트 전까지의 확장집합을 반환한다. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 형제 엘리먼트가 선택된다.

offsetParent()

확장집합에 상대 확은 절대적으로 가장 가까운 곳에 위치한 첫 번째 엘리먼트의 부모로 구성된 확장 집합을 반환한다. 

parent([selector])

확장 집합에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환한다. 

parents([selector])

모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환한다. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트는 포함되지 않는다.

parentsUntil[selector]

확장 집합에 있는 엘리먼트의 모든 조상부터 셀렉터와 일치하는 엘리먼트 전까지의 확장집합을 반환한다. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 조상 엘리먼트가 선택된다.

prev([selector])

확장집합의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장집합을 반환한다.

prevAll([selector])

확장 집합의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다. 

prevUntil([selector])

확장 집합 내에 있는 엘리먼트의 모든 이전 형제부터 셀렉터와 일치하는 엘리먼트 전까지의 확장 집합을 반환한다. 셀렉터와 일치하는 엘리먼트가 없거나 셀렉터가 생략되면 모든 이전 형제 엘리먼트들이 선택된다. 

siblings([slector])

확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환한다.

jQuery의 표준화된 이름

DOM에서 사용하는 이름

cellspacing

cellSpacing

class

className

colspan

colSpan

cssFloat

인터넷 익스플로러에서는 styleFloat, 그외에는 cssFloat

float

인터넷 익스플로러에서는 styleFloat, 그외에는 cssFloat

for

htmlFor

frameborder

frameBorder

maxlength

maxLength

readonly

readOnly

rowspan

rowSpan

styleFloat

인터넷 익스플로러에서는 styleFloat, 그외에는 cssFloat

tabindex

tabIndex

usemap

useMap