제이쿼리(jQuery) 기초 문법 - 선택자 (5) 콘텐츠 탐색 선택자

제이쿼리(jQuery) 기초 문법

탐색 선택자

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 서택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다.

 

콘텐츠 탐색 선택자

 

콘텐츠 탐색 선택자 종류

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

 

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

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