본문 바로가기
국비학원

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

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

지난주 훈련복기
가. 자바스크립트 언어 완료
- 배열 객체생성, BOM, DOM, 생성자 함수
- 객체 리터럴과 JSON이 매우 유사

이번주 훈련방향
가. 제이쿼리를 이용한 DOM조작 및 이벤트 처리 끝내기
나. 제이쿼리를 이용한 비동기호출(AJAX) 끝내기 (두잇 교재 끝내기)
다. 가,나 끝나는대로 서버프로그래밍 구현 (Servlet/JSP)

---------------------

jQuey
자바스크립트의 라이브러리
브라우저 호환성 문제 해결
쉽고 편리한 기능 구현

자바스크립트 라이브러리 사용방식 2가지
1) xxx.js 라이브러리 파일을 다운로드 후 로컬에서 사용
2) CDN (Contents Delivery Network) 방식
 : 지정된 외부서버에 올려져있는 xxx.js 파일을 링크시켜 사용
   우리는 이 방식을 이용하자!!  
   cdnjs/com 에서 jQuery와 jQuery-migrate 검색해 추가해주자
   


자바스크립트와 제이쿼리 코드비교
자바스크립트 :  document.getElementById("p").innerHTML = "웹 프로그래밍";
제이쿼리       :  $("#p").html("웹 프로그래밍");

제이쿼리 함수
기본형 : jQuery(선택자).메소드
단축형 : $(선택자).메소드 

<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    
    <style>
        
    </style>

    <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>
        // jQuery Entry Point 작성
        $(document).ready(function() {
            // jQuery Method
        });

        // jQuery Entry Point 단축형 (추천!)
        $(function(){
            // jQuery Method
        });

        // DOM tree가 브라우저 메모리에 완성되면 (ready 이벤트)
        // 일련의 제이쿼리 코드를 실행하라
    </script>
</head>



선택자 


선택자 - 직접 선택자

 

<head>
	<meta charset="UTF-8">
	
	<title> 선택자 </title>
	
	<script src="js/jquery.js"></script>
	<!-- 이렇게 말고 cdnjs.com에서 적용하자 -->
	
	<script>
		$(function () {
			$("#title").css("color", "red");
		});

		// 익명함수니까 애로우 펑션으로 이렇게 해도 된다 (람다)
		// $( () => {
		// 	$("#title").css("color", "red");
		// }); 
	</script>
</head>

<body>
	<h1 id="title">제목</h1>
</body>

 

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

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

	<script>
		// 전체 선택자 *
		$(function () {
			$("*").css("border", "1px solid blue");
		});
	</script>
</head>

<body>
	<h1>제이쿼리</h1>
	<h2>선택자</h2>
	<h3>직접 선택자</h3>
</body>

 

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

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

	<script>
		$(function() {
			$('#tit').css("background-color", "#ff0");
			$('#tit').css("border", "2px solid #f00");

			// 메소드 체이닝
			// $("#tit").css("background-color", "#ff0").css("border", "2px solid #f00");
		});
	</script>
</head>

<body>
	<h1>제이쿼리</h1>
	<h2 id="tit">선택자</h2>
	<h3>직접 선택자</h3>
</body>

 

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

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

	<script>
		$( () => { // 익명함수는 이렇게 애로우 펑션으로 표현가능
			// 메소드 체이닝
			$(".tit").css("background-color", "#ff0").css("border", "2px dashed #f00");
		});
	</script>
</head>

<body>
	<h1>제이쿼리</h1>
	<h2 class="tit">선택자</h2>
	<h3>직접 선택자</h3>
</body>

 



선택자 - 인접 관계 선택자

 

 

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

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

	<script>
		// 소속 선택자
		$(function () {
			$("h1.tit").css("background-color", "#0ff")
				.css("border", "2px dashed #f00");
		});
	</script>
</head>

<body>
	<h1 class="tit">제이쿼리</h1>
	<h2>선택자</h2>
	<h3 class="tit">직접 선택자</h3>
</body>

 

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

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

	<script>
		$(function () {
			// 선택자가 선택한 요소노드의 부모요소를 선택
			$("#list_1").parent()
				.css("border", "2px dashed #f00");
		});
	</script>
</head>

<body>
	<h1>부모 선택자</h1>

	<ul id="wrap">
		<li>리스트1
			<ul>
				<li id="list_1">리스트1-1</li>
				<li>리스트1-2</li>
			</ul>
		</li>
		<li>리스트2</li>
		<li>리스트3</li>
	</ul>
</body>

 

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

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

	<script>
		$(function () {
			// 자식 선택자 (손자 선택x)
			$("#wrap > h1").css("border", "2px dashed red");

			// 자식 선택자
			$("#wrap > section")
			.children() // 모든 자식들을 선택하라!
			.css({
				backgroundColor: "yellow",
				border: "2px solid blue"
			});
		});

		$(function(){
			$("#wrap > h1")
		})
	</script>
</head>

<body>
	<div id="wrap">
		<h1>인접 관계 선택자</h1>

		<p>내용1</p>

		<section>
			<h1>자식 요소 선택자</h1>
			<p>내용2</p>
		</section>
	</div>
</body>

 

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

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

	<script>
		$(function () {
			let style_1 = {
				backgroundColor: "#0ff",
				border: "2px solid #f00"
			};

			let style_2 = {
				backgroundColor: "#ff0",
				border: "2px dashed #f00"
			};

			// 클래스 선택자 + 인접 형제 요소 선택 메소드
			$(".txt").prev().css(style_1);		// 바로 윗 형을 선택 (prev)
			$(".txt + p").css(style_2); 		// 바로 아래 동생 선택 (+ == next)
			$(".txt").next().next().css(style_2); // 바로 아래아래 동생 선택 (next)
		});
	</script>
</head>

<body>
	<div id="wrap">
		<h1>인접 관계 선택자</h1>

		<p>내용1</p>
		<p class="txt">내용2</p>
		<p>내용3</p>
		<p>내용4</p>
	</div>
</body>



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

	<script src="js/jquery.js"></script>
	
	<script>
		$(function () {
			let style_1 = {
				backgroundColor: "#0ff",
				border: "2px solid #f00"
			};

			let style_2 = {
				backgroundColor: "#ff0",
				border: "2px dashed #f00"
			};

			$(".txt").prevAll().css(style_1); // 선택한 요소 노드의 모든 형들을 선택
			$(".txt").nextAll().css(style_2); // 선택한 요소 노드의 모든 동생들을 선택
		});
	</script>
</head>

<body>
	<div id="wrap">
		<h1>인접 관계 선택자</h1>

		<p>내용1</p>
		<p class="txt">내용2</p>
		<p>내용3</p>
		<p>내용4</p>
	</div>
</body>

 

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

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

	<script>
		$(function () {
			let style_1 = {
				backgroundColor: "#0ff",
				border: "2px solid #f00"
			}

			// 선택한 요소노드의 모든 형제들 선택
			$(".txt").siblings().css(style_1); 
		});
	</script>
</head>

<body>
	<div id="wrap">
		<h1>인접 관계 선택자</h1>

		<p>내용1</p>
		<p class="txt">내용2</p>
		<p>내용3</p>
		<p>내용4</p>
	</div>
</body>

 

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

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

	<script>
		$(function () {
			let style_1 = {
				backgroundColor: "#0ff",
				border: "2px solid #f00"
			};

			// ~Until은 당사자들은 포함 안 함!!!
			$(".txt3").prevUntil(".title").css(style_1);
			$(".txt3").nextUntil(".txt6").css(style_1);
		});
	</script>
</head>

<body>
	<div id="wrap">
		<h1 class="title">선택자</h1>

		<p>내용1</p>
		<p>내용2</p>
		<p class="txt3">내용3</p>
		<p>내용4</p>
		<p>내용5</p>
		<p class="txt6">내용6</p>
	</div>
</body>

 

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

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

	<script>
		$(function () {
			// 선택한 요소노드 기준으로 모든 부모 요소 노드를 선택 (html, body 태그까지 선택함)
			$(".txt1").parents()
				.css({
					border: "2px solid blue"
				});

			// 선택한 요소노드 기준으로 div 태그가 나올때 까지 모든 부모 요소 노드 선택
			$(".txt2").parents("div")
				.css({
					border: "2px solid red"
				});
		});

		$(function(){
			$(".txt1").parents().css();
			$(".txt1").parents("div").css();
		})
	</script>
</head>

<body>
	<h1 class="title">선택자</h1>

	<section>
		<div>
			<p class="txt1">내용</p>
		</div>
	</section>

	<section>
		<div>
			<p class="txt2">내용</p>
		</div>
	</section>
</body>

 

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

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

	<script>
		$(function () {
			// 위의 부모 요소노드 중 가장 가까운 div 노드를 선택
			$(".txt1").closest("div")
				.css({
					border: "2px solid #f00"
				});
		});
	</script>
</head>

<body>
	<h1 class="title">선택자</h1>

	<div>
		<div>
			<p class="txt1">내용</p>
		</div>
	</div>
</body>

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

[국비지원] KH 정보교육원 65일차  (0) 2022.06.30
[국비지원] KH 정보교육원 64일차  (0) 2022.06.29
[국비지원] KH 정보교육원 62일차  (0) 2022.06.25
[국비지원] KH 정보교육원 60~61일차  (0) 2022.06.24
[국비지원] KH 정보교육원 59일차  (0) 2022.06.21

관련글

티스토리툴바