탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서
좀 더 정확하게 선택할 수 있습니다.
위치 탐색 선택자 종류
| 종류 | 사용법 | 설명 |
|
$("요소 선택: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 요소 중 끝에서 2번째에 있는 요소만 선택합니다. |
| $("요소 선택: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부터 참조하는 요소를 불러옵니다. |
first/last 선택자
$("요소 선택:first") 또는 $("요소 선택").first()
$("요소 선택:last") 또는 $("요소 선택").last()
<script>
$(function(){
$("#menu li:first")
.css({"background-color":"orange"});
$("#menu li:last")
.css({"background-color":"gray"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</h1>
<ul id="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
</body>#menu 하위에 있는 li 중에
첫번째 li는 오렌지색 배경,
마지막 li는 회색 배경의 css가 적용되었습니다.
even / odd 선택자
<script>
$(function(){
$("#menu li:even")
.css({"background-color":"orange"});
$("#menu li:odd")
.css({"background-color":"gray"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</h1>
<ul id="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
</body>#menu 하위에 있는 li 중에
홀수(even) li는 오렌지색 배경,
짝수(odd) li는 회색 배경의 css가 적용되었습니다.
eq(index) / li(index) / gt(index) 탐색 선택자
eq(index)는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택하고
lt(index)는 선택한 요소 중 지정한 인덱스보다 작은 요소만 선택합니다.
gt(index)는 선택한 요소 중 지정한 인덱스보다 큰 요소만 선택합니다.
$("요소 선택:eq(index)") 또는 $("요소 선택").eq(index)
$("요소 선택:lt(index)")
$("요소 선택:gt(index)")
<script>
$(function(){
$("#menu li").eq(2)
.css({"background-color":"orange"});
$("#menu li:lt(2)")
.css({"background-color":"gray"});
$("#menu li:gt(2)")
.css({"background-color":"red"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</h1>
<ul id="menu">
<li>메뉴1</li> //index(0)
<li>메뉴2</li> //index(1)
<li>메뉴3</li> //index(2)
<li>메뉴4</li> //index(3)
<li>메뉴5</li> //index(4)
</ul>
</div>
</body>#menu li중 index(2)는 오렌지 배경
lt(2) -> index(2)보다 작은 index(0,1)은 회색배경
gt(2) -> index(2)보다 큰 index(3,4)는 빨간색 배경 css가 적용되었습니다.
first-of-type / last-of-type 선택자
$("요소 선택:first-of-type")
$("요소 선택:last-of-type")
<script>
$(function(){
$("li:first-of-type")
.css({"background-color":"purple"});
$("li:last-of-type")
.css({"background-color":"skyblue"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</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>
</div>
</body>두개의 ul에서
li중에 첫번째 태그에 보라색 배경이,
li중에 마지막 태그에 하늘색 배경이 적용된 걸 알 수 있습니다.
nth-child(숫자n) / nth-last-of-type(숫자) 선택자
$("요소 선택:nth-child(숫자)")
-> 선택 요소 중 지정 숫자에 위치한 요소를 선택합니다.
$("요소 선택:nth-child(숫자n)")
-> 선택 요소 중 지정한 배수에 위한 요소를 선택합니다.
$("요소 선택:nth-last-child(숫자n)")
-> 선택 요소 중 마지막 위치에서 지정한 숫자에 위치한 요소를 선택합니다.
<script>
$(function(){
$("#menu1 li:nth-child(1)")
.css({"background-color":"purple"});
$("#menu1 li:nth-child(2n)")
.css({"background-color":"forestgreen"});
$("#menu2 li:nth-last-child(2)")
.css({"background-color":"orange"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</h1>
<ul id="menu1">
<li>메뉴1-1</li>
<li>메뉴1-2</li>
<li>메뉴1-3</li>
<li>메뉴1-4</li>
</ul>
<ul id="menu2">
<li>메뉴2-1</li>
<li>메뉴2-2</li>
<li>메뉴2-3</li>
<li>메뉴2-4</li>
</ul>
</div>
</body>#menu1 하위메뉴 li중 첫번째 요소에 보라색 배경,
#menu1 하위메뉴 li중 2의 배수(1-2, 1-4)에 초록색 배경,
#menu2 하위메뉴 li중 끝에서 2번째(2-3)에 노란색 배경이 적용되었습니다.
only-child / slive(index)선택자
$("요소 선택:only-child")
-> 선택한 요소가 부모 요소에게 하나뿐인 자식 요소면 선택합니다.
$("요소 선택").slice(start index, end index)
-> slice(1,3)은 1초과 3이하의 요소를 선택합니다.
<script>
$(function(){
$("#menu1 li").slice(1,3)
.css({"background-color":"brown"});
$("li:only-child")
.css({"background-color":"hotpink"});
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">탐색 선택자</h1>
<ul id="menu1">
<li>메뉴1-1</li>
<li>메뉴1-2</li>
<li>메뉴1-3</li>
<li>메뉴1-4</li>
</ul>
<ul id="menu2">
<li>메뉴2-1</li>
</ul>
</div>
</body>#menu1 하위요소 li중 1초과 3이하 요소에 갈색 배경이,
li가 부모요소에게 하나뿐인 자식 요소인 #menu2의 li에 분홍색 배경이 적용되었습니다.
'IT > jQuery' 카테고리의 다른 글
| [jquery] jquery 속성 탐색 선택자 (0) | 2020.02.05 |
|---|---|
| [jquery] jquery 배열 관련 메서드 (0) | 2020.02.04 |
| [jquery] jquery 선택자 (형제 선택자) (0) | 2020.02.02 |
| [jquery] jquery 선택자 (인접선택자, 부모요소 선택자, 하위요소 선택자) (0) | 2020.02.01 |
| [jquery] jquery 제이쿼리 선택자 (0) | 2020.01.20 |
댓글