셀렉터의 종류

셀렉터 표현 방법

All Selector

$("*")

ID Selector

$("#id")

Element Selector

$("elementName")

Class Selector

$(".className")

Multiple Selector

$("selector1, selector2, selector3, selectorN")

형식(셀렉터)

설명

$(Selector[attr])

attr 속성(attribute)값을 가지는 Selector 요소와 일치

$(Selector[attr=”value”])

attr 속성의 값이 value와 동일한 값인 Selector 요소와 일치

$(Selector[attr!=”value”])

attr 속성의 값이 value와 같지 않은 값인 Selector 요소와 일치

$(Selector[attr^=”value”])

attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치

$(Selector[attr$=”value”])

attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치

 형식(셀렉터)

 셀렉터 표현식

 부모(Parent) 요소 바로 아래 자식(Child)인 요소를 반환

 $(“parent > child”)

조상(Ancestor)과 일치하는 요소에 포함된 모든 후손(Descendant)중에

후손의 요소와 일치하는 모든 항목을 반환합니다.

 $(“ancestor descendant”)

Prev 요소 바로 다음에 나오는 형제(Adjacent) 수준의 

next 요소와 일치하는 항목을 반환합니다.

 $(“prev + next”)

Prev 요소 이후에 형제 요소 중 siblings와 동일한 요소를 반환합니다.

$(“#prev ~ div”)의 경우 id의 값이 prev인 요소를 찾고 해당 요소를

제외한 다음 형제 요소 중에 div와 동일한 요소를 찾아 반환을 합니다.

 $(“prev ~ siblings”)

 형식(표현식)

 설명

 :animated

 에니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다.

 :eq(index)

 Index에 해당하는 요소를 반환합니다.(단일요소)

 :even

 짝수의 요소를 반환합니다. (0부터 시작)

 :odd

 홀수의 요소를 반환합니다. (0부터 시작)

 :first

 첫번째 요소를 반환합니다.

 :last

 마지막 요소를 반환합니다.

 :gt(index)

 Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다.

 :lt(index)

 Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다.

 :header

 모든 헤더 요소들을 반환합니다.(h1,h2,h3….)

 :not(selector)

 Selector와 일치되는 요소를 제외한 나머지 요소를 반환합니다.

 :focus

 현재 포커스가 위치한 요소를 반환합니다. (1.6 이상에서 지원)

 $(“td:eq(0)”)

 td 요소중에 첫번째 항목만을 선택합니다. (eq의 index는 0부터 시작입니다.)

 eq의 index는 0부터 시작을 하며 0 이면 요소중 첫번째, 1이면 두번째 요소가 됩니다.

 $(“td:even”)

 $(“td:odd”)

 td 요소중에 짝/홀수번째 요소를 선택합니다. 짝/홀수의 구분은 eq의 index와 동일하게 구분이 됩니다.

 $(“td:first”)

 $("td:last")

 td 요소중에 첫번째 요소, 마지막 요소를 선택합니다.

 $(“td:gt(2)”)

 $(“td:lt(2)”)

 td 요소중에 2번째 요소 이후의 모든 요소를 선택하거나 2번째 요소 이전의 모든 요소를 선택합니다.

 폼 필터 종류

 선택 폼

:button

<input type=”butto” />

:checkbox

<input type=”checkbox” />

:checked

<input type=”checkbox” checked=”checked” />

:disabled

<input type=”text” disabled=”disabled” />

:enabled

<input type=”text” enabled=”enabled” />

:file

<input type=”file” />

:focus

(1.6 이상에서 지원)

:image

<input type=”image” />

:input

<input> 모든 input 요소

:password

<input type=”password” />

:radio

<input type=”radio” />

:reset

<input type=”reset” />

:selected

<select><option selected="selected"></option></select>

:submit 

<input type=”submit” />

:text

<input type=”text” />

:hidden

<input type=”hidden” />

필터 종류 및 형식

 필터 설명

:first-child

자식 요소 중 첫번째에 해당하는 요소를 모두 반환합니다.

:last-child

자식 요소 중 마지막에 해당하는 요소를 모두 반환합니다.

:nth-child(index/odd/even/equation)

자식 요소 중 지정된 값에 해당하는 요소를 모두 반환합니다.

:only-child

자신이 부모 요소와 유일한 자식인 모든 요소를 반환합니다.

 메서드 종류(형식)

 메서드 설명

 .eq(index)

 선택한 요소들 중에서 인덱스와 일치하는 단일 요소를 선택 반환합니다.

 .filter(expr)

 선택한 요소에서 표현식(expr)과 일치하는 요소의 집합을 선택 반환합니다.

 표현식에는 selector, function, element, jQuery object가 올 수 있습니다.

 .first()

 선택한 요소에서 첫 번째 단일 요소를 선택 반환합니다.

 .has(selector)

 선택한 요소에서 selector항목을 가지고 있는 요소의 집합을 선택 반환합니다.

 .is(expr)

 표현식과 일치하는 조건이 있으면 true를 반환합니다.

 표현식에는 selector, function, element, jQuery object가 올 수 있습니다.

 .last()

 .first() 와 반대되는 메서드로 마지막 단일 요소를 선택 반환합니다.

 .map(callback)

 jQuery 개체에 있는 요소의 집합을 다른 집합으로 변경해서 이동 시킵니다.

 .not(expr)

 표현식과 일치하지 않는 요소의 집합을 선택 반환합니다.

 .slice(start,[end]

 선택한 요소에서 start, end번 째에 해당하는 집합을 선택 반환합니다.

 메서드

 메서드 설명

 .add()

 일치하는 요소의 집합에 요소를 추가합니다.

 .andSelf()

 현재 설정 스택에 요소의 이전 설정을 추가합니다.

 .contents()

 텍스트 및 주석 노드를 포함 일치하는 요소 집합의 자식 집합을 반환합니다. 

 .end()

이전 상태로 일치하는 집합을 반환합니다.

$(div).find(p).end().addClass(“myClass”);와 같은 구문이 있다고 한다면 

myClass라는 class 속성이 div에 적용이 됩니다. 

.end() 메서드가 없다면 “div” 요소 안에 있는 “p” 요소에 class 속성이 적용이 되지만 .end() 메서드의 호출로 인해 “p” 요소 이전의 개체인 $(“div”) 개체가 다시 호출이 되고 호출된 $(“div)에 class 속성이 적용이 되는 것입니다.

메서드

메서드 설명

 .children([selector])

 선택된 개체의 자식 중 Selector 와 동일한 요소를 가져옵니다.

 .closest([selector])

 선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져옵니다.

 .find([selector])

 선택된 개체에서 selector와 일치하는 요소를 가져옵니다.

간단히 설명을 붙이자면, $(“div”).find(“a”)라고 했을 경우 

div 요소를 우선 탐색하여 가져온 개체에서 “a” 태그가 존재하는 요소를 가져옵니다.

 .next([selector])

 선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다.
 일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾습니다.

 .parent([selector])

 선택된 개체에서 selector와 일치하는 부모의 요소를 가져옵니다.

 .prev([selector])

 선택된 개체에서 selector와 일치하는 바로 앞의 형제 요소를 가져옵니다.

 .siblings([selector])

 선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다.
 자신은 제외합니다.

 이벤트 종류(형식)

 이벤트 설명

 .blur()

 요소에서 포커스를 잃을 경우에 발생하는 이벤트 입니다.

 .change()

 <input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트 입니다.

 .click()

 마우스 클릭 시 발생하는 이벤트 입니다.

 .dblclick()

 마우스를 더블클릭 했을 경우 발생하는 이벤트 입니다.

 .focus()

 요소에 포커스 되었을 때 발생하는 이벤트 입니다.

 .hover()

 마우스가 요소 위에 위치했을 때 발생하는 이벤트 입니다.

 .keydown()

 키 입력 시 발생되는 이벤트이며, 모든 키에 대해 적용이 됩니다.

 .keypress()

 keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 
 enter, tab등의 특수키에는 이벤트가 발생되지 않습니다.

 .keyup()

 키 입력 후 발생되는 이벤트 입니다.

 .mousedown()

 마우스 클릭 시 발생하는 이벤트입니다.

 .mouseenter()

 선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트 입니다.

 .mouseleave()

 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 입니다.
 인터넷익스플로러에서만 발생되는 이벤트지만 jQuery는 브라우저 관계없이 
 사용할 수 있도록 시뮬레이터 됩니다.

 .mouseout()

 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트입니다.

 .mouseup()

 마우스 클릭 후 발생되는 이벤트입니다.

 .ready()

 DOM이 모두 준비 되었을 때 발생하는 이벤트입니다.

 .resize()

 resize 될 경우 발생하는 이벤트입니다.

 .scroll()

 HTML 문서가 스크롤 되었을 때 발생하는 이벤트입니다.

 .select()

 선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트입니다.

 .submit()

 Submit이 일어날 때 발생하는 이벤트입니다. (Form 메서드 참고)