[수업 6월 4주 2일차] JQuery-2

김유민·2022년 6월 21일

대구 A.I. 스쿨

목록 보기

47/90

1. 학습 내용

오늘도 어제에 이어 JQuery에 대해 배워보았다.

window.onload = function(){
		let result = document.getElementById("result");
		result.innerHTML = "on load 1<br/>";
	}
	
	window.onload = function(){
		let result = document.getElementById("result");
		result.innerHTML = "on load 2<br/>";
	}
	
	window.onload = function(){
		let result = document.getElementById("result");
		result.innerHTML = "on load 3<br/>";
	}

onload와 ready와의 차이점은 onload는 덮어 씌워지고, ready는 작성한 만큼 나온다.

	$(document).ready(function(){
		$("#result").append("ready 1<br>");
	});
	
	$(document).ready(function(){
		$("#result").append("ready 2<br>");
	});
	
	$(document).ready(function(){
		$("#result").append("ready 3<br>");
	});

자바스크립트에 비해 html에 있는 태그들을 선택할때 길게 적어 줄 필요가 없다.

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

원래라면 document.querySeletor를 주고 아이디명이나 클래스 명을 줘야 하지만, 제이쿼리는 단순히, $()안에 쓰면 된다.
jQuery 함수는 JavaScript 객체에 jQuery에서 정의한 멤버를 추가하여 반환하는 함수라서 그렇다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
</head>
<body>
	<div id="a1">div 1</div>
	<div>div 2</div>
	<p id="a2">p 1</p>
	<p>p 2</p>
</body>
</html>

만약 같은 스타일을 다른 태그에 다 주고 싶다면, 저렇게 태그를 ""안에 같이 줄 수도 있다.

또한 CSS 처럼 각 자손이나 후손의 태그를 지정할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("p:first").css("background-color", "yellow");
		$("p:first-child").css("color", "orange");
		$("p:first-of-type").css("font-size" , "30px");
	})
</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>
</body>
</html>

기본 선택자

• 가장 기본이 되는 선택자, 다른 선택자는 기본 선택자를 조합하여 만
듬
• 전체 선택자(*) : HTML 문서 내의 모든 태그를 선택
• 태그이름 선택자(태그이름) : 지정한 태그이름에 해당하는 태그 객체
를 가져 온다
• 아이디 선택자(#아이디) : id 속성을 통해 태그 객체를 가져온다
• 클래스 선택자(.클래스) : class 속성을 통해 태그 객체를 가져온다

기본 선택자 조합

• 선택자1, 선택자2 : 동시에 여러 태그를 선택할 때 사용
• 선택자1 > 선택자2 : 태그의 바로 하위의 태그들을 선택할 때 사용
• 선택자1 선택자2 : 태그 내부의 모든 태그들을 선택할 때 사용
• 선택자1.선택자2 : 모든 선택자를 만족하는 태그를 선택
• 선택자1 + 선택자2 : 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
• 선택자1 ~ 선택자2 : 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택

첫 번째 태그 선택

• :first : 선택자에 해당하는 태그 중 가장 처음 태그
• :first-child : 선택자에 해당하는 태그 중 각 영역별 첫 번째 태그
가 선택. 처음 태그가 선택자에 해당하지 않으면 선택되지 않음
• :first-of-type : 선택자에 해당하는 태그 중 각 영역별 처음 태그
가 선택

나머지 마지막은 저기서 'first'를 'last'로 바꾸면 된다.

그 외 순서 필터 선택자

• :odd : 인덱스 번호(0부터 시작)가 홀수인 태그 선택
• :even : 인덱스 번호(0부터 시작)가 짝수인 태그 선택
• :only-child : 영역내에서 선택자에 해당하는 태그가 하나일 경우
선택. 다른 태그가 있으면 선택되지 않음
• :only-of-type : 영역내에 선택자에 해당하는 태그가 하나일 경
우 선택

속성 선택자

• 태그에 설정되어 있는 속성을 통해 선택하는 선택자
• [속성] : 속성을 가지고 있는 태그를 선택
• [속성 = 값] : 속성의 값이 지정된 값과 일치하는 태그를 선택
• [속성 != 값] : 속성의 값이 지정된 값과 일치하지 않는 태그를
선택
• [속성 $= 값] : 속성의 값이 지정된 값으로 끝나는 태그를 선택
• [속성 |= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정
된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
• [속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선
택
• [속성 ~= 값] : 속성의 값이 지정된 값을 단어로 가지고 있는 태
그를 선택
• [속성 *= 값] : 속성의 값이 지정된 값을 포함하는 태그를 선택

상태 선택자

• 태그의 상태에 따라 선택하는 선택자
• :header : h1 ~ h6 태그를 선택
• :focus : 현재 포커스가 주어진 태그를 선택
• :contains(‘문자열‘) : 지정된 문자열이 포함되어 있는 태그를 선
택
• :has(선택자) : 지정된 선택자를 포함하고 태그를 선택