[제이쿼리] jQuery 위치 탐색 선택자(selector)

 

제이쿼리(jQuery) 위치 탐색 선택자(selector)

---

안녕하세요? 장장스입니다.

오늘은 탐색 선택자를 포스팅하려고 합니다.

탐색 선택자는 크게 위치 탐색 선택자와 속성 탐색 선택자가 있습니다.

이번 포스팅에서는 위치 탐색 선택자를 다뤄보도록 하겠습니다.

 

 

위치 탐색 선택자

---

종류	설명
$("요소").first() $("요소:first")	전체 요소 중 첫 번째 요소만 선택한다.
$("요소").last() $("요소:last")	전체 요소 중 마지막 요소만 선택한다.
$("요소:odd")	요소 무리중 짝수 번쨰 요소만 선택한다.
$("요소:even")	요소 무리중 홀수 번쨰 요소만 선택한다.
$("요소:first-of-type")	요소 무리 중 첫 번째 요소만 선택한다.
$("요소:last-of-type")	요소 무리 중 마지막 요소만 선택한다.
$("요소:nth-child(n)")	요소 무리중 n 번째 요소만 선택한다.
$("요소:nth-child(숫자n)")	요소 무리 중 n의 배수 요소만 선택한다.
$("요소:nth-last-of-type(n)")	요소 무리 중 마지막 위치로부터 n번째에 있는 요소만 선택한다.
$("요소:only-child")	부모 요소내에 선택한 요소가 1개뿐인 요소만 선택한다.
$("요소:eq(index)") $("요소").eq(index)	요소중 인덱스 n이 참조하는 요소를 불러온다.
$("요소:gt(n)")	요소 중 인덱스 n보다 큰 인덱스가 참조하는 요소를 불러온다.
$("요소:lt(n)")	요소 중 인덱스 n보다 작은 인덱스가 참조하는 요소를 불러온다.
$("요쇼").slice(n) $("요쇼").slice(n, m)	"요소" 내에, 인덱스 n부터 참조하는 요소를 선택합니다. "요소" 내에, 인덱스 n이상, m미만인 요소를 선택합니다.

 

 

 

 

○first/last 선택자

 

▼javascript

$(function(){
	$("#menu li:first").css({"background-color":"#ff0"});
	$("#menu li:last").css({"background-color":"#0ff"});
});

▼html

<div>
	<h1>탐색 선택자</h1>
	<ul id="menu">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</div>

▼실행결과

탐색 선택자

• 내용1
• 내용2
• 내용3
• 내용4

 

 

 

 

 

○ even/odd 선택자

 

▼javascript

	$(function(){
		$("#menu02 li:even")
		.css({"background-color":"#ff0"});

		$("#menu02 li:odd")
		.css({"background-color":"#0ff"});
	});

▼html

<div>
	<h1>탐색 선택자</h1>
	<ul id="menu02">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</div>

▼실행결과

탐색 선택자

• 내용1
• 내용2
• 내용3
• 내용4

 

 

 

 

 

○ eq(index)/ lt(index) / gt(index) 탐색 선택자

 

▼javascript

	$(function(){
		$("#menu03 li").eq(2)
		.css({"background-color":"#ff0"});

		$("#menu03 li:lt(2)")
		.css({"background-color":"#0ff"});

		$("#menu03 li:gt(2)")
		.css({"background-color":"#f0f"});
	});

▼html

<div>
	<h1>탐색 선택자</h1>
	<ul id="menu03">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
		<li>내용5</li>
	</ul>
</div>

▼실행결과

탐색 선택자

• 내용1
• 내용2
• 내용3
• 내용4
• 내용5

 

 

 

 

○ first-of-type / last-of-type 선택자

 

▼javascript

<script>
	$(function(){
		$("li:first-of-type")
		.css({"background-color":"#ff0"});
		$("li:last-of-type")
		.css({"background-color":"#0ff"});
	});
</script>

▼html

<div>
	<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>
</div>

▼실행결과

탐색 선택자

• 내용1-1
• 내용1-2
• 내용1-3

• 내용2-1
• 내용2-2
• 내용2-3

 

 

 

 

○ nth-child(숫자n) | nth-last-of-type(숫자) 선택자

 

▼javascript

	$(function(){
		$("#menu001 li:nth-child(1)")
		.css({"background-color":"#ff0"});

		$("#menu001 li:nth-child(2n)")
		.css({"border":"2px dashed #f00"});

		$("#menu002 li:nth-last-child(2)")
		.css({"background-color":"#0ff"});
	});

▼html

<div>
	<h1>탐색 선택자</h1>
	<ul id="menu001">
		<li>내용1-1</li>
		<li>내용1-2</li>
		<li>내용1-3</li>
		<li>내용1-4</li>
	</ul>
	<ul id="menu002">
		<li>내용2-1</li>
		<li>내용2-2</li>
		<li>내용2-3</li>
	</ul>
</div>

▼실행결과

탐색 선택자

• 내용1-1
• 내용1-2
• 내용1-3
• 내용1-4

• 내용2-1
• 내용2-2
• 내용2-3

 

 

 

 

○ only-child | slice(index) 선택자

 

▼javascript

	$(function(){
		$("li:only-child").css({"background-color":"#0ff"});
		$("#menu0001 li").slice(1,3).css({"background-color":"#ff0"});
	});

▼html

<div>
	<h1>탐색 선택자</h1>
	<ul id="menu0001">
		<li>내용1-1</li>
		<li>내용1-2</li>
		<li>내용1-3</li>
		<li>내용1-4</li>
	</ul>
	<ul id="menu0002">
		<li>내용2-1</li>
	</ul>
</div>

▼실행결과

탐색 선택자

• 내용1-1
• 내용1-2
• 내용1-3
• 내용1-4

• 내용2-1

 

 

 

 

Post

---

• jQuery 배열(array) 메서드
• jQuery 콘텐츠 탐색 선택자(selector)
• jQuery 속성 탐색 선택자(selector)
• jQuery 인접 관계 선택자(selector)
• jQuery 직접 선택자(selector)

References

---

• 생활코딩: 선택자
• w3schools
• TCP school

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)