728x90
반응형
SMALL
# first / last 선택자
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(function() {
$("#menu li:first").css("background-color", "pink");
$("#menu li:last").css("background-color", "skyblue");
})
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
# even / odd 선택자
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(function () {
$("#menu li:odd").css("background-color", "pink");
$("#menu li:even").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
# eq / lt / gt 선택자
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(function(){
$("#menu li").eq(2).css("background-color", "red");
//$("#menu li:eq(2)").css("background-color", "red");
$("#menu li:gt(2)").css("background-color", "orange");
$("#menu li:lt(2)").css("background-color", "yellow");
})
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
</body>
</html>
# first-of-type / last-of-type 선택자
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(function(){
$("li:first-of-type").css("background-color", "pink");
$("li:last-of-type").css("background-color", "skyblue");
});
</script>
</head>
<body>
<h1>탐색 선택자</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>
<li>내용2-5</li>
</ul>
</body>
</html>
# nth-child / nth-last-of-child 선택자
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(function(){
$("#menu1 li:nth-child(1)").css("background-color", "red");//1
$("#menu1 li:nth-child(2n)").css("background-color", "orange");//2의 배수
$("#menu2 li:nth-last-child(4)").css("background-color", "blue");
//리스트의 마지막 요소로 부터 n 번째 요소. 거꾸로 카운트. 그래서 내용2-2가 blue
});
</script>
</head>
<body>
<h1>탐색 선택자</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>
<li>내용2-5</li>
</ul>
</body>
</html>
# only-child / slice 선택자
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(function(){
$("#menu1 li").slice(1,3).css("background-color", "pink");//1초과 3이하, 1-2와 1-3
$("li:only-child").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>탐색 선택자</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>
출처 : doit javascript
728x90
반응형
LIST
'JAVASCRIPT' 카테고리의 다른 글
| Javascript Jquery attribute search selector 자바스크립트 제이쿼리 속성 탐색 선택자 (0) | 2022.05.12 |
|---|---|
| Javascript Jquery Array related method 자바스크립트 제이쿼리 배열 관련 메서드 (0) | 2022.05.11 |
| Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 2 (0) | 2022.05.09 |
| Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 1 (0) | 2022.05.08 |
| Javascript Function 자바스크립트 함수 (0) | 2022.05.08 |