선택자 - 위치 탐색 선택자
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
// 후손선택자 (공백) + 구조적 가상클래스 선택자 (:even, :odd)
// *** 이 경우 배열처럼 0번으로 시작하기 때문에 혼동 주의해야한다
$("#menu li:even").css({ backgroundColor: "red" });
$("#menu li:odd").css({ backgroundColor: "blue" });
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body><head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
// eq(n)메소드 : 지정된 인덱스 번호와 일치하는 요소노드를 선택
$("#menu li").eq(2).css({ backgroundColor: "red" });
// lt(n) 메소드 : less than 지정된 인덱스 번호보다 작은 요소노드 선택
$("#menu li:lt(2)").css({ backgroundColor: "green" });
// lt(n) 메소드 : greater than 지정된 인덱스 번호보다 큰 요소노드 선택
$("#menu li:gt(2)").css({ backgroundColor: "blue" });
});
</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><head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$("li:first-of-type").css({ backgroundColor: "#ff0" });
$("li:last-of-type").css({ backgroundColor: "#0ff" });
});
</script>
</head>
<body>
<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>
</body><head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$("#menu1 li:nth-child(1)").css({ backgroundColor: "red" });
$("#menu1 li:nth-child(2n)").css({ border: "2px dashed green" });
$("#menu2 li:nth-last-child(2)").css({ backgroundColor: "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>
</ul>
</body><head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$("#menu1 li").slice(1, 3).css({ backgroundColor: "red" }); // 배열 인덱스 번호
$("li:only-child").css({ backgroundColor: "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>
</ul>
</body>
--------------------------
제이쿼리 배열 관련 메서드
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
// 0. 객체를 원소로 가지는 배열 선언
var arr = [
{ area: "서울" }, // 리터럴 방식의 객체
{ area: "부산" }, // 리터럴 방식의 객체
{ area: "전주" } // 리터럴 방식의 객체
];
// $.each 메소드 사용한 배열의 순회 (traverse)
$(arr).each(function (index, value) {
console.log(`${index} :`, value);
});
$.each($("#menu2 li"), function (index, value) {
console.log(`${index} :`, value);
});
$.each($("#menu2 li"), function (index) {
console.log(index + ":", $(this)); // $(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><head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
// $.map() 메소드 : 원래의 값 -> 새로운 유형의 값으로 매핑(사상)
$(function () {
let arr1 = [
{ area: "서울", name: "무대리"},
{ area: "서울", name: "홍과장"},
{ area: "대전", name: "박사장"},
];
let arr2 = $.map(arr1, function (element, index) {
if (element.area == "서울") {
return element.area; // 객체를 문자열로 매핑(사상)
}
});
console.log(arr2);
</script>
</head><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>배열 관련 메서드</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li id="list3">내용3</li>
<li>내용4</li>
</ul>
</body><head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
// 속성 선택자 ([속성명], 태그[속성명=속성값])
$("#wrap a[target]").css({ color: "#f00" });
$("#wrap a[href^=https]").css({ color: "#0f0" }); // ^ : 시작
$("#wrap a[href$=net]").css({ color: "#00f" }); // $ : 끝
$("#wrap a[href*=google]").css({ color: "#000" }); // * : 포함
// 아래의 후손선택자 다음의 가상 클래스 선택자(:) 중요!
$("#member_f :text").css({ backgroundColor: "#ff0" });
$("#member_f :password").css({ backgroundColor: "#0ff" });
});
</script>
</head>
<body>
<div id="wrap">
<p><a href="http://easyspub.co.kr" target="_blank">EasysPub</a></p>
<p><a href="https://naver.com">Naver</a></p>
<p><a href="http://daum.net">Daum</a></p>
<p><a href="http://google.co.kr">Google</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><head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
// p 태그중 숨겨진 태그 선택 (display: none)
$("#wrap p:hidden").css({
display: "block",
background: "#ff0"
});
var z1 = $("#zone1 :selected").val(); // val() : 선택한 value 값을 획득하는 메소드
var z2 = $("#zone2 :checked").val();
var z3 = $("#zone3 :checked").val();
console.log(z1);
console.log(z2);
console.log(z3);
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display:none">내용2</p>
<p>내용3</p>
</div>
<form action="#">
<p id="zone1">
<select name="course" id="course">
<option value="opt1">옵션1</option>
<option value="opt2" selected>옵션2</option>
<option value="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby1" value="독서"> 독서
<input type="checkbox" name="hobby2" value="자전거"> 자전거
<input type="checkbox" name="hobby3" value="등산" checked> 등산
</p>
<p id="zone3">
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female" checked> 여성
</p>
</form>
</body>
------
콘텐츠 탐색 선택자
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$("#inner_1 p:contains(내용1)").css({ backgroundColor: "red" });
$("#inner_1 p:has(strong)").css({ backgroundColor: "green" });
$("#outer_wrap").contents().css({ border: "1px dashed blue" });
$("#inner_2 p").not(":first").css({ backgroundColor: "yellow" });
$("#inner_2 p").eq(2).end().css({ color: "purple" });
});
</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>'국비학원' 카테고리의 다른 글
| [국비지원] KH 정보교육원 66일차 (0) | 2022.07.01 |
|---|---|
| [국비지원] KH 정보교육원 65일차 (0) | 2022.06.30 |
| [국비지원] KH 정보교육원 63일차 (0) | 2022.06.29 |
| [국비지원] KH 정보교육원 62일차 (0) | 2022.06.25 |
| [국비지원] KH 정보교육원 60~61일차 (0) | 2022.06.24 |
