jQuery 사용 핵심 정리

셀렉터의 종류	셀렉터 표현 방법
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 요소와 일치
$(Selector[attr*=”value”])	attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치
$(Selector[attr~=”value”])	attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치
형식(셀렉터)	셀렉터 표현식
Child Selector	$(“parent > child”)
Descendant Selector	$(“ancestor descendant”)
Next Adjacent Selector	$(“prev + next”)
Next Siblings Selector	$(“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번째 요소 이전의 모든 요소를 선택합니다.
$(“td:not(‘.noselect’)”)	td 요소중에 클래스명이 “notSelect”인 항목을 제외한 요소의 집합을 선택
폼 필터 종류	선택 폼
:button	<input type=”button” />
: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()	이전 상태로 일치하는 집합을 반환합니다.
메서드	메서드 설명
.children([selector])	선택된 개체의 자식 중 Selector 와 동일한 요소를 가져옵니다.
.closest([selector])	선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져옵니다.
.find([selector])	선택된 개체에서 selector와 일치하는 요소를 가져옵니다.
.next([selector])	선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다.  일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾습니다.
.parent([selector])	선택된 개체에서 selector와 일치하는 부모의 요소를 가져옵니다.
.prev([selector])	선택된 개체에서 selector와 일치하는 바로 앞의 형제 요소를 가져옵니다.
.siblings([selector])	선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다.  자신은 제외합니다.
HTML 문서의 스타일 제어하기	메서드 설명
.css()	적용된 스타일을 가져오거나, 새로운 스타일을 적용
.hasClass(className)	선택된 개체에 className과 동일한 클래스가 존재 하는지에 대한 결과를 true/false 로 반환
.addClass()	$(“div”).addClass(“className”) 셀렉터를 통해 가져온 개체에 className이라는 클래스를 추가
.removeClass()	.addClass()와는 반대로 해당 className을 삭제
.toggleClass()	선택한 개체를 마치 스위치처럼 껏다(removeClass()),  켯다(addClass())하는 기능
.position(), .width(), .height()	선택된 개체의 위치값을 가지고 있는 개체를 반환
메서드	설명
.attr()	속성값을 추가
.removeAttr()	해당 속성에 대한 이름과 값이 모두 제거
.val()	선택된 요소의 값을 가져옴
.text() / .html()	선택된 개체의 text 또는 html을 가져오거나 사용자가 지정하는 값으로 설정하는 역할, text()의 경우 html을 제외한 순수 text만 가져오는 반면에 html()의 경우는 text를 포함한 모든 html의 내용까지 가져 오는 역할
.bind()	말 그대로 개체와 이벤트를 묶어주는 역할을
live()	동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있음
die()	live()의 반대
one()	one() 메서드를 통해 추가된 이벤트는 딱 한번만 실행이 되고 사라짐
이벤트	설명
.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 메서드 참고)