본문 바로가기
국비학원

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

by 도전하는 개발자 2022. 6. 30.

kh day 065

 

  오늘도 한 분이 중도 포기하셨다. 파이널 조가 정해졌는데 우리 조에서는 부디 중도에 이탈하시는 분 없이 잘 마무리 할 수 있었으면 좋겠다. 이번 주에 제이쿼리와 Ajax까지 나가는걸 목표로 했었는데, 선택자 예제가 꽤나 많아서 진도가 지지부진하다. 한편으로는 개인 공부할 여유가 생긴 셈이니 그걸 위안으로 삼아야겠다!

 

---

 

콘텐츠 탐색 선택자

 

 find(), filter()

 

<head>
	<meta charset="UTF-8">
	<title> 탐색 선택자 </title>

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

	<script>
		$(function () {
			// find() 선택자: 지정된 요소노드를 DOM Tree에서 찾아서 선택 (하위 요소 중)
			$("#inner_1").find(".txt1").css({ backgroundColor: "red" });

			// filter() 선택자: 지정된 요소노드만 필터링 (선택한 요소 중)
			$("#inner_1 p").filter(".txt2").css({ backgroundColor: "green" });

			// filter() 익명함수 : 지정한 기준에 부합하는 요소노드만 필터링 수행
			$("#inner_2 p").filter(function (idx, obj) {
				console.log(idx);
				return idx % 2 == 0;
			}).css({ backgroundColor: "blue" });
		});
	</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>index 0</p>
			<p>index 1</p>
			<p>index 2</p>
			<p>index 3</p>
		</section>
	</div>
</body>

 

 

---


속성 조작 메서드

 

html(), text()

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

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

	<script>
		$(function () {
			// html() : 요소노드를 선택
			var result_1 = $("#sec_1").html();
			console.log(result_1);

			$("#sec_1 p").html("<a href=\"#\">Text1</a>");

			// text() : 텍스트를 선택
			var result_2 = $("#sec_2").text();
			console.log(result_2);

			$("#sec_2 p").text("Text2");
		});
	</script>
</head>

<body>
	<h1><strong>객체 조작 및 생성</strong></h1>

	<section id="sec_1">
		<h2><em>html()</em></h2>
		<p>내용1</p>
	</section>

	<section id="sec_2">
		<h2><em>text()</em></h2>
		<p>내용2</p>
	</section>
</body>

 

jq_selec3_2  - attr(), removeattr()

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

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

	<script>
		$(function () {
			var srcVal = $("#sec_1 img").attr("src"); // img의 src값을 얻기
			console.log(srcVal);

			$("#sec_1 img").attr({ // img의 속성값을 지정한 값으로 바꾸거나 새로 지정
					width: 200,
					src: srcVal.replace("1.jpg", "2.jpg"),
					alt: "바위"
				})
				.removeAttr("border"); // 기존 속성을 제거
		});
	</script>
</head>

<body>
	<h1><strong>객체 조작 및 생성</strong></h1>
	<section id="sec_1">
		<h2>이미지 속성</h2>
		<p><img src="images/math_img_1.jpg" alt="가위" border="2"></p>
	</section>
</body>



jq_selec3_3 - addClass(), removeClass(), toggleClass(), hasClass()

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

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

	<style>
		.aqua {background-color: aqua;}
		.red {background-color: red;}
		.green {background-color: green;}
		.yellow {background-color: yellow;}
	</style>

	<script>
		$(function () {
			$("#p1").addClass("aqua");      // class='aqua' 추가
			$("#p2").removeClass("red");    // class='red' 삭제
			$("#p3").toggleClass("green");  // class='green' 있으면 삭제, 없으면 추가
			$("#p4").toggleClass("green");  // class='green' 있으면 삭제, 없으면 추가
			
			// 선택한 요소노드는 6번째 p태그, 이 텍스트는 
			// #p5 노드에 class="yellow"가 있는지 따라 boolean 값을 전달
			$("#p6").text($("#p5").hasClass("yellow"));
		});
	</script>
</head>

<body>
	<p id="p1">내용1</p>
	<p id="p2" class="red">내용2</p>
	<p id="p3">내용3</p>
	<p id="p4" class="green">내용4</p>
	<p id="p5" class="yellow">내용5</p>
	<p id="p6"></p>
</body>



jq_selec3_4 - value()

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

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

	<script>
		$(function () {
			var result_1 = $("#user_name").val();  // 양식태그의 value 속성값 얻어내기
			console.log(result_1);

			$("#user_id").val("javascript");      // 양식태그의 value 속성값 설정하기

			// 선택된 요소노드에서, 지정된 이름의 속성값을 얻어오기
			// var result_2 = $("#user_id").val();              // 현재 value 값 javascript
			// var result_2 = $("#user_id").prop("value");      // 현재 value 값 javascript
			// var result_2 = $("#user_id").attr("value");      // 원래 value 값 hello
			var result_2 = $("#user_id").prop("defaultValue");  // 원래 value 값 hello
			console.log(result_2);
		});
	</script>
</head>

<body>
	<h1>객체 조작 및 생성</h1>
	
	<form action="#" id="form_1">
		<p>
			<label for="user_name">이름</label>
			<input type="text" name="user_name" id="user_name" value="용대리">
		</p>

		<p>
			<label for="user_id">아이디</label>
			<input type="text" name="user_id" id="user_id" value="hello">
		</p>
	</form>
</body>


-----

수치조작 메서드


jq_selec3_6 - height(), width(), innerHeight(), outerHeight(), outerHeight(), outerWidth()

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

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

	<style>
		* {	padding: 0;}

		#p1, #p2 {
			width: 100px;
			height: 50px;
			padding: 20px;
			border: 5px solid #000;
			background-color: #ff0;
		}
	</style>

	<script>
		$(function () {
			var height = $("#p1").height();      // height
			var innerHeight = $("#p1").innerHeight(); // height + padding
			var outerHeight = $("#p1").outerHeight(); // height + padding + border
			
			console.log(`height: ${height}`);  // height = 50
			console.log(`innerHeight: ${innerHeight}`);  // height + padding = 50 + (20+20) = 90
			console.log(`outerHeight: ${outerHeight}`);  // height + padding + border = 90 + (5 + 5) = 100

			$("#p2").outerWidth(100).outerHeight(100);
		});
	</script>
</head>

<body>
	<h1>수치 조작 메서드</h1>

	<p id="p1">내용1</p>
	<p id="p2">내용2</p>
</body>


jq_selec3_7 - position(), offset()

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

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

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#box_wrap {
			width: 300px;
			height: 200px;
			margin: 50px auto 0;
			position: relative;
			background-color: #ccc;
		}

		.box {
			width: 50px;
			height: 50px;
			position: absolute;
			left: 100px;
			top: 50px;
			background-color: #f00;
		}
	</style>

	<script>
		$(function () {	
			let off_t = $(".box").offset().top; // offset() -> document 기준 = 100
			let pos_t = $(".box").position().top; // position() -> 요소노드 기준 = 50

			$(".txt_1 span").text(off_t);
			$(".txt_2 span").text(pos_t);
		});
	</script>
</head>

<body>
	<div id="box_wrap">
		<p class="box">박스</p>
	</div>

	<p class="txt_1">절대 top위칫값: <span></span></p>
	<p class="txt_2">상대 top위칫값: <span></span></p>
</body>

 

jq_selec3_8  - scrollTop()

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

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

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			line-height: 1;
		}

		#wrap {
			height: 5000px;
			padding-top: 2000px;
		}
	</style>

	<script>
		$(function () {
			var topNum = $("h1").offset().top; // 2000

			// $(window) : 웹 브라우저를 선택하여 제이쿼리 메소드 적용
			// 적용내용 : 웹브라우저의 스크롤바 위치를 인자값으로 이동
			$(window).scrollTop(topNum);

			// 인자값 없이 호출하면 현재 웹 브라우저의 위치를 반환
			var sct = $(window).scrollTop();  // 2000
			console.log(sct);
		});
	</script>
</head>

<body>
	<div id="wrap">
		<h1>위치 메서드</h1>
	</div>
</body>


-----

무한스크롤 과제 (브레인스토밍)

구글링 금지! 직접 구현해 보세요


document.body.scrollHeight - 총 문서 높이 값
이거 곱하기 0.8 한 값보다 커지면 (if문)
body의 높이를 2배로 만들어라 

 

 

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

[국비지원] KH 정보교육원 67일차  (0) 2022.07.01
[국비지원] KH 정보교육원 66일차  (0) 2022.07.01
[국비지원] KH 정보교육원 64일차  (0) 2022.06.29
[국비지원] KH 정보교육원 63일차  (0) 2022.06.29
[국비지원] KH 정보교육원 62일차  (0) 2022.06.25

관련글

티스토리툴바