jquery_in_depth_1

요소 선택하기

jQuery는 '효과적인 선택'을 위해 선택자(selector)를 사용한다. 선택자는 원래 CSS에서 디자인을 적용할 HTML 마크업을 선택하기 위해 사용되었지만, 간략하면서도 강력한 기능으로 jQuery와 같은 라이브러리에서도 HTML 요소 선택을 위해 사용된다.

기본 선택자

선택자	사용 예	설명
전체 선택자	$("*")	모든 요소를 선택한다.
ID 선택자	$("#content")	지정한 ID를 가진 요소를 선택한다.
클래스 선택자	$(".title")	지정한 태그 이름이 주어진 요소를 모두 선택한다.
태그 선택자	$("div")	지정한 클래스 이름이 주어진 요소를 모두 선택한다.

AND 조합
$("div#a") : 태그명이 div이면서 동시에 ID가 a인 것을 선택한다.
$(".test.main") : 클래스명이 test와 main이 모두 부여된 것을 선택한다.

OR 조합
$("#a, h1") : ID가 a이거나 태그명이 h1인 것을 선택한다.

계층 선택자

HTML DOM 트리의 계층적 구조를 이용한 선택자이다. 4가지 선택자가 제공된다.

선택자	사용 예	설명
자식	$("#a > h1")	직계 자식 요소를 선택한다. (#a 요소의 직계 자식 h1)
후손	$("#a h1")	후손 요소를 선택한다. (#a 요소에 포함된 후손 중 h1)
다음 인접	$("#a + h1")	#a 요소의 동등한 계층 구조에서 다음 요소가 h1인 것을 선택한다.
다음 형제	$("#a ~ h1")	#a 요소의 동등한 계층 구조에서 다음 형제 요소중 h1 요소를 선택한다.

특성 선택자

HTML 요소의 특성을 이용하는 선택자이다. 찾아서 선택하는 속도가 느리기 때문에 꼭 필요한 경우에만 사용하는 것이 바람직하다. 특히 구형 브라우저에서는 성능 차이가 확연하게 드러나기 때문에 주의해서 사용해야 한다.

선택자	사용 예	설명
[특성명]	$("[readonly]")	특성값과는 관계없이 [readonly] 특성을 가진 요소를 선택한다.
[특성명=값]	$("name='abc'")	name 특성에 값이 abc인 요소를 선택한다.
[특성명*=값]	$("src='icon']")	src 특성에 icon 문자가 포함된 요소를 선택한다.
[특성명~=값]	$("alt~='날씨'")	alt 특성에 '날씨'라는 문자가 단어로서 포함된것만 선택한다.
[특성명|=값]	$("hreflang|='en'")	hreflang 특성의 접두어가 en인 것을 선택한다.
[특성명^=값]	$("[href^='https://']")	https://로 시작하는 href 특성값을 가진 요소를 선택한다.
[특성명$=값]	$("[href$='.com']")	'.com'으로 끝나는 href 특성값을 가진 요소를 선택한다.
[특성명!=값]	$("input[name!='name']")	input 태그이면서 name 특성이 'name'이 아닌 것을 선택한다.

필터 선택자

필터 선택자는 콜론(:) 기호로 시작하는 문자열 형식을 사용한다.

위치 필터 선택자

위치 필터 선택자는 여러 개의 요소 중에서 특정 위치의 요소를 선택할 때 사용한다.

선택자	설명
:first	첫번째 요소를 선택한다.
:last	마지막 요소를 선택한다.
:eq(i)	i번 인덱스 위치의 요소를 선택한다.
:gt(i)	i번 위치 이후의 모든 요소를 선택한다.
:lt(i)	i번 위치 이전의 모든 요소를 선택한다.
:even	짝수 번 인덱스 위치의 모든 요소를 선택한다.
:odd	홀수 번 인덱스 위치의 모든 요소를 선택한다.

입력 폼 필터 선택자

입력 폼 필터 선택자는 사용자에게 입력 받기 위해 사용되는 HTML 요소를 선택하는 기능을 제공한다. 다른 선택자로 대체도 가능하다. 예를 들어 ':checkbox'의 경우 '[type=checkbox]'와 동일한 기능을 제공하므로 익숙한 것을 사용하면 된다.

선택자	설명
:button	버튼 요소를 선택한다.
:checkbox	type='checkbox'인 체크박스 요소를 선택한다.
:text	type='text'인 요소를 선택한다.
:image	type='image'인 input 요소를 선택한다.
:file	type='file'인 input 요소를 선택한다.
:password	type='password'인 input 요소를 선택한다.
:radio	type='radio'인 radio button 요소를 선택한다.
:reset	type='reset'인 input 요소를 선택한다.
:submit	type='submit'인 input 요소를 선택한다.
:input	모든 입력 폼 요소를 선택한다.

보임 상태 필터 선택자

보임 상태에 따라 요소를 선택하는 기능을 제공하며 두 가지가 제공된다.

선택자	설명
:visible	화면에 보이는 요소를 선택한다.
:hidden	화면에 보이지 않는 요소를 선택한다.

자식 필터 선택자

자식 필터 선택자는 자식 요소 중 일부 요소를 선택하는 기능을 제공한다.

선택자	설명
:first-child	자식 요소 중 첫번째 요소를 선택한다.
:first-of-type	동일한 요소명을 가지는 형제 요소 사이에서 첫 번째 요소를 선택한다.
:last-child	자식 요소중 마지막 요소를 선택한다.
:last-of-type	동일한 요소명을 가지는 형제 요소 사이에서 마지막 요소를 선택한다.
:nth-child()	자식 요소 중 n번째 요소를 선택한다.
:nth-last-child()	자식 요소중 마지막에서 n번째 요소를 선택한다.

콘텐트 필터 선택자

콘텐트 필터 선택자는 콘텐츠 영역값으로 필터링 하는 선택자이다.

선택자	설명
:contains()	지정한 문자열을 포함하는 요소를 선택한다.
:empty	콘텐트 영역이 비어있는 요소만 선택한다.
:has()	has() 내부에 지정된 선택자로 선택될 수 있는 요소를 포함하고 있는 요소를 선택한다.
:not()	not()에 포함된 선택자에 부합되지 않는 요소만 선택한다.
:parent	적어도 하나의 자식 요소를 가지고 있는 요소만 선택한다.