본문 바로가기

Javascript/Jquery

Jquery 선택자

반응형
기본선택자
종류 사용법 설명
전체 선택자 $("*") 모든 요소를 선택
아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소 선택
클래스 선택자 $(".클래스명") class속성에 지정한 값을 가진 요소 선택
요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택
그룹 선택자 $("선택1, 선택2, 선택3, 선택4, ...선택n") 선택1, 선택2, 선택3, 선택4, ...선택n에 지정된 요소들을
한번에 선택
종속 선택자 $("p.txt_1")
$("p#txt_1")
<p> 요소 중 class값이 txt_1인 요소를 선택
<p> 요소 중 id 값이 txt_1인 요소를 선택

 

인접 관계 선택자
종류 사용법 설명
부모 요소 선택자 $("요소 선택").parent() 선택한 요소의 부모 요소를 선택
상위 요소 선택자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택
가장 가까운 상위 요소 선택자 $("요소 선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택
하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택
자식 요소 선택자 $("요소 선택 > 자식요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택
자식 요소들 선택자 $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택
형(이전) 요소 선택자 $("요소 선택").prev() 선택한 요소의 바로 이전 요소를 선택
형(이전) 요소들 선택자 $("요소 선택").prevAll() 선택한 요소의 이전 요소 모두를 선택
지정 형(이전) 요소들 선택자 $("요소 선택").prevUntil("요소명") 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택
동생(다음) 요소 선택자 $("요소 선택").next()
$("요소 선택 + 다음 요소")
선택한 요소의 다음 요소를 선택
동생(다음) 요소들 선택자 $("요소 선택").nextAll() 선택한 요소의 다음 요소 모두를 선택
지정 동생(다음) 요소들 선택자 $("요소 선택").nextUntil("h2") 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택
전체 형제 요소 선택자 $(".box_1").siblings() class 값이 box_1인 요소의 형제 요소 전체를 선택

 

위치 탐색 선택자 종류
종류 사용법 설명
$("요소 선택: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(숫자)") $("li:nth-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부터 참조하는 요소를 불러옴

 

그 외의 선택자
종류 사용법 설명
$("요소 선택: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").not(:first)
<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>가 선택
반응형

'Javascript > Jquery' 카테고리의 다른 글

마우스 오버시 이미지 확대  (0) 2020.08.04
table option selected(테이블 option 선택)  (0) 2020.07.18
jquery 테이블 정렬 코드  (0) 2020.07.08
Jquery 선택자  (0) 2020.05.21