탐색 선택자
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서 좀 더 정확하게
선택할 수 있다.
대표적인 탐색 선택자에는 배열의 인덱스(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> 요소 무리 중 마지막 요소만 선택 |
| $(“요소 선택:nth-child(숫자)”) | $(“li:nth-child(3)”) | <li> 요소 무리 중 세 번째 요소만 선택 |
| $(“요소 선택:nth-child(숫자n)”) | $(“li:nth-chile(3n)”) | <li> 요소 무리 중 3의 배수 번째에 있는 요소만 선택 |
| $(“요소 선택:nth-last-of-type (숫자)”) |
$(“li:nth-last-of-type(2)”) | <li> 요소 무리 중 마지막 위치로부터 두번째에 있는 요소만 선택 |
| $(“요소 선택:only-child”) | $(“li:ony-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부터 참조하는 요소를 불러온다 |
first/last 선택자
first 선택자는 선택된 요소 중 첫번째 요소만 선택한다. 이와 반대로 last 선택자는 선택된 요소 중 마지막 요소만 선택
한다.
$("요소 선택:first")또는 $("요소 선택").first()
$("요소 선택:last") 또는 $("요소 선택").last()다음은 문단 태그 영역에 first 선택자와 last선택자를 적용한 예제이다.
<script>
$(function(){
$("#menu li:first") //index 0
.css({"background-color":"#ff0"});
$("#menu li:last") //index 3
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>even/odd 선택자
even 선택자는 선택한 요소 중 홀수 번째(짝수 인덱스)요소만 선택하고, 이와 반대로 odd 선택자는
짝수번째(홀수 인덱스)요소만 선택한다.
다음은 even선택자와 odd선택자의 기본형이다.
$("요소 선택:even")
$("요소 선택:odd")<script>
$(function(){
$("#menu li:even") //index 0, 2
.css({"background-color":"#ff0"});
$("#menu li:odd") //index 1, 3
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
eq(index)/lt(index)/gt(index) 탐색 선택자
eq(index)탐색 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택하고 lt(index) 선택자는 선택한
요소 중 지정한 인덱스보다 작은(lt, Less Than) 인덱스를 참조하는 요소만 선택한다.
이와 반대로 gt(index)는 선택한 요소 중 지정한 인덱스보다 큰(gt, Greater Than)인덱스를 참조하는 요소만 선택한다.
다음은 eq, lt, gt선택자의 기본형이다.
1. $("요소 선택:eq(index)") 또는 $("요소 선택").eq(index)
2. $("요소 선택:lt(index)")
3. $("요소 선택:gt(index)")다음은 eq(), lt(), gt()의 선택자를 적용한 예제이다.
<script>
$(function(){
$("#menu li").eq(2) //index 2
.css({"background-color":"#ff0"});
$("#menu li:lt(2)") //index 0, 1
.css({"background-color":"#0ff"});
$("#menu li:gt(2)") //index 3, 4
.css({"background-color":"#f0f"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
</body>
first-of-type/last-of-type 선택자
first-of-type 선택자는 선택한 요소의 무리 중 첫번째 요소만 선택한다.
이와 반대로 last-of-type은 선택한 요소의 무리 중 마지막에 위치한 요소만 선택한다.
1. $("요소 선택:first-of-type")
2. $("요소 선택:last-of-type")
<script>
$(function(){
$("li:first-of-type") //<li> 1-1, 2-1
.css({"background-color":"#ff0"});
$("li:last-of-type") //<li> 1-3, 2-3
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul>
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>nth-child(숫자n)/nth-last-of-type(숫자)선택자
nth-child(숫자n)선택자는 선택한 요소의 무리 중 지정한 숫자(배수)의 요소를 선택한다.
예를들어 li:nth-child(2)는 선택한 요소의 무리 중 두번째의 <li>태그를 가리키고, li:nth-child(2n)은
선택한 요소의 무리 중 2의 배수의 <li>태그를 가리킨다.
이에 비해 nth-last-of-type(숫자) 선택자는 선택한 요소의 무리 중 마지막에서 지정한 숫자의 요소를 선택한다.
1. $("요소 선택:nth-child(숫자)")
2. $("요소 선택:nth-child(숫자n)")
3. $("요소 선택:nth-last-child(숫자)")1. 선택한 요소 중 지정한 숫자에 위치한 요소를 선택한다.
2. 선택한 요소 중 지정한 배수에 위치한 요소를 선택한다.
3. 선택한 요소 중 마지막 위치에서 지정한 숫자에 위치한 요소를 선택한다.
다음은 nth-child와 nth-last-child를 적용한 예제이다.
<script>
$(function(){
$("#menu 1 li:nth-child(1)") //<li> 1-1
.css({"background-color":"#ff0"});
$("#menu 1 li:nth-child(2n)") //<li> 1-2, 1-3, 1-4
.css({"background-color":"#f00"});
$("#menu 2 li:nth-last-child(2)") //<li> 2-2
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu 1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul id="menu 2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>only-child/slice(index)선택자
only-child 선택자는 선택한 요소가 '부모 요소에게 하나뿐인 자식요소'인 경우에 선택한다.
slice(start index, end index) 선택자는 선택한 요소의 지정 구간 인덱스의 요소를 선택한다.
1. $("요소 선택:only-child")
2. $("요소 선택").slice(start index, end index)1. 선택한 요소가 부모 요소에게 하나뿐인 자식 요소면 선택한다.
2. 지정 구간 인덱스의 요소를 선택한다. 예를들어 slice(1,3)은 1초과 3이하의 요소를 선택한다.
다음은 only-child 선택자와 slice 선택자를 적용한 예제이다.
<script>
$(function(){
$("#menu 1 li").slice(1, 3)
.css({"background-color":"#ff0"});
$("li:only-child")
//<ul id="menu2">
// <li>내용 2-1</li>
//</ul>
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu 1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
<li>내용1-4</li>
</ul>
<ul id="menu 2">
<li>내용2-1</li>
</ul>
</body>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Front > JQuery' 카테고리의 다른 글
| JQuery(이벤트 등록 메소드) (0) | 2020.05.22 |
|---|---|
| JQuery(객체조작) (0) | 2020.05.20 |
| JQuery(속성 탐색 선택자) (0) | 2020.05.20 |
| jquery(선택자) (0) | 2020.05.20 |
| jquery(연동) (0) | 2020.05.20 |