언어공부/JavaScript&jQuery
제이쿼리(jQuery) 기초 문법 - 선택자 (4) 위치 탐색 선택자, 속성 탐색 선택자
yeony
2021. 8. 3. 00:44
제이쿼리(jQuery) 기초 문법
탐색 선택자
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 서택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다.
위치 탐색 선택자
기본 선택자로 선택한 요소는 배열에 담긴다. 이 때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다.
위치 탐색 선택자 종류
| 종류 | 사용법 | 설명 |
| $("요소 선택: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>요소 무리 중 마지막 요소만 선택 |
| $("요소 선택:ntn-child(숫자)") | $("li:ntn-child(2)") | <li>요소 무리 중 두 번째 요소만 선택 |
| $("요소 선택:ntn-child(숫자n)") | $("li:ntn-child(2n)") | <li>요소 무리 중 2의 배수 번째에 있는 요소만 선택 |
| $("요소 선택:ntn-last-of-type(숫자)") | $("li:ntn-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://']") | <a>요소 중 href 속성값이 'http://'로 시작하는 요소만 선택한다. |
| $("요소 선택[속성$=텍스트]") | $("a[href$='.com']") | <a>요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택한다. |
| $("요소 선택[href*=텍스트]") | $("a[href*='tistory']") | <a>요소 중 href 속성 값 중에서 'tistory'를 포함하는 요소만 선택한다. |
| $("요소 선택:hidden") | $("li:hidden") | <li>요소 중 숨겨져 있는 요소만 선택한다. |
| $("요소 선택:visible") | $("li:visible") | <li>요소 중 보이는 요소만 선택한다. |
| $(":text") | $(":text") | <input>요소 중 type속성값이 "text"인 요소만 선택한다. ($(":type 속성값")) |
| $(":selected") | $(":selected") | selected 속성이 적용된 요소만 선택한다. |
| $(":checked") | $(":checked") | checked 속성이 적용된 요소만 선택한다. |