JQuery_제이쿼리 문서 객체 선택자와 조작법(2)

4. 탐색 선택자

: 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택한다.

 

- 위치 탐색 선택자

: 기본 선택자로 선택한 요소는 배열에 담긴다. 이때 배열의 인덱스를 사용하면 특정 요소를 더 정확하게 선택할 수 있다.

종류	사용법	설명
$("요소 선택:first") $("요소 선택").first()	$("li:first") $("li").first()	전체 <li> 요소 중 첫 번째 요소만 선택한다.
$("요소 선택:last") $("요소 선택"):last()	$("li:last") $("li").last()	전체 <li> 요소 중 마지막 요소만 선택한다.
$("요소 선택:odd")	$("li:odd")	<li> 요소 무리 중 짝수 번째(홀수 인덱스)요소만 선택한다.
$("요소 선택:even")	$("li:even")	<li> 요소 무리 중 홀수 번째(짝수 인덱스)요소만 선택한다.
$("요소 선택:first-of-type")	$("li:first-of-type")	<li> 요소 무리 중 첫 번째 요소만 선택한다.
$("요소 선택:last-of-type")	$("li:last-of-type")	<li> 요소 무리 중 마지막 요소만 선택한다.
$("요소 선택:nth-child(숫자)")	$("linth-child(3)")	<li> 요소 무리 중 세 번째 요소만 선택한다.
$("요소 선택:nth-child(숫자n)")	$("li:nth-child(3n)")	<li> 요소 무리 중 3의 배수 번째에 있는 요소만 선택한다.
$("요소 선택:nth-last-of-type(숫자)")	$("li:nth-last-of-type(2)")	<li> 요소 무리 중 마지막 위치로부터 두 번째에 있는 요소만 선택한다.
$("요소 선택:only-child")	$("li:only-child")	부모 요소 내에 <li>요소가 1개뿐인 <li>요소만 선택한다.
$("요소 선택:eq(index)") $("요소 선택").eq(index)")	$("li:eq(2)") $("li").eq(2)	<li> 요소 중 인덱스 2가 참조하는 요소를 불러온다.
$("요소 선택:gt(index)")	$("li:gt(1)")	<li> 요소 중 인덱스 1보다 큰 인덱스가 참조하는  요소를 불러온다.
$("요소 선택:lt(index)")	$("li:lt(1)")	<li> 요소 중 인덱스 1보다 작은 인덱스가 참조하는 요소를 불러온다.
$("요소 선택").slice(index)	$("li").slice(2)	<li> 요소 중 인덱스 2부터 참조하는 요소를 불러온다.

 

- 속성 탐색 선택자

: 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자이다.

종류	사용법	설명
$("요소 선택[속성]")	$("li[title]")	<li>요소 중 title 속성이 포함된 요소만 선택한다.
$("요소 선택[속성=값]")	$("li[title='리스트']")	<li>요소 중 title 속성값이 '리스트'인 요소만 선택한다.
$("요소 선택[속성^=텍스트]")	$("a[href^='http://']")	<li>요소 중 href 속성값이 'http://"로 시작하는 요소만 선택한다.
$("요소 선택[속성$=텍스트]")	$("a[href$='.com']")	<li>요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택한다.
$("요소 선택[href*=텍스트]")	$("a[href*='easypub']")	<li>요소 중 href 속성값 중에서 'easypub'을 포함하는 요소만 선택한다.
$("요소 선택:hidden")	$("li:hidden")	<li>요소 중 숨겨져 있는 요소만 선택한다.
$("요소 선택:visible")	$("li:visible")	<li>요소 중 보이는 요소만 선택한다.
$(":text")	$(":text")	<inpu> 요소 중 type속성값이 "text"인 요소만 선택한다.
$(":selected")	$(":selected")	selected속성이 적용된 요소만 선택한다.
$(":checked")	$(":checked")	checked속성이 적용된 요소만 선택한다.

 

- 그 외의 선택자 < 콘텐츠 탐색 선택자

: 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자이다.

종류	사용법	설명
$("요소 선택:contains(텍스트)")	$("li:contains('내용2')")	<li>요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택한다.
$("요소 선택").contents()	$("p").contents()	선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택한다.
$("요소 선택:has(요소명)") $("요소 선택").has(요소명)	$("li:has('span')") $("li").has('span')	<li>요소 중 <span>을 포함하는 요소만 선택한다.
$("요소 선택:not(:제외 요소)") $("요소 선택").not(:제외 요소)	$("li:not(:first)") $("li")	<li>요소 중 첫 번째 요소만 제외하고 선택한다.
$(요소 선택).filter(필터 요소)	$("li").filter(".list2")	<li>요소 중 class값이 "list2"인 요소만 선택한다.
$(요소 선택1).find(요소 선택2)	$("li").find("strong")	<li>요소의 하위 요소인 <strong>만 선택한다.
$("요소 선택1").closest("요소 선택2")	$("strong").closest("div")	<strong>을 감싸는 상위 <div>요소 중 가장 가까운 상위 요소를 선택한다.
end()	$("li").children("a").end()	필터링이 실행되기 이전의 요소인 <li>가 선택된다.

 

- 선택자와 함께 알아두면 유용한 메서드

종류	사용법	설명
is(":요소 상태")	$(".txt1").is(":visible")	선택한 요소가 보이면 true를 반환한다.
$.noConflict()	var 변수=$.noConflict(); 변수("요소 선택")	$.noConflict()함수를 이용하면 현재 제이쿼리에서 사용중인 $메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용한다.
get()	$("요소 선택").get(0). style.color="#f00"	선택자에 get(0)을 적용하면 자바스크립트 DOM방식의 스타일을 사용할 수 있다.

 

5. 제이쿼리 배열 관련 메서드

-배열 관련 메서드의 종류

종류	사용법	설명
each()/ $.each()	$("요소 선택").each(function) $.each($("요소 선택"),function)	배열에 저장된 문서 객체만큼 메서드가 반복 실행된다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다.
$.map()	$.map(Array, function)	배열에 저장된 데이터 수만큼 메서드가 반복 실행된다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 배열 객체를 반환한다.
$.grep()	$grep(Array, function)	배열에 저장된 데이터 수만큼 메서드가 실행된다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환한다.
$.inArray()	$.inArray(data, Array, start index)	배열 안에서 데이터를 찾는다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환한다. star index의 값을 지정하면 해당 위치부터 데이터를 찾는다.
$.isArray()	$.isArray(object)	입력한 객체가 배열 객체라면 true를, 아니면 false를 반환한다.
$.merge()	$.merge(Array1, Array2)	인자값으로 입력한 2개의 배열 객체를 하나로 그룹화한다.
index()	$("요소 선택").index("지정 요소 선택")	선택자로 요소를 먼저 선택한다. 그런 다음 지정한 요소의 인덱스 정보를 가져온다.