💻 1. 웹개발_Front end/1-5 JQuery
[JQuary] 06-3 제이쿼리 탐색 선택자
달님🌙
2021. 9. 14. 14:02
반응형
탐색 선택자
- 탐색 선택자 기능 : 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색할 수 있음
- 탐색 선택자 종류 : 위치 탐색 선택자, 속성 탐색 선택자, (콘텐츠 탐색 선택자, 필터링 선택자)
위치 탐색 선택자
- 기본 선택자로 선택한 요소는 배열에 담긴다.
- 배열의 인덱스를 사용해 특정 요소를 좀 더 정확하게 선택할 수 있음
- 위치 탐색 선택자 종류
first / last 선택자
- first 선택자는 선택된 요소 중 첫 번째 요소만 선택
- last 선택자는 선택된 요소 중 마지막 요소만 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first/last 위치 탐색 선택자</title>
<script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>first/last 위치 탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<script>
//menu의 li중 첫 번째 요소 선택
//내용1 선택
//방법1.
$("#menu li:first").css( {
"border" : "1px solid red",
"background-color" : "#ff0"
});
//방법2.
// $("menu li").first.css( {
// "border" : "1px solid red",
// "background-color" : "#ff0"
// });
// menu 의 li중 마지막 요소 선택
//내용4 선택
//방법1.
$("#menu li:last").css( {
"border" : "1px dashed red",
"background-color" : "skyblue"
});
//방법2.
// $("menu li").last.css( {
// "border" : "1px dashed red",
// "background-color" : "skyblue"
// });
</script>
</body>
</html>
even / odd 선택자
- even 선택자는 짝수 인덱스 요소만 선택
- odd 선택자는 홀수 인덱스 요소만 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first/last 위치 탐색 선택자</title>
<script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>first/last 위치 탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<script>
//menu의 li중 홀수 번째 요소 선택
//내용1, 내용3 선택 - index = 0, 2
$("#menu li:even").css( {
"border" : "1px solid red",
"background-color" : "#ff0"
});
// menu 의 li중 짝수 번째 요소 선택
//내용2, 내용4 선택 - index = 1, 3
$("#menu li:odd").css( {
"border" : "1px dashed red",
"background-color" : "skyblue"
});
</script>
</body>
</html>
eq(index) / lt(index) / gt(index) 탐색선택자
first-of-type / last-of-type
nth-child(숫자 n) / nth-last-of-type(숫자) 선택자
only-child / slice(index) 선택자
제이쿼리 배열 관련 메서드
each() / $.each() 메서드
map() / $.grep() 메서드
$.inArray() / $.isArray() / $.merge() 메서드
index() 메서드
속성 탐색 선택자
속성과 값에 따른 탐색 선택자
속성 상태에 따른 탐색 선택자
그 외의 선택자 - 콘텐츠 탐색 선택자
contains() / contents() / has() / not() / end()
find() / filter() 탐색 선택자
선택자와 함께 알아두면 유용한 메서드
is() 메서드
반응형