220621) jQuery(2)

김인경·2022년 6월 21일
선택자제이쿼리
0

학습한 내용

window.onload

실습 1-1 자바스크립트

<head>
<script>
	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML="on load <br/>";
	}
</script>
</head>
<body>
	<div id="result"></div>
</body>

실습1-2 제이쿼리

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function(){
		$("#result").append("ready <br/>");
	});
</script>
</head>
<body>
	<div id="result"></div>
</body>

실습 2-1 on load와 ready 함수의 차이-on load

on load3만 실행됨

<script>
	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML="on load1 <br/>";
	}

	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML="on load2 <br/>";
	}

	window.onload=function(){
		var result = document.getElementById("result");
		result.innerHTML="on load3 <br/>";
	}
	
</script>

실습 2-2 on load와 ready 함수의 차이-ready

전부 실행됨

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function(){
		$("#result").append("ready1 <br/>");
	});
	$(document).ready(function(){
		$("#result").append("ready2 <br/>");
	});
	$(document).ready(function(){
		$("#result").append("ready3 <br/>");
	});
</script>
  • 정리
    • jQuery 함수는 JavaScript 객체에 jQuery에서 정의한 멤버를 추가하여 반환하는 함수
    •jQuery(객체) 형태로 사용하지만 $(객체)로 사용할 수 있다
    • Ready는 window.onload와 다르게 모든 부분이 실행

jQuery 선택자

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

실습 3-1 선택자 익히기

-기본선택자-

<script>
	$(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")
	})
</script>
</head>
<body>	
	<p id="test1">문자열1</p>
	<p class="test3">문자열2</p>
	<div id="test2">문자열3</div>
	<div class="test3">문자열4</div>
</body>

실습 4-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>
</head>
<body>
	<div id="a1">div 1</div>
	<div>div2</div>
	<p id="a2">p 1</p>
	<p>p2</p>
</body>

실습 4-2 선택자 조합

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

<script>
	$(function(){
		// $("#a1 > h1").css("background-color", "yellow");
		$("#a1 h1").css("background-color", "yellow");
	})
</script>
</head>
<body>
	<div id="a1">
		<h1>자식 태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>
</body>

실습 4-3 선택자 조합

-선택자1.선택자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");
	})
</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>

실습 4-4 선택자 조합

-선택자1 + 선택자2: 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택-

<script>
	$(function(){
		$("#a1 + p").css("background-color", "yellow");
		// $("#a1 + div").css("background-color", "yellow");
	})
</script>
</head>
<body>
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
	<p id="a1">p태그</p>
	<!-- <div>div 태그</div> -->
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
</body>

실습 4-5 선택자 조합

-선택자1 ~ 선택자2: 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택-

<script>
	$(function(){
		$("#a1 ~ p").css("background-color", "yellow");
	})
</script>
</head>
<body>
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
	<p id="a1">p태그</p>
	<div>div 태그</div>
	<p>p태그</p>
	<p>p태그</p>
	<div>div 태그</div>
	<p>p태그</p>
	<p>p태그</p>
	<p>p태그</p>
	<div>div 태그</div>
	<p>p태그</p>
</body>

순서필터 선택자

• 선택자를 통해 선택된 태그 중에 태그의 상태에 따라 선택할 수 있는 선택자
• 순서, 태그의 현재 상태 등

실습 5-1 첫번째 태그, 마지막 태그 선택

<script>
	$(function(){
		// -첫 번째 태그 선택
		// $("p:first").css("background-color", "yellow");
		// $("p:first-child").css("color", "orange");
		// $("p:first-of-type").css("font-size", "30px");
		
		// -마지막 태그 선택
		$("p:last").css("background-color", "yellow");
		$("p:last-child").css("color", "orange");
		$("p:last-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태그</p>
		<p>div 안의 p태그</p>
		<p>div 안의 p태그</p>
	</div>
</body>

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

• :last: 선택자에 해당하는 태그 중 가장 마지막 태그가 선택
• :last-child : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택
마지막 태그가 선택자에 해당하지 않으면 선택되지 않음
• :last-of-type : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택

그 외 순서 필터 선택자

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

인덱스 번째 태그 선택

• :eq（인덱스）: 인덱스（0부터 시작）번때 해당하는 태그를 선택
• :nth-child（인덱스）: 각 영역의 인덱스（1 부터 시작）번째 해당하는 태그를 선택. 인덱스번째 태그가 선택자에 해당하지 않으면 선택되지 않음
• :nth-of-type（인덱스）: 각 영역의 인덱스（1부터 시작）번째 해당 하는 태그를 선택
•:gt（인덱스）: 선택자에 해당하는 태그 중 인덱스（0부터 시작）번째 태그 이후의 태그들이 선택
• dt（인덱스）: 선택자에 해당하는 태그 중 인덱스（0부터 시작）번째 태그 이전의 태그들이 선택
• :nth-last-child（인덱스）: 뒤에서 인덱스（1부터 시작）번째 태그가 선택. 인덱스번째 태그가 선택자와 다르면 선택되지 않음
• :nth-last-of-type（인덱스） : 뒤에서 인덱스（1부터 시작）번째 태그가 선택
• :not: 선택자에 해당하지 않는 태그들이 선택
• 인텍스 필터 선택자를 이용해 태그를 선택할 수 있다.

ex)

<script>
	$(function(){
		$("p:only-child").css("background-color", "yellow");
		$("p:only-of-type").css("color", "orange");
	})
</script>


<script>
	$(function(){
		$("p:eq(3)").css("background-color", "yellow");
		$("p:nth-child(1)").css("color", "orange");
		$("p:nth-of-type(1)").css("font-style", "italic");
	})
</script>

속성 선택자

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

ex)

<script>
	$(function(){
		// $("p[title]").css("background-color", "yellow");
		// $("p[title='aaa1']").css("color", "orange");
		// $("p[title != 'aaa1']").css("color", "red");

		$("p[title $='aaa3']").css("background-color", "blue");
		$("p[title |='aaa3']").css("color", "green");
		$("p[title ^='aaa3']").css("font-size", "30px");
	})
</script>

상태 선택자

• 태그의 상태에 따라 선택하는 선택자
• :header: hi 〜 h6 태그를 선택
• :focus : 현재 포커스가 주어진 태그를 선택
• :contains^문자열'） : 지정된 문자열이 포함되어 있는 태그를 선택
• :has（선택자） : 지정된 선택자를 포함하고 태그를 선택

<script>
	$(function(){
		$(":header") .css("color" , "red"); 
		$(":focus") .css("background-color", "green");
		$("div:contains('Hello')") .css("font-size", "30px");
		$("div:has(p)") .css("font-style", "italic");
	});
</script>

학습소감

오늘은 시작할때 이클립스 자동완성 기능이 된다는 파일을 다운받고 시작했는데, 새파일을 엄청 많이 만들면서했다. 선택자를 종류별로 다 적어보면서 어떤 효과가 나오는지 확인해봤다. 구조가 비슷해서 그런지 오타나 별다른 문제는 없었다.

profile
김인경
Today I Learned
이전 포스트

220620) jQuery(1)

다음 포스트

220622) jQuery(3)

0개의 댓글