티스토리 뷰
[ 1. 객체 편집 메소드 - before / insertBefore / after / insertAfter ] (***)
<!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. 새로운 요소노드(태그)를 어떻게 만드는가? by using jQuery (***)
// 방법1 : $("<새로운태그명>").text(content 내용) / $("<새로운태그명>").html(content 내용)
// 방법2 : $("<새로운태그명>컨텐츠 내용</새로운태그명>")
// =============================================================
// 2. eq(n) 선택자 : 선택자가 선택한 요소노드중 몇 번째 요소를 가지고 오는지 지정 ( 0번부터 시작한다. ) (***)
// =============================================================
$("#wrap p:eq(2)").after("<p>>>> Ater p:eq(2)</p>"); // 인덱스 번호 2에 해당하는 p태그를 선택하여, 그 뒤에 형제관계로 태그를 넣는다.
$("<p>>>> insert After p:eq(1)</p>").insertAfter("#wrap p:eq(1)"); // 인덱스 번호 1에 해당하는 p태그를 선택하여, 그 뒤에 요소를 넣는다. (***)
// =============================================================
$("#wrap p:eq(1)").before("<p>>>> Before p:eq(1)</p>"); // 인덱스 번호 1에 해당하는 p태그를 선택하여, 그 앞에 형제관계로 태그를 넣는다.
$("<p>>>> insert Before p:eq(0)</p>").insertBefore("#wrap p:eq(0)"); // 인덱스 번호 0에 해당하는 p태그를 선택하여, 그 앞에 형제관계로 태그를 넣는다. (***)
}); // .jq
</script>
</head>
<body>
<!-- div[id="wrap"]>p*3 -->
<div id="wrap">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
</div>
</body>
</html>[ 2. 객체 편집 메소드 2 - append / prepend ( 자식관계로 추가 ) ] (***)
<!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();
$("<li>appendTo</li>").appendTo("#listZone"); // 선택자로 선택한 요소의 자식태그로써 마지막 태그로 추가한다. (***)
$("#listZone").prepend("<li>prepend</li>"); // 선택자로 선택한 요소의 자식태그로써 첫번째 태그로 추가한다. (***)
// append와 prepend는 brfore과 after이 형제관계로 추가하는 것과 다르게 자식관계로 추가된다.
}); // .jq
</script>
</head>
<body>
<ul id="listZone">
<li>리스트</li>
</ul>
</body>
</html>[ 3. 객체 편집 메소드 3 - clone / remove / empty ] (**)
<!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 copyObj = $(".box1").children().clone();
console.log(copyObj);
// .box1.children()은 배열로 반환이 되며, .clone은 이를 그대로 복제한다는 의미이다.
// 예전에는 .clone(true)이면 하위 태그까지 그대로 복사하며, .clone(false)는 해당 태그만 복사했다. (***)
console.log($(".box1").children().clone()[0]);
// (method) JQuery.clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): JQuery
// 현재에는 블린값을 지정하는 것이 2개로 늘어났으며, 데이터와이벤트를 복사하는지 물어보는 메소드로 변했다.
// 기본적으로 하위요소를 복사하는 것으로 변했다.
console.log($(".box1").children().clone(true,false)[0]);
$(".box2").remove();
// 해당 요소뿐만이 아니라, remove메소드는 하위요소까지 제거해준다.
$(".box3").empty();
// 컨텐츠를 전부 비워버린다.
$(".box3").append(copyObj);
// box3에 자식태그로 copyObj를 추가한다. (***)
}); // .jq
</script>
</head>
<body>
<div class="box1">
<p>
내용1
<strong> 1 ) p태그의 자식태그 (인라인 요소)</strong>
<!-- <p> 2 ) p태그의 자식태그 2 (블록 요소)</p> -->
<!-- 블록 요소 내에는 블록요소와 인라인 요소를 포함할 수 있다는 것이 대전제이지만, (***) -->
<!-- 문단 태그 내에 또 문단 태그를 넣게 되면, 브라우저에서 예상하지 못한 결과가 나타날 수 있기에 지양해야 한다. -->
<!-- 문단 태그는 텍스트 요소를 기대하기 때문에, 문단태그 내에 공간을 분리하는 div태그가 와도 브라우저가 예외를 발생시킨다. -->
</p>
<p>내용2</p>
</div>
<div class="box2">
<p>내용3</p>
<p>내용4</p>
</div>
<div class="box3">
<p>내용5</p>
<p>내용6</p>
</div>
</body>
</html>[ 4. 객체 편집 메소드 4 - replace ] (***)
<!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>제이쿼리 - 객체편집메소드4</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();
$("h2").replaceWith("<h3>replace method</h3>");
// h2태그를 모두 찾아서 <h3>replace method</h3>로 변경(**)
// replacewith는 대상을 ~으로 바꿔라라는 의미이다.
$("<p>Change</p>").replaceAll("div");
// div태그를 전부 <p>Change</p>로 바꾼다.
}); // .jq
</script>
</head>
<body>
<!-- section[class=box1]>h2+div*2 -->
<section class="box1">
<h2>제목1</h2>
<div>내용1</div>
<div>내용2</div>
</section>
<section class="box2">
<h2>제목2</h2>
<div>내용3</div>
<div>내용4</div>
</section>
</body>
</html>[ 5. 객체 편집 메소드 5 - wrap / unwrap ] (****)
<!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>제이쿼리 - 객체편집 메소드5</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>
<style></style>
<script>
$(function(){
console.clear();
// ==============================================================
// 선택한 요소노드의 부모노드를 삭제해라! ( 부모가 wrap => unwrap )
$("strong").unwrap();
// 부모요소만 삭제하고, 해당 요소나 자식/형제요소는 그대로 둔다.
// ==============================================================
// 선택한 요소노드의 부모태그를 해당 태그로 생성해라!
$(".ct1").wrap("<div />");
// .ct1의 부모요소로 div태그가 생성된다.
// 이때 class=ct1인 요소가 2개가 있는데, 이때에는 요소가 각각 div태그로 따로 씌워진다.
// ==============================================================
// 선택한 요소노드의 부모태그를 해당 태그로 생성해라!
$(".ct2").wrapAll("<div />");
// 이때에는 class=ct2인 요소가 2개가 있는데, 이 2개의 요소 모두 같은 부모태그로 묶는다. ( 내용3과 내용4는 형제가 된다. )
// ==============================================================
// 선택한 요소의 컨텐츠를 새로운 태그로 감싼다.
$("li").wrapInner("<h3 />")
// 이때는 li의 컨텐츠인 목록1과 목록2가 h3태그로 감싸이게 된다.
// ==============================================================
}); // .jq
</script>
</head>
<body>
<h1 id="tit_1">
<strong>객체 조작 및 생성</strong>
<p>TEST - 제목 태그 내에 문단 태그를 생성할 수 있다.</p>
<div>TEST2 - 제목 태그 내에 공간태그도 생성할 수 있다.</div>
</h1>
<p class="ct1">내용1</p>
<p class="ct1">내용2</p>
<p class="ct2">내용3</p>
<p class="ct2">내용4</p>
<ul>
<li>목록1</li>
<li>목록2</li>
</ul>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 74일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.14 |
|---|---|
| KH 73일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.13 |
| KH 71일차 - 제이쿼리 ( 메소드 / 조별과제 ) (****) (0) | 2022.06.09 |
| KH 70일차 - 제이쿼리 ( 선택자 / 메소드 ) (*****) (0) | 2022.06.08 |
| KH 69일차 - 제이쿼리 ( jQuery ) 선택자 (***) (0) | 2022.06.07 |
댓글