[Do it!] 06. 제이쿼리 문서 객체 선택자와 조작법 [3.제이쿼리 탐색 선택자]

탐색 선택자

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

• 위치 탐색 선택자 : 배열의 인덱스를 사용해 선택
• 속성 탐색 선택자 : 배열에 담긴 요소 중 지정된 속성과 값으로 선택

 

위치 탐색 선택자

기본 선택자로 선택한 요소는 배열에 담김

배열의 인덱스를 사용하면 특정 요소를 좀 더 정확히 선택할 수 있음

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

 

제이쿼리 배열 관련 메서드

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

 

1. each() / $.each()

배열에 저장된 요소의 개수만큼 메서드를 반복실행 : 매개변수1,매개변수2에 요소-인덱스값 저장

1) $("요소").each(function(매개변수1, 매개변수2){ })

2) $.each($("요소") , function(매개변수1, 매개변수2){ })

배열에 저장된 요소의 개수만큼 메서드를 반복실행. 메서드를 실행할 때마다 $(this)에는 배열에 저장된 요소가 대입

3) $("요소").each(function() {$(this)})

4) $.each($("요소"), function() {$(this)})

 

2. $.map()

return값이 데이터여야함. function의 매개변수

 

3. $.grep()

return값이 True or False여야함.

 

속성 탐색 선택자

선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따짐

종류	사용법	설명
$("요소선택[속성]")	$("li [ title ]")	속성이 포함된 요소만 선택
$("요소선택[속성 = 값]")	$(" li [ title ='리스트' ]")	속성값이 해당되는 요소만 선택
$("요소선택[속성 ^= 텍스트]")	$(" li [ title ^='리스트' ]")	속성값이 ~~로 시작되는 요소만 선택
$("요소선택[속성 $= 텍스트]")	$(" li [ title $='리스트' ]")	속성값이 ~~로 끝나는 요소만 선택
$("요소선택[속성 *= 텍스트]")	$(" li [ title *='리스트' ]")	속성값이 ~~를 포함하는 요소만 선택
$("요소선택 : hidden")	$("li: hidden")	숨겨져있는 요소만 선택
$("요소선택 : visible")	$("li : visible")	보이는 요소만 선택
$(".text")	$(".text")	<input> 요소 중 type이 text인 요소만
$(".selected")	$(".selected")	selected 속성이 적용된 요소만
$(".checked")	$(".checked")	checked 속성이 적용된 요소만

 

콘텐츠 탐색 선택자

종류	사용법	설명
$("요소선택:contains(텍스트)")	$("li:contains('내용2')")	요소 중 텍스트를 포함하는 요소만 선택
$("요소선택").contents()	$("p").contents()	선택한 요소의 하위 요소 중 1 깊이의 텍스트와 태그 노드 선택
$("요소선택:has(요소명)") $("요소선택").has(요소명)	$("li:has('span')") $("li").has('span')	선택 요소 중 해당 요소를 포함하는 요소만
$("요소선택:not(:제외요소)") $("요소선택").not(:제외요소)	$("li:not(:first)") $("li").not(:first)	해당 요소 중 첫번째 요소만 제외하고 선택
$("요소선택").filter(필터요소)	$("li").filter(".list2")	해당 요소 중 필터요소인 것만 선택
$("요소선택1").find(요소선택2)	$("li").find("strong")	요소1의 하위 요소2만 선택
$("요소선택1").closest("요소선택2")	$("li").closest("div")	요소1을 감싸는 상위 요소 중 가까운 상위 요소만 선택
end()	$("li").children("a").end()	필터링이 실행되기 이전 요소를 선택. 필터링자체를 무효화

 

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

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