[JavaScript] jQuery 선택자

---

jQuery 선택자

---

개요

 - 선택자란 HTML 요소를 선택할 때 사용하는 구문이다. 

 - 선택한 요소의 디자인 속성을 적용할 때 사용하며, Jquery 선택자를 사용하면 HTML문서를 '동적' 스타일을 적용할 수 있다. 

 - 이는 HTML에서 작성한 CSS(스타일) 과 대조된다. 

---

선택자 기본형

 1. 선택한 요소에 지정한 스타일을 적용

  - $("CSS 선택자").css("스타일 속성명", "값");

 2. 선택한 요소에 속성을 적용

  - $("CSS 선택자").attr("속성명", "값");

---

기본 선택자 

 직접 선택자

 - 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자

종류	사용법	설명
전체 선택자	$("*")	모든 요소를 선택합니다.
아이디 선택자	$("#id")	id 속성에 지정한 값을 가진 요소를 선택합니다.
클래스 선택자	$(".class")	class 속성에 지정한 값을 가진 요소를 선택합니다.
요소 선택자	$("요소")	지정한 요소명과 일치하는 요소들만 선택합니다.
그룹 선택자	$("A, B, C")	A, B, C, ... 에 지정된 요소들을 한 번에 선택합니다.
종속 선택자	$("p.classA") $("p#idB")	<p> 요소 중 class의 값이 classA인 요소를 선택합니다. <p> 요소 중 id의 값이 idB인 요소를 선택합니다.

  인접 관계 선택자

  - 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는 요소를 선택할때 사용하는 선택자

종류	사용법	설명
부모 요소 선택자	$("요소 선택").parent()	선택한 요소의 부모 요소를 선택합니다.
상위 요소 선택자	$("요소 선택").parents()	선택한 요소의 상위 요소를 모두 선택합니다.
가장 가까운 상위 요소 선택자	$("요소 선택").closest("a")	선택한 요소의 상위 요소 중 가장 가까운 <a> 태그만 선택합니다.
하위 요소 선택자	$("요소 선택 하위 요소")	선택한 요소의 지정한 하위 요소를 선택합니다.
자식 요소 선택자	$("요소 선택>자식 요소")	선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택합니다.
자식 요소들 선택자	$("요소 선택").children()	선택한 요소의 모든 자식 요소를 선택합니다.
이전 요소 선택자	$("요소 선택").prev()	선택한 요소의 바로 이전 요소를 선택합니다.
이전 요소들 선택자	$("요소 선택").prevAll()	선택한 요소의 이전 요소 모두를 선택합니다.
지정 이전 요소들 선택자	$("요소 선택").prevUtill("요소명")	선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다.
다음 요소 선택자	$("요소 선택").next() $("요소 선택+다음 요소")	선택한 요소의 다음 요소를 선택합니다.
다음 요소들 선택자	$("요소 선택").nextAll()	선택한 요소의 다음 요소 모두를 선택합니다.
지정 다음 요소들 선택자	$("요소 선택").nextUtill("요소명")	선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택합니다.
전체 형제 요소 선택자	$("요소 선택").siblings()	선택한 요소의 형제 요소 전체를 선택합니다.

---

탐색 선택자

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

 - 위치 탐색 선택자와 속성 탐색 선택자가 있다. 

 

위치 탐색 선택자

  - 배열의 인덱스를 사용해 선택하는 선택자

종류	사용법	설명
$("요소 선택").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(숫자)")	<li>요소 무리들의 '숫자'번째 요소들을 선택합니다.
$("요소 선택:nth-child(숫자n)")	$("li:nth-child(숫자n)")	<li> 요소 무리들의 '숫자'배수들의 위치에 있는 요소들을 선택합니다.
$("요소 선택:nth-last-of-type(숫자)")	$("li:nth-last-of-type(숫자)")	<li> 요소 무리들의 마지막 위치로부터 '숫자'번째에 있는 요소들을 선택합니다.
$("요소 선택:only-child")	$("li:only-child")	부모 요소 내에 <li> 요소가 1개뿐인 <li> 요소만 선택합니다.
$("요소 선택:eq(index)") $("요소 선택").eq(index)	$("li:eq(index)") $("li").eq(index)	<li> 요소 중 인덱스 2가 참조하는 요소를 불러옵니다.
$("요소 선택:gt(index)")	$("li:gt(index)")	<li> 요소 중 인덱스보다 큰 인덱스가 참조하는 요소를 불러옵니다.
$("요소 선택:lt(index)")	$("li:lt(index)")	<li> 요소 중 인덱스보다 작은 인덱스가 참조하는 요소를 불러옵니다.
$("요소 선택").slice(start index, end index)	$("li").slice(start index, end index)	<li> 요소 중 start 인덱스를 초과하고, end 인덱스 이하의 인덱스를 가진 요소를 선택합니다.

속성 탐색 선택자

  - 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 선택자

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