티스토리 뷰
[ 1. 구조적 가상 클래스 선택자 ]
<!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>제이쿼리 - 구조적가상선택자(탐색선택자)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 후손 선택자
$("#menu1 li").slice(1, 3).css({ backgroundColor : "#ff0" });
// JQuery.slice(start: number, end?: number): JQuery
// 배열로 다루기 때문에, 인덱스 번호는 0번부터 시작된다.
// end 번호는 작성하지 않아도 되는데, 이때는 시작번호부터 끝까지 지정되게 된다.
// 시작번호는 포함되지만 end번호는 포함되지 않는다. ( 즉, 이때는 인덱스번호 1번과 2번이 선택된다. )
// 구조적 가상 클래스 선택자 : li태그 중에 자식이 하나만 있는 태그만 선택한다.
$("li:only-child").css({ backgroundColor : "#0ff" });
}); // .jq
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1(인덱스번호0)</li>
<li>내용1-2(인덱스번호1)</li>
<li>내용1-3(인덱스번호2)</li>
<li>내용1-4(인덱스번호3)</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
</ul>
</body>
</html>[ 2. 배열순회 메소드 ]
<!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>제이쿼리 - 배열관련 메소드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// ===========================================================
// 원소가 객체 리터럴인 배열 생성
// ===========================================================
let arr = [
{ area : "서울"},
{ area : "부산"},
{ area : "전주"}
]; // arr 배열
// ===========================================================
// 배열을 조작하는 다양한 제이쿼리 메소드 소개
// ===========================================================
$(arr).each(function(index, element){ // 배열의 순회1
console.log( index + ":", element);
}); // .each
// 각각의 원소가 인덱스 번호 : 원소의 형태로 출력한다.
// 이 경우에는 원소가 객체 리터럴이기 때문에 0: {area: '서울'}의 형태로 출력한다.
// .each는 인덱스 번호와 원소를 하나씩 빼올 뿐이지, 이를 어떻게 활용하는지는 우리가 작성해야 한다. (*)
// (method) JQuery.each(func: (index: number, elem: Element) => any): JQuery
// 객체 리터럴을 생성할 때에는 키가 문자열이 되는 것을 지양하는 것이 좋다.
console.log("==== The End1 ====");
// ===========================================================
// $.each($(selector), function)
$.each($("#menu2 li"), function(i, e){ // 배열의 순회2
console.log( i + ":", e);
}); // $.each
// $.each는 $(selector)에서 선택한 요소를 배열로 인덱스 번호와 원소의 값을 넘겨준다는 것이다.
// function을 통해서 값이 넘어왔을때 어떻게 할지를 정해야 한다.
// (method) JQueryStatic.each(collection: any, callback: (indexInArray: any, valueOfElement: any) => any): any (+1 overload)
console.log("==== The End2 ====");
// ===========================================================
// $.each() 메소드 내의 this는 현재 원소를 의미한다.
$.each($("#menu2 li"), function(i){ // 배열의 순회3
// console.log(i + ":", $(this));
console.log(i + ":", this);
});
// 위의 $.each와 같이 $(selector)에서 선택한 요소를 배열로 인덱스 번호와 원소의 값을 넘겨주지만, 인덱스번호만 가지고 온 것이다.
// ===========================================================
}); // .jq
</script>
</head>
<body>
<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>
[ 3. $.map( ) / $.grep( ) 메소드 ] (***)
<!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>제이쿼리 - 배열 메소드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 리터럴 객체를 원소로 가지는 배열 생성
let arr1 = [ {
area : "서울",
name : "무대리"
},{
area : "부산",
name : "홍과장"
},{
area : "대전",
name : "박사장"
},{
area : "서울",
name : "빅마마"
}]; // arr1
// ============================================================================
// mapping 결과로 나온 것을 새로운 배열을 생성하여, let 변수에 저장 (***)
// 사상작업 : 배열 안의 객체 중에서 사는 지역이 서울인 사람객체만 새로운 배열로 반환
let arr2 = $.map(arr1, function(element, index){
if( element.area == "서울"){ return element; } // if
}); // arr2
// let arr2 = $.map(arr1, function(element, index){
// return element.name; // 이름만 반환
// }); // arr2
// .map은 배열과 function을 넣어줘야 한다.
// map은 필터링이 주가 아니라 사상작업이 주이다.
console.log(arr2);
console.log("===== The End =====")
// ============================================================================
// $.grep() 메소드는 필터링을 할 때 사용한다. (***)
let arr3 = $.grep(arr1, function(e, i){
if( e.area == "서울"){
return true;
}else{
return false;
} // if- else
}); // arr3
console.log(arr3);
console.log("===== Second End =====")
}); // .jq
</script>
</head>
<body>
</body>
</html>[ 4. 배열 메소드 - inArray( ) / isArray( ) / $.merge( ) ]
<!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>제이쿼리 - 배열메소드2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
var arr1 = ["서울", "대전", "부산","전주"];
var arr2 = ["한국","미국","일본","중국"];
var obj = {
name : "정부장",
area : "서울"
}; // obj
// ===================================================
// arr1이라는 배열안에 부산이라는 원소가 있는지 확인한다.
// 찾으면 인덱스 번호를 반환해주고, 없으면 -1을 반환한다.
let idxNum = $.inArray("부산", arr1);
console.log(idxNum); // 2
// ===================================================
// 배열이 맞는지 확인한다. ( boolean 값으로 반환한다. )
let okArray1 = $.isArray(arr1);
let okArray2 = $.isArray(obj);
console.log(okArray1); // true
console.log(okArray2); // false
// ===================================================
// 인자로 준 여러 배열을 하나로 합쳐서 새로운 배열로 반환
$.merge(arr2, arr1);
console.log(arr2); // 합쳐져서 나온다.
console.log(arr1); // 그대로 남아 있다.
// $.merge는 오리지날 배열을 건드리기 때문에 조심해야 한다. (***)
// 합쳐지는 배열은 처음 지정한 배열에 합쳐지며, 합쳐지는 대상의 배열은 그대로 남아 있다.
}); // .jq
</script>
</head>
<body>
</body>
</html>[ 5. 배열 메소드2 - $( 요소 선택).index( $( 지정한 요소 선택) ) ]
<!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>제이쿼리 - 배열메소드3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 선택자로 요소를 먼저 선택한 후, 지정한 요소의 인덱스 정보를 작성한다.
let idxNum = $("li").index( $("#list3") );
console.log(idxNum);
// inArray와 같이 지정한 요소의 인덱스 번호를 반환하며, 없을 경우에는 -1을 반환한다. (*)
}); // .jq
</script>
</head>
<body>
<h1>배열관련 메소드</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li id="list3">내용3</li>
<li>내용4</li>
</ul>
</body>
</html>[ 6. 선택자 - .val( ) ] (*)
<!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>제이쿼리 - 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$("#wrap p:hidden").css({
display : "block",
backgroundColor : "#ff0"
});
// 공백을 통해 후손 선택자를 사용하고 있다.
// 후손 중에 다은 속성에 해당하는 요소를 선택하여 값을 추출하고 있다.
let z1 = $("#zone1 :selected").val();
console.log(z1);
let z2 = $("#zone2 :checked").val();
console.log(z2);
let z3 = $("#zone3 :checked").val();
console.log(z3);
// .val()은 값(value의 값)을 추출해낼때 사용한다.(**)
}); // .jq
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display: none;">내용2</p>
<!-- display : none은 자리조차 없애버린다. -->
<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="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="자전거">자전거
<input type="checkbox" name="hobby" value="등산" checked>등산
</p>
<p id="zone3">
<input type="radio" name="gender" value="male">남성
<input type="radio" name="gender" value="female" checked>여성
</p>
</form>
</body>
</html>
[ 7. find 메소드와 filter 메소드 ] (***)
<!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>제이쿼리</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// ===========================================================
// 1. find 메소드 : (method) JQuery.find(selector: string): JQuery (+2 overloads)
$("#inner_1").find(".txt1").css({backgroundColor : "#ff0"}); // 노랑
// find 메소드는 "#inner_1" 요소의 하위 요소중에 ".txt1"를 찾아서 css를 적용하는 것이다.(*)
// ===========================================================
// 2. filter 메소드 : (method) JQuery.filter(selector: string): JQuery (+3 overloads)
$("#inner_1 p").filter(".txt2").css({ backgroundColor : "#0ff"}); // 아쿠아
// "#inner_1 p" 요소의 하위 요소 중 ".txt2"를 필터링하여 css를 적용한 것이다.
$("#inner_2 p").filter(function(idx, obj){
console.log(idx);
return idx % 2 == 0; // 2로 나누었을때 나머지가 0인 요소에만 적용한다. (***)
}).css({backgroundColor : "#0f0"}); // 연두
// find는 무엇을 찾는 것에 초점을 맞추어져있지만, filter은 말 그대로 필터링에 초점을 두고 있다.
// id앞에 #을 붙이는 것을 까먹지 말자!! (***)
// ===========================================================
}); // .jq
</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>index0</p>
<p>index1</p>
<p>index2</p>
<p>index3</p>
</section>
</div>
</body>
</html>[ 8. 객체 조작 메소드 - text / html 메소드 ] (****)
<!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>제이쿼리 - 객체 조작 메소드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// ===================================================
// html메소드는 선택된 태그의 컨텐츠(텍스트 노드)를 반환
var result1 = $("#sec_1").html();
console.log(result1);
// 출력 결과 : 태그가 그대로 남아있다.
// <h2><em>html()</em></h2>
// <p>내용1</p>
// ===================================================
// html메소드의 인자값으로 태그가 포함된 문자열을 주면
// 이 문자열로 선택된 태그의 컨텐츠 지정
$("#sec_1 p").html("<a href = \"#\">Text1</a>");
// 태그를 그래로 컨텐츠 영역에 넣어 준다.
// ===================================================
// text메소드 : 선택된 태그의 컨텐츠를 일반적인 텍스트로 반환
let result2 = $("#sec_2").text();
console.log(result2);
// 출력 결과 : 태그가 사라진 상태이다.
// 텍스트()
// 내용2
// ===================================================
// text메소드에 인자값으로 문자열을 주면, 이 문자열로 선택된 태그의 컨텐츠(텍스트 노드)로 지정
$("#sec_2 h2").text("<a>text()메소드로 컨텐츠 바뀌었습니다.</a>");
// html메소드와 다르게 태그가 인정되지 않고 문자열로 인식되어, 태그가 문자로 그대로 들어간다.
// ===================================================
}); // .jq
</script>
</head>
<body>
<h1><strong>객체 조작 메소드</strong></h1>
<section id="sec_1">
<h2><em>html()</em></h2>
<p>내용1</p>
</section>
<!-- em태그는 특정한 문맥을 강조할 때 사용한다. -->
<section id="sec_2">
<h2><em>텍스트()</em></h2>
<p>내용2</p>
</section>
</body>
</html>[ 9. 객체 조작 메소드 2 - attr 메소드 ] (****)
<!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>제이쿼리 - 객체조작메소드2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 1. 선택한 태그의 src 속성의 값을 얻어냄 (***)
let srcVal = $("#sec_1 img").attr("src");
console.log(srcVal); // 속성값 출력
// 공백은 후손 선택자이기에, 직계가 아니더라도 선택이 가능하다.
$("#sec_1 p img").
// 2. 선택한 태그의 여러속성을 한번에 설정한다. (by 객체리터럴) (****)
attr({
width : 200,
// 위의 1.에서 얻어낸 속성객체의 replace()메소드로 속성값 치환 (***)
src : srcVal.replace("https://picsum.photos/id/684/600/400", "https://picsum.photos/600/400"),
alt : "랜덤입니다."
}).
// 3. 지정된 속성을 제거
removeAttr("border");
}); // .jq
</script>
</head>
<body>
<h1><strong>객체 조작 메소드</strong></h1>
<section id="sec_1">
<h2>이미지 속성</h2>
<p><img src="https://picsum.photos/id/684/600/400" alt="산" border ="2"></p>
</section>
</body>
</html>728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 72일차 - 제이쿼리 ( 객체 편집 메소드 ) (****) (0) | 2022.06.10 |
|---|---|
| KH 71일차 - 제이쿼리 ( 메소드 / 조별과제 ) (****) (0) | 2022.06.09 |
| KH 69일차 - 제이쿼리 ( jQuery ) 선택자 (***) (0) | 2022.06.07 |
| KH 68일차 - 문서 객체 모델 (**) / 제이쿼리 시작 (0) | 2022.06.03 |
| KH 67일차 - 자바스크립트 ( 사용자 정의 객체 / 배열 객체 / Date 객체 ) (*****) (0) | 2022.06.02 |
댓글