교육 66일차 강의

구성본·2022년 6월 21일

1. 학습한 내용

1. jQuery선택자

1. Ready함수

Window.onload는 태그 객체가 모두 생성되면 발생되는 이벤트로 웹 화면이 처음 나타날 때 필요한 작업이 있다면 여기서 구현
Ready도 동일한 시점에 동작
차이점은 window.onload는 여러 개 있을 경우 제일 마지막 것만 동작, Ready는 모든 부분이 동작
Onload

<script>
	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML = "on load 1<br/>";
	}
	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML = "on load 2<br/>";
	}
	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML = "on load 3<br/>";
	} // onload는 맨 마지막 코드만 실행이 된다
</script>

Ready

<script>
	$(document).ready(function(){
		$("#result").append("ready 1<br/>");
	});
	$(document).ready(function(){
		$("#result").append("ready 2<br/>");
	});
	$(document).ready(function(){
		$("#result").append("ready 3<br/>");
	}); // ready는 실행만 코드들이 모두 출력이 된다
</script>![](https://velog.velcdn.com/images/devil66v/post/f5f90bf8-dc98-4b8b-9f74-af9841ebaf85/image.png)

2. 기본선택자

가장 기본이 되는 선택자, 다른 선택자는 기본 선택자를 조합하여 만듦

<script>
	$(function(){
		$("*").css("background-color", "yellow");
		$("p").css("background-color", "blue");
		$("div").css("background-color", "green");
		$("#test1").css("color", "white");
		$("#test2").css("color", "red");
		$(".test3").css("color", "orange");
	})
</script>

<body>
	<p id="test1">문자열 1</p>
	<p class="test3">문자열 2</p>
	<div id="test2">문자열 3</div>
	<div class="test3">문자열 4</div>
</body>

기본 선택자 조합
1) 선택자1, 선택자2: 동시에 여러 태그를 선택할 때 사용

<script>
	$(function(){
		// $("div").css("background-color", "yellow");
		// $("p").css("background-color", "yellow");
		
		$("div, p").css("background-color", "yellow");
		
		// $("#a1").css("color", "red");
		// $("#a2").css("color", "red");
		
		$("#a1, #a2").css("color", "red");
		
		// 같은 결과값을 줄때 나열해서 사용 가능하다
	});
</script>

<body>
	<div id="a1">div 1</div>
	<div>div 2</div>
	<p id="a2">p 1</p>
	<p>p 2</p>
</body>

2) 선택자1 > 선택자2: 태그의 바로 하위의 태그들을 선택할 때 사용
3) 선택자1 선택자2: 태그 내부의 모든 태그들을 선택할 때 사용

<script>
	$(function(){
		$("#a1 > h1").css("background-color", "yellow");
		// a1 > h1 => a1의 바로 아래 태그에 적용
	});
	$(function(){
		$("#a1 h1").css("background-color", "yellow");
		// a1 h1 => a1의 아래 모든 태그에 적용
	});
</script>

<body>
	<div id="a1">
		<h1>자식태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>

4) 선택자.선택자2: 모든 선택자를 만족하는 태그를 선택

<script>
	$(function(){
		$("div.a1").css("background-color", "yellow");
		$("div.a2").css("background-color", "red");
		$("p.a1").css("background-color", "purple");
		$("p.a2").css("background-color", "blue");
		// div.a1 => 해당되는 지정한 코드만 실행하고 싶을 때 사용
	});
</script>
</head>
<body>
	<div class="a1">div a1</div>
	<div class="a2">div a2</div>
	<p class="a1">p a1</p>
	<p class="a2">p a2</p>
</body>

5) 선택자1 + 선택자2: 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
6) 선택자1 ~ 선택자2: 선택자1 다음에 있는 모든 선택자2 태그를 선택

<script>
	$(function(){
		$("#a1 + p").css("background-color", "blue");
		// 선택자1 + 선택자2 => 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
		// 바로 다음에 오는 선택자를 올바르게 선택해야 적용이 된다
		
		$("#a1 ~ div").css("background-color", "yellow");
		// 선택자1 ~ 선택자2 => 선택자1 태그 바로 다음에 오는 선택자2태그 전부를 선택
		// 바로 다음에 오는 선택자2에 해당 하는 모두를 위치에 상관없이 적용해준다
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p id="a1">p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
</body>

3.순서필터 선택자

첫 번째 태그 선택
마지막 태그 선택

<script>
	$(function(){
		/* $("p:first").css("background-color", "yellow");
		 first:선택자에 해당하는 태그 중 가장 처음 태그
		$("p:first-child").css("color", "orange");
		first-child :선택자에 해당하는 태그 중 각 영역별 첫 번째 태그가 선택
		처음 태그가 선택자에 해당하지 않으면 선택되지 않음
		$("p:first-of-type").css("font-size", "30px");
		first-of-type:선택자에 해당하는 태그 중 각 영역별 처음 태그가 선택 */
		
		
		$("p:last").css("background-color", "yellow");
		// last:선택자에 해당하는 태그 중 마지막 태그
		$("p:last-child").css("color", "orange");
		/* last-child :선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택
		   마지막 태그가 선택자에 해당하지 않으면 선택되지 않음 */
		$("p:last-of-type").css("font-size", "30px");
		// last-of-type:선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택
	});
</script>
</head>
<body>
	<p>태그</p>
	<hr/>
	<div>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
	</div>
	<hr/>
	<div>
		<div>div 안의 div태그</div>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
		<div>div 안의 div태그</div>
	</div>
</body>

홀수 짝수 태그 선택

<script>
	$(function(){
		$("p:odd").css("background-color", "red");
		// odd : 인덱스 번호(0부터 시작)가 홀수인 태그 선택
		$("p:even").css("background-color", "blue");
		// even : 인덱스 번호(1부터 시작)가 짝수인 태그 선택
	});
</script>
</head>
<body>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<div>div 태그</div>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<p>태그</p>
	<div>div 태그</div>
	<p>태그</p>
	<p>태그</p>
</body>

Only 태그 선택

<script>
	$(function(){
		$("p:only-child").css("background-color", "red");
		// only-child:영역내에서 선택자에 해당하는 태그가 하나일 경우선택.다른 태그가 있으면 선택되지 않음
		$("p:only-of-type").css("color", "blue");
		// only-of-type:영역내에 선택자에 해당하는 태그가 하나일 경우 선택
	});
</script>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<div>div 태그</div>
	</div>
</body>

eq, nth 태그 선택

<script>
	$(function(){
		$("p:eq(3)").css("background-color", "yellow");
		// ep(인덱스): 인덱스(0부터 시작)번때 해당하는 태그를 선택
		$("p:nth-child(2)").css("color", "blue");
		/* nth-child(인덱스): 각 영역의 인덱스(1부터 시작)번째 해당하는태그를 선택
		   인덱스번째 태그가 선택자에 해당하지 않으면 선택되지 않음 */
		$("p:nth-of-type(2)").css("font-style", "italic");
		// nth-of-type(인덱스): 각 영역의 인덱스(1부터 시작)번째 해당하는 태그를 선택
	});
</script>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<div>div 태그</div>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
</body>

gt(), lt(), nth-last-child(), nth-last-of-type() 태그 선택

<script>
	$(function(){
		$("p:gt(0)").css("background-color", "yellow");
		// gt(인덱스): 선택자에 해당하는 태그 중 인덱스(0부터 시작)번째 태그 이후의 태그들이 선택
		$("p:lt(7)").css("color", "blue");
		// lt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번째 태그 이전의 태그들이 선택
		$("p:nth-last-child(1)").css("font-size", "30px");
		/* nth-last-child(인덱스) : 뒤에서 인덱스(1부터 시작)번째 태그가 선택
		   인덱스번째 태그가 선택자와 다르면 선택되지 않음 */
		$("p:nth-last-of-type(1)").css("font-style", "italic");
		// nth-last-of-type(인덱스) : 뒤에서 인덱스(1부터 시작)번째 태그가 선택
	});
</script>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
		<div>div 태그</div>
	</div>
</body>

not 태그 선택

<script>
	$(function(){
		$("p:not(.a1)").css("background-color", "yellow");
		// not : 선택자에 해당하지 않는 태그들이 선택
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<p class="a1">p 태그 a1 class</p>
	<p class="a2">p 태그 a2 class</p>
</body>

3.속성 선택자

속성, 속성값 태그 선택

<script>
	$(function(){
		$("p[title]").css("background-color", "yellow");
		// [속성]: 속성을 가지고 있는 태그를 선택
		$("p[title = 'aaa1']").css("color", "blue");
		// [속성 = 값]: 속성의 값이 지정된 값과 일치하는 태그를 선택
		$("p[title != 'aaa1']").css("color", "red");
		// [속성 != 값]: 속성의 값이 지정된 값과 일치하지 않는 태그를 선택
	});
</script>
</head>
<body>
	<p>속성이 없는 p태그</p>
	<p title="aaa1">title이 aaa1인 p 태그</p>
	<p title="aaa2">title이 aaa2인 p 태그</p>
</body>

속성값 태그 선택

<script>
	$(function(){
		$("p[title $= 'aaa3']").css("background-color", "blue");
		// [속성 $= 값] : 속성의 값이 지정된 값으로 끝나는 태그를 선택
		$("p[title |= 'aaa3']").css("color", "green");
		// [속성 |= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
		$("p[title ^= 'aaa3']").css("font-size", "30px");
		// [속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선택
		
		$("p[title ~= 'aa']").css("color", "purple");
		//
		$("p[title *= 'aa']").css("background-color", "yellow");
		//
	});
</script>
</head>
<body>
	<p title="aaa3">title이 aaa3인 p태그</p>
	<p title="aaa3-test">title이 aaa3-test인 p 태그</p>
	<p title="aaa3test">title이 aaa3test인 p 태그</p>
	
	<p title="aaa4">title이 aaa4인 p태그</p>
	<p title="aaa5-test">title이 aaa5-test인 p 태그</p>
	<p title="aa a6">title이 aa a6인 p 태그</p>
	<p title="aa">title이 aa인 p 태그</p>
</body>

속성값 태그 선택

<script>
	$(function(){
		$("p[title ~= 'aa']").css("color", "blue");
		// [속성 ~= 값]: 속성의 값이 지정된 값을 단어로 가지고 있는 태그를 선택
		$("p[title *= 'aa']").css("background-color", "yellow");
		// [속성 *= 값]: 속성의 값이 지정된 값을 포함하는 태그를 선택
	});
</script>
</head>
<body>
	<p title="aaa4">title이 aaa4인 p태그</p>
	<p title="aaa5-test">title이 aaa5-test인 p 태그</p>
	<p title="aa a6">title이 aa a6인 p 태그</p>
	<p title="aa">title이 aa인 p 태그</p>
</body>

4.상태 선택자

상태 선택자

<script>
	$(function(){
		$(":header").css("color", "red");
		// header: h1 ~ h6 태그를 선택
		$(":focus").css("background-color", "green");
		// focus: 현재 포커스가 주어진 태그를 선택
		$("div:contains('Hello')").css("font-size", "30px");
		// contains(‘문자열‘): 지정된 문자열이 포함되어 있는 태그를 선택, 해당 문자열 전체에 css 적용
		$("div:has('p')").css("font-style", "italic");
		// has(선택자): 지정된 선택자를 포함하고 태그를 선택
	});
</script>
</head>
<body>
	<p >p 태그</p>
	<h1>h1 태그</h1>
	<h3>h3 태그</h3>
	
	<input type="text" autofocus="autofocus"/><br/>
	<input type="text"/><br/>
	
	<div>Hello World</div>
	<div>Hello World</div>
	<div>Hi World</div>
	
	<div>
		<p>p 태그를 가지고 있는 div 태그</p>
	</div>
	<div>
		<div>div 태그를 가지고 있는 div 태그</div>
	</div>
</body>

2.학습한 내용 중 어려웠던 점

jQuery의 기본적인 태그들을 학습하면서 실습을 바로 해보니 훨씬 이해하기 숴웠고 알기 편했다. 이전에 했던 자바스크립트들을 공부하는 것보다 훨씬 알기 쉽고 사용하기 편한 것 같아서 확실히 강력한 도구들인것 같다.

3.해결방법

이해하기 쉽고 편한만큼 몇 번 반복해서 보는 것만으로 이해하기는 쉬울 것 같다. 다만 실제로 적용하는 부분은 어떻게 달라질지 모르기 때문에 실제 적용 예제들을 찾아보고 연습해보면 더 편하게 사용할 수 있을 것 같다.

4. 학습소감

이번주 교육들은 아주 상세히 설명해주시고 예제들을 들어주시는 덕분에 이해가 빠르고 편한것 같다. 7월부터 실습이 예정되어있는만큼 하고있는 것, 했던 것들을 최대한 정리할 수 있을 만큼 정리하고 파이썬을 필요로 생각되는 만큼 처음부터 다시 볼 수 있도록 해야할 것 같다.