탐색선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 예로 배열의 인덱스를 사용해서 선택하는 `위치탐색 선택자`와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 `속성 탐색 선택자`가 있다.
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] 함수 스코프와 this 키워드 (7) | 2025.06.17 |
|---|---|
| [JavaScript] 자바스크립트 이벤트, 이벤트 핸들러, 버블링과 캡처링 등 총정리 (11) | 2025.02.08 |
| [JavaScript] 자바스크립트 제이쿼리 (jQuery) 기본선택자에 대해 알아보자! (10) | 2025.02.07 |
| [JavaScript] jQuery를 사용할 때 유의해야 할 사항들 (8) | 2025.02.05 |
| [JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습 (12) | 2025.02.04 |
