본문 바로가기
국비학원

[국비지원] KH 정보교육원 66일차

by 도전하는 개발자 2022. 7. 1.

객체 편집 메서드

 


jq_selec3_9 - before(), insertBefore(), after(), insertAfter()

<head>
	<meta charset="UTF-8">
	<title> 객체 조작 및 생성 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			//   "요소 선택"              "새 요소"
			$("#wrap p:eq(2)").after("<p>After</p>"); 
			// eq(index) : 지정한 인덱스 선택

			//    "새 요소"                        "요소 선택"
			$("<p>insertAfter</p>").insertAfter("#wrap p:eq(1)");

			//   "요소 선택"              "새 요소"
			$("#wrap p:eq(1)").before("<p>Before</p>");

			//    "새 요소"                        "요소 선택"
			$("<p>insertBefore</p>").insertBefore("#wrap p:eq(0)");
		});
	</script>
</head>

<body>
	<div id="wrap">
		<p>내용1</p>
		<p>내용2</p>
		<p>내용3</p>
	</div>
</body>


jq_selec3_10 - append(), appendTo(), prepand(), prepandTo()

<head>
	<meta charset="UTF-8">
	<title> 객체 조작 및 생성 </title>

	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			//     "새 요소"                 "요소 선택"
			$("<li>appendTo</li>").appendTo("#listZone"); // 상하관계로 넣어라

			// "요소 선택"              "새 요소"
			$("#listZone").prepend("<li>prepend</li>");
		});
	</script>


</head>

<body>
	<ul id="listZone">
		<li>리스트</li>
	</ul>
</body>



jq_selec3_11 - clone(), empty(), remove()

<head>
	<meta charset="UTF-8">
	<title> 객체 조작 및 생성 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			var copyObj = $(".box1").children().clone();

			$(".box2").remove(); // remove() : 선택한 요소를 삭제

			$(".box3").empty();  // empty() : 선택한 요소의 하위 요소들을 삭제
			$(".box3").append(copyObj);
		});
	</script>
</head>

<body>
	<div class="box1">
		<p>내용1</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>


jq_selec3_12 - replaceAll(), replaceWith()

<head>
	<meta charset="UTF-8">
	<title> 객체 조작 및 생성 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			$("h2").replaceWith("<h3>replace method</h3>");
			$("<p>Change</p>").replaceAll("div");
		});
	</script>
</head>

<body>
	<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>


jq_selec3_13 - unwrap(), wrap()

<head>
	<meta charset="UTF-8">
	<title> 객체 조작 및 생성 </title>
	<script src="js/jquery.js"></script>

	<style>
		div {background-color: aqua;}
	</style>

	<script>
		$(function () {
			$("strong").unwrap();       // 선택한 요소의 부모 요소를 삭제
			// $(".ct1").wrap("<div>");    // 선택한 요소를 각각 div로 감싼다
			// $(".ct2").wrapAll("<div>"); // 선택한 요소를 한번에 div로 감싼다
			// $("li").wrapInner("<h3>");  // 선택한 요소의 하위 요소를 h3로 감싼다
		});
	</script>
</head>

<body>
	<h1 id="tit_1">
		<strong>객체 조작 및 생성</strong>
	</h1>

	<p class="ct1">내용1</p>
	<p class="ct1">내용2</p>
	<p class="ct2">내용3</p>
	<p class="ct2">내용4</p>

	<ul>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</body>




-------

7장 제이쿼리 이벤트

이벤트 등록 메서드


*이벤트 처리에 필요한 요소
(1) E.target
(2) E.type
(3) E.listener
(4) E.handler

 


단독 이벤트 등록 메서드



그룹 이벤트 등록 메서드


jq_event1_1 - 단독 이벤트 등록 메서드, 그룹 이벤트 등록 메서드

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			// 단독 이벤트 등록 메소드
			$(".btn1").click(function () {
				$(".btn1").parent().next().css({ "color" : "red" });
			});

			// 그룹 이벤트 등록 메소드
			$(".btn2").on({
				"mouseover focus": function () {
					$(".btn2").parent().next().css({ "color" : "green" });
				},
				"mouseout blur": function () {
					$(".btn2").parent().next().css({ "color" : "blue" });
				},
			});
		});
	</script>
</head>

<body>
	<p>	<button class="btn1">버튼1</button>	</p>
	<p>내용1</p>

	<p>	<button class="btn2">버튼2</button>	</p>
	<p>내용2</p>
</body>



강제이벤트 발생
jq_event1_2 - trigger()

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			$(".btn1").click(function () {
				$(".btn1").parent().next().css({ "color": "red" });
			});

			$(".btn2").on({
				"mouseover focus": function () {
					$(".btn2").parent().next().css({ "color": "green" });
				}
			});

			// trigger() : 사용자가 이벤트가 발생시키지 않아도 강제로 발생시킴
			$(".btn1").trigger("click");
			$(".btn2").trigger("mouseover");
		});
	</script>
</head>

<body>
	<p>	<button class="btn1">버튼1</button>	</p>
	<p>내용1</p>
	
	<p>	<button class="btn2">버튼2</button>	</p>
	<p>내용2</p>
</body>


이벤트 제거
jq_event1_3 - off()

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>
	<script>
		$(function () {
			$(".btn1").click(function () {
				$(".btn1").parent().next().css({ "color": "red" });
			});

			$(".btn2").on({
				"mouseover focus": function () {
					$(".btn2").parent().next().css({ "color": "green" });
				}
			});

			// off() : 등록된 이벤트를 제거함
			$(".btn1").off("click");
			$(".btn2").off("mouseover focus");
		});
	</script>
</head>

<body>
	<p>	<button class="btn1">버튼1</button>	</p>
	<p>내용1</p>

	<p>	<button class="btn2">버튼2</button>	</p>
	<p>내용2</p>
</body>

'국비학원' 카테고리의 다른 글

[국비지원] KH 정보교육원 68일차  (0) 2022.07.04
[국비지원] KH 정보교육원 67일차  (0) 2022.07.01
[국비지원] KH 정보교육원 65일차  (0) 2022.06.30
[국비지원] KH 정보교육원 64일차  (0) 2022.06.29
[국비지원] KH 정보교육원 63일차  (0) 2022.06.29

관련글

티스토리툴바