[JavaScript] 자바스크립트 제이쿼리 (jQuery) 위치 탐색선택자, 속성 탐색 선택자, 배열 관련 메서드 정리

1. 위치 탐색 선택자 ▼
1-1. first / last 선택자
1-2. even / odd 선택자
1-3. eq(index) / lt(index) / gt(index) 탐색 선택자
1-4. first-of-type / last-of-type 선택자
1-5. nth-child(숫자n) / nth-last-of-type(숫자) 선택자
1-6. only-child / slice(index) 선택자
2. 제이쿼리 배열 관련 메서드 ▼
2-1. each() / $.each()
2-2. $.map() / $.grep() 메서드
2-3. $.inArray() / $.isArray() / $.merge() 메서드
2-4. index() 메서드
3. 속성 탐색 선택자 ▼
4. 그 외의 선택자 - 컨텐츠 탐색 선택자 ▼
5. 선택자와 함께 알아두면 유용한 메서드 ▼
6. 참고자료

탐색선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 예로 배열의 인덱스를 사용해서 선택하는 위치탐색 선택자와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 속성 탐색 선택자가 있다.

1. 위치 탐색 선택자 ▼

기본 선택자로 선택한 요소는 배열에 담기게 된다.

그래서 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있게 되는 것이다.

종류	용법	설명
$("요소 선택: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-ot-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부터 참조하는 요소를 불러 온다

1-1. first / last 선택자

first 선택자는 선택된 요소 중 첫 번째 요소만 선택한다.

이와 반대로 last 선택자는 선택된 요소 중 마지막 요소만 선택한다.

 $("요소 선택:first) 또는 $("요소 선택").first()
$("요소 선택:last) 또는 $("요소 선택").last()

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#menu li:first")
		.css({"background-color":"#ff0"});
 
		$("#menu li:last")
		.css({"background-color":"#0ff"});
	});
</script>
</head>
<body>
	<h1>first/last 선택자</h1>
	<ul id="menu">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</body>
</html>

1-2. even / odd 선택자

even 선택자는 선택한 요소 중 홀수 번재(짝수 인덱스) 요소만 선택하고, 이와 반대로 odd 선택자는 짝수 번째(홀수 인덱스) 요소만 선택한다. 헷갈릴 수 있는데 홀짝이 순서 기준이 아니라 인덱스 기준이다.

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#menu li:even")
		.css({"background-color":"#ff0"});
 
		$("#menu li:odd")
		.css({"background-color":"#0ff"});
	});
</script>
</head>
<body>
	<h1>even/odd 선택자</h1>
	<ul id="menu">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</body>
</html>

1-3. eq(index) / lt(index) / gt(index) 탐색 선택자

eq(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택한다.
lt(index) 선택자는 선택한 요소 중 지정한 인덱스보다 작은(lt, Less Than) 인덱스를 참조하는 요소만 선택한다.
gt(index) 선택자는 선택한 요소 중 지정한 인덱스보다 큰(gt, Greater Than) 인덱스를 참조하는 요소만 선택한다.

 $("요소 선택:eq(index)") 또는 $("요소 선택").eq(index)
$("요소 선택:lt(index)")
$("요소 선택:gt(index)")

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#menu li").eq(2)
		.css({"background-color":"#ff0"});
 
		$("#menu li:lt(2)")
		.css({"background-color":"#0ff"});
 
		$("#menu li:gt(2)")
		.css({"background-color":"#f0f"});
	});
</script>
</head>
<body>
	<h1>eq() / lt() / gt() 선택자</h1>
	<ul id="menu">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
		<li>내용5</li>
	</ul>
</body>
</html>

1-4. first-of-type / last-of-type 선택자

first-of-type 선택자는 선택한 요소의 무리 중 첫 번째 요소만 선택한다.

이와 반대로 last-of-type 선택자는 선택한 요소의 무리 중 마지막에 위치한 요소만 선택한다.

 $("요소 선택:first-of-type")
$("요소 선택:last-of-type")

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("li:first-of-type")
		.css({"background-color":"#ff0"});
 
		$("li:last-of-type")
		.css({"background-color":"#0ff"});
	});
</script>
</head>
<body>
	<h1>first-of-type/last-of-type 선택자</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>
</html>

1-5. nth-child(숫자n) / nth-last-of-type(숫자) 선택자

 $("요소 선택:nth-child(숫자)")
$("요소 선택:nth-child(숫자n)")
$("요소 선택:nth-last-child(숫자)")

선택한 요소 중 지정한 숫자에 위치한 요소를 선택한다.

선택한 요소 중 지정한 배수에 위치한 요소를 선택한다.

선택한 요소 중 마지막 위치에서 지정한 숫자에 위치한 요소를 선택한다.

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#menu1 li:nth-child(1)")
		.css({"background-color":"#ff0"});
 
		$("#menu1 li:nth-child(2n)")
		.css({"border":"2px dashed #f00"});
 
		$("#menu2 li:nth-last-child(2)")
		.css({"background-color":"#0ff"});
	});
</script>
</head>
<body>
	<h1>nth-child()/nth-last-child() 선택자</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>
	</ul>
</body>
</html>

1-6. only-child / slice(index) 선택자

 $("요소 선택:only-child")
$("요소 선택").slice(start index, end index)

선택한 요소가 부모 요소에 하나뿐인 자식요소만 선택한다.

지정 구간 인덱스의 요소를 선택한다. 예를 들어 slice(1, 3)은 1 초과 3 이하의 요소를 선택한다.

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#menu1 li").slice(1,3)
		.css({"background-color":"#ff0"});
 
		$("li:only-child")
		.css({"background-color":"#0ff"});
	});
</script>
</head>
<body>
	<h1>only-child / slice(index) 선택자
	</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>
</body>
</html>

2. 제이쿼리 배열 관련 메서드 ▼

종류	사용법	설명
each() / $.each()	$("요소 선택").each(function) $.each($("요소 선택"), function)	배열에 저장된 문서 객체만큼 메서드가 반복 실행된다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근해서 객체를 선택하고 인덱스를 구한다.
$.map()	$.map(Array. function)	배열에 저장된 데이터 수만큼 메서드가 반복 실행된다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장된다. 새로 저장된 배열 객체를 반환한다.
$.grep()	$.grep(Array, function)	배열에 저장된 데이터 수만큼 메서드가 반복 실행된다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환한다.
$.inArray()	$.inArray(data, Array, start index)	배열 안에서 데이터를 찾는다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환한다. start index의 값을 지정하면 해당 위치부터 데이터를 찾는다.
$.isArray()	$.isArray(object)	입력한 객체가 배열 객체라면 true를, 아니면 false를 반환한다.
$.merge()	$.merge(Array1, Array2)	인자값으로 입력한 2개의 배열 객체를 하나로 그룹화한다.
index()	$("요소 선택").index("지정 요소 선택")	선택자로 요소를 먼저 선택한다. 그런 다음 지정한 요소의 인덱스 정보를 가져온다.

2-1. each() / $.each()

jQuery에서 each()와 $.each()는 배열이나 객체의 요소를 반복(iterate)할 때 사용된다.

 $("요소 선택").each(function(매개변수1, 매개변수2) {})
$.each($("요소 선택"), function(매개변수1, 매개변수2) {})
$("요소 선택").each(function() { $(this) })
$.each($("요소 선택"), function() {$(this) })

위 두 줄은 배열에 저장된 요소의 개수만큼 메서드를 반복 실행한다. 메서드를 실행할 때마다 매개변수1, 매개변수2에는 배열에 저장된 요소와 인덱스 값이 배열에 오름차순으로 대입된다.

반면 아래 두 줄은 배열에 저장된 요소의 개수만큼 메서드를 반복 실행한다. 메서드를 실행할 때마다 $(this)에는 배열에 저장된 요소가 오름차순으로 대입된다.

✅ each() → jQuery 객체(선택된 요소들)를 반복

 $("li").each(function(index, element) {
    console.log(index + ": " + $(element).text()); // 인덱스와 텍스트 출력
});

✔️ index → 현재 요소의 인덱스
✔️ element → 현재 요소 (jQuery 객체로 감싸려면 $(element))

✅ $.each() → 일반 배열 또는 객체 반복

 var arr = ["사과", "바나나", "포도"];
$.each(arr, function(index, value) {
    console.log(index + ": " + value); // 0: 사과, 1: 바나나, 2: 포도
});

 var obj = { name: "Dain", age: 50 };
$.each(obj, function(key, value) {
    console.log(key + ": " + value); // name: Dain, age: 50
});

✔️ 배열에서는 index와 value
✔️ 객체에서는 key와 value

	each()	$.each()
대상	jQuery 객체 (HTML 요소)	일반 배열 또는 객체
사용 예시	$("li").each()	$.each(arr, function(){})
매개변수	(index, element)	(index/key, value)

✅ 예시 코드

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		var obj = [
			{"area":"서울"},
			{"area":"부산"},
			{"area":"전주"}
		];
 
		$(obj).each(function(i, o){
				console.log(i + ":", o);
		});
		console.log("==== The End 1 ====");
 
		$.each($("#menu2 li"), function(i, o){
				console.log(i + ":", o);
		});
		console.log("==== The End 2 ====");    
 
		$.each($("#menu2 li"), function(i){
				console.log(i + ":", $(this));
		});    
	});
</script>
</head>
<body>
	<h1>탐색 선택자</h1>
	<ul id="menu1">
		<li>내용1-1</li>
		<li>내용1-2</li>
		<li>내용1-3</li>
	</ul>
	<ul id="menu2">
		<li>내용2-1</li>
		<li>내용2-2</li>
		<li>내용2-3</li>
	</ul>
</body>
</html>

17~19 행

배열에 저장된 객체의 개수만큼 메서드를 반복 실행한다. 메서드가 반복 실행될 때마다 배열에 저장된 객체에 오름차순으로 접근하고 매개변수 i와 o에는 배열의 인덱스값과 객체가 대입된다.

27~29행

선택한 요소만큼 메서드를 반복 실행한다. 배열에 저장된 요 소는 인ㄷ엑스 오름차순으로 $(this)에 반환된다.

2-2. $.map() / $.grep() 메서드

✅ $.map() 메서드

배열에 저장된 요소만큼 메서드를 반복실행한다. 메서드가 실행될 때 마다 매개변수1, 매개변수2에는 배열의 데이터와 인덱스 값이 인덱스 오름차순으로 대입된다. 반환된 데이터는 새 배열에 저장되고 새롭게 가공된 배열 객체를 반환한다.

 $.map(Array, function(매개변수1, 매개변수1) {
    return 데이터;
});

✅ $.grep() 메서드

배열에 저장된 요소만큼 메서드를 반복 실행한다. 메서드가 실행될 때마다 매개변수1, 매개변수2에는 배열에 데이터와 인덱스 정보가 인덱스 오름차순으로 대입된다. 반환된 데이터가 true면 인덱스 오름차순으로 데이터를 새 배열에 저장하고 새롭게 가공된 배열 객체를 반환한다.

 $.grep(Array, function(매개변수1, 매개변수2) {
    return [true | false];
});

✅ 예시코드

★ 배열에 저장된 객체 중 "area"의 속성값이 "서울"인 객체만 선택해서 새 배열로 가공

★ 변수에 참조 시키고 새롭게 가공된 두 배열의 객체를 콘솔 패널에 출력하기

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		var arr1 = [{
			"area":"서울", 
			"name":"무대리"
			},{
				"area":"부산", 
				"name":"홍과장"
			},{
				"area":"대전", 
				"name":"박사장"
			},{
				"area":"서울", 
				"name":"빅마마"
			}];
 
		var arr2 = $.map(arr1, function(a, b){
			if(a.area == "서울") {
				return a;
			}
		});
		console.log(arr2);
		console.log("==== first End ====");
 
		var arr3 = $.grep(arr1, function(a, b){
			if(a.area == "서울") {
				return true;
			} else {
				return false;
			}
		});
		console.log(arr3);
		console.log("==== Second End ====");    
	});
</script>
</head>
<body>
</body>
</html>

2-3. $.inArray() / $.isArray() / $.merge() 메서드

 $.inArray(data, Array, start index)
$.isArray(object)
$.merge(Array1, Array2)

$.inArray()는 배열에 저장된 데이터 중 지정한 데이터를 인덱스 오름차순으로 찾아 먼저 찾은 데이터의 인덱스 값을 반환한다.

$.isArray()는 지정한 객체가 배열 객체면 true를, 아니면 false를 반환한다.

.merge()는 두 배열의 객체를 하나의 객체로 묶는다.

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		var arr1 = ["서울", "대전", "부산", "전주"];
		var arr2 = ["한국", "미국", "일본", "중국"];
		var obj = {
			"name":"정부장", 
			"area":"서울"
		}
		
		var idxNum = $.inArray("부산", arr1);
		console.log(idxNum);
 
		var okArray1 = $.isArray(arr1); // 배열 객체면 true
		var okArray2 = $.isArray(obj); // 배열 객체가 아니면 false
		console.log(okArray1);
		console.log(okArray2);
 
		$.merge(arr2, arr1);
		console.log(arr2);
	});
</script>
</head>
<body>
</body>
</html>

2-4. index() 메서드

$("요소 선택").index("지정 선택 요소");

문단 태그 중 <li>의 id값이 "list3"인 요소 찾아서 인덱스 반환하기

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		var idxNum = $("li").index($("#list3"));
		console.log(idxNum);
	});
</script>
</head>
<body>
	<h1>배열 관련 메서드 index()</h1>
	<ul>
		<li>내용1</li>
		<li>내용2</li>
		<li id="list3">내용3</li>
		<li>내용4</li>
	</ul>
</body>
</html>

3. 속성 탐색 선택자 ▼

속성탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자이다.

예를 들어 선택한 이미지(img) 요소 중 경로(src)가 [images/logo.gif]와 일치하는 이미지 요솜나 선택하고자 할 때 사용한다.

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

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#wrap a[target]") //target 속성 포함하는 요소만 선택
		.css({"color":"#f00"});
 
		$("#wrap a[href^=https]") //href 속성값이 "https로 시작하는 요소만 선택
		.css({"color":"#0f0"});
 
		$("#wrap a[href$=net]") //href 속성값이 "net"으로 끝나는 요소만 선택
		.css({"color":"#00f"});
 
		$("#wrap a[href*=google]") //href 속성값이 "google"이 포함된 요소만 선택
		.css({"color":"#000"});
 
		$("#member_f :text") //input 요소 중 type 속성값이 "text"인 요소만 선택
		.css({"background-color":"#ff0"});
 
		$("#member_f :password") //input 요소 중 type 속성 값이 "password"인 요소만 선택
		.css({"background-color":"#0ff"});
	});
</script>
</head>
<body>
	<div id="wrap">
		<p><a href="http://awesomepossum.tistory.com" target="_blank">인절미 티스토리 블로그</a></p>
		<p><a href="https://naver.com">Naver</a></p>
		<p><a href="http://daum.net">Google</a></p>
		<p><a href="http://google.co.kr">Daum</a></p>
	</div>
	<form action="#" method="get" id="member_f">
		<p>
			<label for="user_id">아이디</label>
			<input type="text" name="user_id" id="user_id">
		</p>
		<p>
			<label for="user_pw">비밀번호</label>
			<input type="password" name="user_pw" id="user_pw">
		</p>
	</form>
</body>
</html>

4. 그 외의 선택자 - 컨텐츠 탐색 선택자 ▼

contains() / contents() / has() / not() / end() 탐색 선택자

 $("요소 선택:contains(텍스트)")
$("요소 선택").contents()
$("요소 선택:has(요소명)") / $("요소 선택").has("요소명")
$("요소 선택:not(제외할 요소 선택)") / $("요소 선택").not(제외할 요소 선택)
$("요소 선택").탐색 선택자().end()

✅ $("요소 선택:contains(텍스트)")
선택한 요소 중에서 특정 텍스트를 포함하는 요소를 찾기

예: $("p:contains('hello')") → <p> 요소 중 'hello'가 포함된 요소를 선택하기

✅ $("요소 선택").contents()
선택한 요소의 **직접적인 자식 노드(텍스트 노드 포함)**를 가져옴
예: $("div").contents() → <div> 내부의 요소뿐만 아니라 텍스트 노드까지 포함하여 가져옴

✅ $("요소 선택:has(요소명)") / $("요소 선택").has("요소명")
선택한 요소 중에서 특정 하위 요소(자식 요소)가 포함된 요소만 선택
예: $("div:has(p)") 또는 $("div").has("p") → <p> 요소를 포함하는 <div>만 선택

✅ $("요소 선택:not(제외할 요소 선택)") / $("요소 선택").not(제외할 요소 선택)
선택한 요소 중에서 특정 요소를 제외하고 선택
예: $("li:not(.active)") 또는 $("li").not(".active") → .active 클래스가 아닌 <li> 요소만 선택

✅ $("요소 선택").탐색 선택자().end()
탐색 선택자(.find(), .children(), .filter() 등)를 사용한 후, .end()를 사용하면 이전 선택자로 돌아감

$("div").find("p").css("color", "red").end().css("border", "1px solid black");

$("div").find("p") → <div> 내부의 <p>를 선택하여 빨간색 적용
.end() → $("div") 선택으로 되돌아감
.css("border", "1px solid black") → <div>에 테두리 적용

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		// "#inner_1" 내부의 <p> 요소 중에서 "내용1"을 포함하는 요소를 선택
		$("#inner_1 p:contains(내용1)")
		.css({"background-color":"#ff0"});
 
		// "#inner_1" 내부의 <p> 요소 중에서 <strong> 태그를 포함한 요소를 선택
		$("#inner_1 p:has(strong)") 
		.css({"background-color":"#0ff"});
 
		// "#outer_wrap"의 모든 직속 자식 노드를 선택
		$("#outer_wrap").contents()
		.css({"border":"1px dashed #00f"});
 
		// "#inner_2" 요소의 하위 <p> 요소에서 첫 번재 요소만 제외하고 선택
		$("#inner_2 p").not(":first")
		.css({"background-color":"#0f0"});
 
		// "#inner_2" 내부의 <p> 요소 중 인덱스 2번 요소를 선택
        // 그러나 다시 end()메서드를 적용하기 때문에 인덱스를 선택하기 전의 선택자가 적용된다.
		$("#inner_2 p").eq(2).end()
		.css({"color":"#f00"});
	});
</script>
</head>
<body>
	<div id="outer_wrap">
		<h1>콘텐츠 탐색 선택자</h1>
		<section id="inner_1">
			<h1>contains( ), contents( ), has( )</h1>
			<p><span>내용1</span></p>
			<p><strong>내용2</strong></p>
			<p><span>내용3</span></p>
		</section>
		<section id="inner_2">
			<h1>not( ), end( )</h1>
			<p>내용4</p>
			<p>내용5</p>
			<p>내용6</p>
		</section>
	</div>
</body>
</html>

✅ find() / filter() 탐색 선택자

 $("요소 선택").find("하위 요소 중 필터링할 요소 선택")
$("요소 선택").filter("선택한 요소 중 필터링할 요소 선택")

class 값 "txt1"과 "txt2"가 포함된 <p> 요소를 확인하기

filter(function() {}) 함수의 인자값으로 익명 함수를 전달해서 익명 함수가 true를 반환하면 해당 요소를 선택하기

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		// id 값이 "inner_1"인 요소의 하위 요소 중 class 값이
		// ".txt1"인 요소를 선택하기
		$("#inner_1").find(".txt1")
		.css({"background-color":"#ff0"});
 
		// id 값이 "inner_1"인 요소의 하위 요소 중 class 값이
		// ".txt2"인 요소를 선택하기
		$("#inner_1 p").filter(".txt2")
		.css({"background-color":"#0ff"});
 
		// id 값이 "inner_2"이며 하위 요소인 <p>의 개수만큼 익명 함수가 실행됨
		$("#inner_2 p").filter(function(idx, obj){
			console.log(idx);
			return idx % 2 == 0;
		})
		.css({"background-color":"#0f0"});    
	});
</script>
</head>
<body>
	<div id="outer_wrap">
		<h1>콘텐츠 탐색 선택자</h1>
		<section id="inner_1">
			<h2>find( ), filter( )</h2>
			<p class="txt1">내용1</p>
			<p class="txt2">내용2</p>
		</section>
		
		<section id="inner_2">
			<h2>filter(function)</h2>
			<p>index 0</p>
			<p>index 1</p>
			<p>index 2</p>
			<p>index 3</p>
		</section>
	</div>
</body>
</html>

5. 선택자와 함께 알아두면 유용한 메서드 ▼

메서드	사용법	설명
is(":요소 상태")	$(".txt1").is(".visible")	선택한 요소가 보이면 true 반환
$.noConflict()	let 변수 = $.noConflict() 변수("요소 선택")	현재 제이쿼리에서 사용중인 $ 메서드 사용을 중단하고 새로 지정한 변수명 메서드를 사용함
get()	$("요소 선택").get(0). style.color =- "#f00"	선택자에 get(0)을 적용하면 자바스크립트 DOM방식의 스타일을 사용할 수 있음

✅ is 메서드

$("요소 선택").is(":[checked | selected | visivle | hidden | animated]"))

선택한 체크박스(checkbox) 또는 라디오(radio) 버튼 요소가 체크된(checked) 상태면 true를, 아니면 false 반환
선택한 선택 상자(select)에 옵션(option) 요소가 선택된(checked) 상태라면 true를, 아니면 false 반환
선택한 요소가 보이면(visible) true를, 아니면 false 반환
선택한 요소가 숨겨진(hidden) 상태면 true를, 아니면 false 반환
선택한 요소가 애니메이션 동작(animated) 상태면 true를, 아니면 false 반환

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		var result_1 = $("#inner_1 p")
		.eq(0).is(":visible");
		console.log(result_1);
 
		var result_2 = $("#inner_1 p")
		.eq(1).is(":visible");
		console.log(result_2);
 
		var result_3 = $("#chk1").is(":checked");
		console.log(result_3);
 
		var result_4 = $("#chk2").is(":checked");
		console.log(result_4);
	});
</script>
</head>
<body>
	<div id="outer_wrap">
		<h1>is( )</h1>
		<section id="inner_1">
			<h2>문단 태그 영역</h2>
			<p>내용1</p>
			<p style="display:none;">내용2</p>
		</section>
		
		<section id="inner_2">
			<h2>폼 태그 영역</h2>
			<p>
				<input type="checkbox" name="chk1" id="chk1" checked>
				<label for="chk1">체크1</label>
 
				<input type="checkbox" name="chk2" id="chk2">
				<label for="chk2">체크2</label>           
			</p>
		</section>
	</div>
</body>
</html>

6. 참고자료

1.정인용. JavaScript+jQuery 입문. 이지스퍼블리싱. https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=353419355

2. Canva에서 자료 제작 https://www.canva.com/

3. chatGPT에 물어보면서 작성

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 이벤트, 이벤트 핸들러, 버블링과 캡처링 등 총정리 (10)	2025.02.08
[JavaScript] 자바스크립트 제이쿼리 (jQuery) 기본선택자에 대해 알아보자! (10)	2025.02.07
[JavaScript] jQuery를 사용할 때 유의해야 할 사항들 (8)	2025.02.05
[JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습 (12)	2025.02.04
[JavaScript] 자바스크립트 백틱(``), 달러(${ }) 표현식 (템플릿 리터럴) (32)	2025.01.04

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JavaScript] 자바스크립트 제이쿼리 (jQuery) 위치 탐색선택자, 속성 탐색 선택자, 배열 관련 메서드 정리

1. 위치 탐색 선택자 ▼

1-1. first / last 선택자

1-2. even / odd 선택자

1-3. eq(index) / lt(index) / gt(index) 탐색 선택자

1-4. first-of-type / last-of-type 선택자

1-5. nth-child(숫자n) / nth-last-of-type(숫자) 선택자

1-6. only-child / slice(index) 선택자

2. 제이쿼리 배열 관련 메서드 ▼

2-1. each() / $.each()

2-2. $.map() / $.grep() 메서드

2-3. $.inArray() / $.isArray() / $.merge() 메서드

2-4. index() 메서드

3. 속성 탐색 선택자 ▼

4. 그 외의 선택자 - 컨텐츠 탐색 선택자 ▼

5. 선택자와 함께 알아두면 유용한 메서드 ▼

6. 참고자료

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

1. 위치 탐색 선택자 ▼

1-1. first / last 선택자

1-2. even / odd 선택자

1-3. eq(index) / lt(index) / gt(index) 탐색 선택자

1-4. first-of-type / last-of-type 선택자

1-5. nth-child(숫자n) / nth-last-of-type(숫자) 선택자

1-6. only-child / slice(index) 선택자

2. 제이쿼리 배열 관련 메서드 ▼

2-1. each() / $.each()

2-2. $.map() / $.grep() 메서드

2-3. $.inArray() / $.isArray() / $.merge() 메서드

2-4. index() 메서드

3. 속성 탐색 선택자 ▼

4. 그 외의 선택자 - 컨텐츠 탐색 선택자 ▼

5. 선택자와 함께 알아두면 유용한 메서드 ▼

6. 참고자료

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	$("요소 선택:first) 또는 $("요소 선택").first()
	$("요소 선택:last) 또는 $("요소 선택").last()

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<title> 탐색 선택자 </title>
	<script src="js/jquery.js"></script>
	<script>
	$(function(){
	$("#menu li:first")
	.css({"background-color":"#ff0"});

	$("#menu li:last")
	.css({"background-color":"#0ff"});
	});
	</script>
	</head>
	<body>
	<h1>first/last 선택자</h1>
	<ul id="menu">
	<li>내용1</li>
	<li>내용2</li>
	<li>내용3</li>
	<li>내용4</li>
	</ul>
	</body>
	</html>

	$("요소 선택:eq(index)") 또는 $("요소 선택").eq(index)
	$("요소 선택:lt(index)")
	$("요소 선택:gt(index)")

	$("요소 선택:nth-child(숫자)")
	$("요소 선택:nth-child(숫자n)")
	$("요소 선택:nth-last-child(숫자)")

	$("요소 선택:only-child")
	$("요소 선택").slice(start index, end index)

	$("요소 선택").each(function(매개변수1, 매개변수2) {})
	$.each($("요소 선택"), function(매개변수1, 매개변수2) {})
	$("요소 선택").each(function() { $(this) })
	$.each($("요소 선택"), function() {$(this) })

	$("li").each(function(index, element) {
	console.log(index + ": " + $(element).text()); // 인덱스와 텍스트 출력
	});

	var arr = ["사과", "바나나", "포도"];
	$.each(arr, function(index, value) {
	console.log(index + ": " + value); // 0: 사과, 1: 바나나, 2: 포도
	});

	var obj = { name: "Dain", age: 50 };
	$.each(obj, function(key, value) {
	console.log(key + ": " + value); // name: Dain, age: 50
	});

	$.map(Array, function(매개변수1, 매개변수1) {
	return 데이터;
	});

	$.grep(Array, function(매개변수1, 매개변수2) {
	return [true \| false];
	});

	$("요소 선택:contains(텍스트)")
	$("요소 선택").contents()
	$("요소 선택:has(요소명)") / $("요소 선택").has("요소명")
	$("요소 선택:not(제외할 요소 선택)") / $("요소 선택").not(제외할 요소 선택)
	$("요소 선택").탐색 선택자().end()

	$("요소 선택").find("하위 요소 중 필터링할 요소 선택")
	$("요소 선택").filter("선택한 요소 중 필터링할 요소 선택")