[개발일지 34일차] jQuery 선택자

MSJ·2022년 6월 21일

JavaScript jquery web 개발일지

WEB

목록 보기

34/41

2022-06-21

`jQuery` 함수

jQuery에서 가장 중요한 함수다.

JavaScript 는 생성된 객체 멤버를 추가하는 것이 자유롭다.
(이것을 이용해 만들어진 것이 jQuery 라이브러리)

즉, jQuery 함수란 JavaScript 객체에 jQuery에서 정의한 멤버를 추가하여 반환시켜주는 함수인 것.

jQuery 함수는 jQuery(객체) 형태로 작성하지만 이 6글자 대신 $(객체)로 작성할 수도 있다.

`.onload VS Ready` 함수

Ready 함수는 javaScript 의 window.onload 와 흡사한 기능을 한다.
window.onload 는 태그 객체가 모두 생성되면 발생되는 이벤트로, 웹 화면이 처음 나타날 때 필요한 작업이 있을 때 보통 여기서 구현한다.
Ready 함수도 onload 방식과 동일한 시점에서 동작하는데.

차이점이라면 window.onload는 여러 개의 함수가 있을 경우 제일 마지막 것만 동작한다. 앞에서 실행되었던 함수가 모두 덮어씌워졌기 때문.

반면에 Ready 선언된 모든 실행문이 서로 덮는 것 없이 각각 동작한다.

`.onload`

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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/>";
	}
</script>
</body>
</html>

실행 시

Ready 함수

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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/>");
	}
			);
</script>
</body>
</html>

실행 시

`jQuery` 선택자

jQuery 는 선택자를 얼마나 잘 쓰느냐가 중요하다고 했다.
선택자의 종류도 아주 많은 것인데...

기본 선택자
기본 선택자의 조합
순서 필터 선택자
인덱스 필터 선택자
속성 선택자
상태 선택자
Form 태그 선택자

`1) Basic Selector` 기본 선택자

*, p, #id, .class 등의 기본 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p id="test1">문자열1</p>
	<p class="test3">문자열2</p>
	<div id="test2">문자열3</div>
	<div class="test3">문자열4</div>
	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("*").css("background-color", "darkcyan");
		$("p").css("background-color", "cyan");  //태그 지정자
		$("div").css("background-color", "#ccc");
		$("#test1").css("color", "blue");
		$("#test2").css("color", "red");
		$(".test3").css("color", "yellow");
	})	
	
</script>
</body>
</html>

`2)` 기본 선택자의 조합

선택자1, 선택자2
: 선택자 나열, 동시에 여러 태그를 선택

선택자1 > 선택자2
: 선택자1의 하위 태그 선택자2를 선택

선택자1 선택자2
: 선택자 사이 공백, 태그 내부의 모든 태그들을 선택

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

선택자1 + 선택자2
: 지정한 선택자1 태그 바로 다음에 있는 선택자2 태그 선택

선택자1 ~ 선택자2
: 지정한 선택자1 태그 다음의 모든 선택자2 태그들 선택

`선택자1, 선택자2`

동시에 효과를 적용하고 싶다면, 선택자를 나열해서 쓰면 된다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div  id="a1">div 1</div>
	<div>div 2</div>
	<p id="a2"> p 1</p>
	<p>p 2</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		//$("div").css("background-color", "darkcyan");
		//$("p").css("background-color", "cyan");
		
		$("div, p").css("background-color","yellow"); //동시에 효과를 적용하고 싶다면, 선택자를 나열해서 쓰면 된다
		
		//$("#a1").css("color", "red");
		//$("#a2").css("color", "red");
		
		$("#a1, #a2").css("color", "red");
	});
</script>
</body>
</html>

`선택자1 > 선택자2` , `선택자1 선택자2`

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="a1">
		<h1> 자식 태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		// $("#a1 > h1").css("background-color","darkcyan"); // 태그의 바로 아래(하위)의 선택자를 지정할 때 > 를 쓴다
		$("#a1 h1").css("background-color","darkcyan"); // 태그 내부의 모든 태그를 선택
		
	});
</script>
</body>
</html>

선택자1 > 선택자2

선택자1 선택자2

`선택자1.선택자2`

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="a1">div a1</div>
	<div class="a2">div a2</div>
	<p class="a1">p al1</p>
	<p class="a2">p al2</p>
	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("div.a1").css("background-color", "darkcyan");
		$("div.a2").css("background-color", "cyan");
		$("p.a1").css("background-color", "purple");
		$("p.a2").css("background-color", "blue"); // p태그에서 .a2란 클래스에 효과
		$(".a1, .a2").css("color", "yellow");
	});
</script>
</body>
</html>

`선택자1 + 선택자2` , `선택자1 ~ 선택자2`

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p id="a1">p 태그</p>
	<div>div 태그1</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그2</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그3</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	
	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		//선택자 #a1 다음에 있는 p태그 (4번째 선택된 p태그 다음의 5번째 p태그에 효과들어감)
		//html의 바로 다음 태그와 선택자의 다음 태그 지정이 다를 경우 적용이 안됨
		
		$("#a1 + p").css("background-color", "darkcyan"); 
		//$("#a1 + div").css("background-color", "darkcyan");
		//$("#a1 ~ p").css("background-color", "darkcyan"); // ~은 #a1의 하위에 있는 두 번째 선택자의 모든 선택자들 지정
		//$("#a1 ~ div").css("background-color", "darkcyan");
	});
</script>
</body>
</html>

선택자1 + 선택자2

선택자 #a1 다음에 있는 p태그
: 4번째 선택된 p태그 다음의 5번째 p태그에 효과가 들어간다

실제 html에 위치하는 다음 태그와 선택자의 다음 태그 경로 지정이 다를 경우 적용이 안됨
아래는 $("#a1 + p").css("background-color", "darkcyan"); 였을 때,

올바른 경로를 지정해줄 경우 적용 됨. $("#a1 + div").css("background-color", "darkcyan"); 였을 때.

선택자1 ~ 선택자2

선택자1(#a1) 아래의 모든 p 태그 혹은 div 태그를 지정

`3)` 순서 필터 선택자

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>p 태그</p>
	<hr/>
	<div>
		<p>div안의 p태그</p>
		<p>div안의 p태그</p>
		<p>div안의 p태그</p>
	</div>
	<hr/>
	<div>
		<p>div안의 p태그</p>
		<p>div안의 p태그</p>
		<div>div안의 div태그</div>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/*
	$(function(){
		$("p:first").css("background-color", "darkcyan");
		$("p:first-child").css("color", "orange");
		$("p:first-of-type").css("font-size", "30px");
	});
	
*/

	$(function(){
		$("p:last").css("background-color", "darkcyan");
		$("p:last-child").css("color", "orange");
		$("p:last-of-type").css("font-size", "30px");
	});
</script>
</body>
</html>

1. 첫 번째 태그 선택
:first : 해당 선택자 태그 중 가장 처음 태그 (영역X)
:first-child : 영역별 해당 선택자 태그 중 최초의 순서인 태그 선택.
->최초의 태그가 지정한 선택자가 아닐 경우 그 영역은 선택 적용 안됨
:first-of-type : 영역별 해당 선택자에 부합하는 첫 번째 태그 선택.
->영역의 최초의 태그가 해당 선택자가 아니더라도 부합하는 선택자를 찾아 다음 태그로 넘어가는 식

2. 마지막 태그 선택
:first와 반대되는 개념
:last : 해당 선택자 태그 중 가장 마지막 태그 (영역X)
:last-child : 영역별 해당 선택자 태그 중 마지막 순서인 태그 선택.
->마지막 태그가 지정한 선택자가 아닐 경우 그 영역은 선택 적용 안됨
:last-of-type : 영역별 해당 선택자에 부합하는 마지막 태그 선택.
->영역의 최종 태그가 해당 선택자가 아니더라도 부합하는 선택자를 찾아 거꾸로 다음 태그로 넘어가는 식

`4)`이 외의 순서 필터 선택자

`:odd`, `:even`

:odd : 홀수 번째
:even : 짝수 번째

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("p:odd").css("background-color","darkcyan");
		$("p:even").css("background-color","yellow");
	});
</script>
</body>
</html>

`:only-child` , `:only-of-type`

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		<p>p 태그</p>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
	</div>
	<hr/>
	<div>
		<p>p 태그</p>
		<!-- <p>p 태그</p> -->
		<div>div 태그</div>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("p:only-child").css("background-color", "darkcyan"); // 영역에 태그가 하나만 있는 곳의 p태그 가져옴
		$("p:only-of-type").css("color", "orange"); // 영역에 여러 태그가 있어도 p태그가 하나만 있을 경우 가져옴
	});
</script>
</body>
</html>

:only-child : 영역에 태그가 하나만 있는 곳의 선택자 태그 가져옴
:only-of-type : 영역에 여러 태그가 있어도 선택자 태그가 하나만 있을 경우 가져옴 (여러 개 있으면 해당X)

`5)` [인덱스] 번째 태그 선택

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</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>
	<hr/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("p:eq(2)").css("background-color", "darkcyan");
		$("p:nth-child(3)").css("color", "orange"); //length처럼 계산(1부터 시작)
		$("p:nth-of-type(3)").css("font-style", "italic");

	});
</script>
</body>
</html>

:ep(인덱스) : 인덱스(0부터 시작) 순서에 해당하는 태그 선택

초록 배경

:nth-child(인덱스) : 각 영역의 인덱스(1부터 시작) 순서에 해당하는 태그 선택. 인덱스 번째 태그가 선택자에 해당하지 않으면 선택되지 않음

마지막 div 태그 폰트 색상 오렌지 적용X

:nth-of-type(인덱스) : 각 영역의 인덱스(1부터 시작) 순서에 해당하는 태그 선택

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</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>
	<hr/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("p:gt(1)").css("background-color", "darkcyan");
		$("p:lt(7)").css("color", "orange");
		$("p:nth-last-child(1)").css("font-size", "30px");
		$("p:nth-last-of-type(1)").css("font-style", "italic");
	});
</script>
</body>
</html>

:gt(인덱스) : 해당 선택자 태그 중 인덱스(0부터) 번째 태그 이후의 태그들이 선택
:lt(인덱스) : 해당 선택자 태그 중 인덱스(0부터) 번째 태그 이전의 태그들이 선택
:nth-last-child(인덱스) : 뒤에서 인덱스(1부터) 번째 태그가 선택. 인덱스 번째 태그가 선택자와 다를 시 선택 안됨
:nth-last-of-type(인덱스) : 뒤에서 인덱스(1부터) 번째 태그가 선택

`6)` `:not` 선택자

<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<p>p 태그</p>
	<p class="a1">p 태그 a1 class</p>
	<p class="a2">p 태그 a2 class</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("p:not(.a1)").css("background-color", "darkcyan");
	});
</script>
</body>
</html>

:not : 선택자에 해당하지 않는 태그들 선택

`7)` 속성 선택자

[속성 ~= 값]
태그에 설정된 속성으로 선택하는 선택자

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
	<p>속성이 없는 p 태그</p>
	<p title="aaa1"> title이 aaa1인 p태그</p>
	<p title="aaa2"> title이 aaa2인 p태그</p>
	 
	<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"> title이 aaa5인 p태그</p>
	<p title="aa a6"> title이 aa a6인 p태그</p>
	<p title="aa"> title이 aa인 p태그</p>
	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		//$("p[title]").css("background-color", "darkcyan");
		//$("p[title = 'aaa1']").css("color", "orange");
		//$("p[title != 'aaa1']").css("color", "blue");
		
		//$("p[title $= 'aaa3']").css("background-color", "red");
		//$("p[title |= 'aaa3']").css("color", "orange");
		//$("p[title ^= 'aaa3']").css("font-size", "30px");
		
		$("p[title ~= 'aa']").css("color", "orange");
		$("p[title *= 'aa']").css("font-size", "30px");
		
	});
</script>
</body>
</html>

[속성] : 속성을 가지고 있는 태그 선택
[속성 = 값] : 속성의 값이 지정된 값과 일치하는 태그 선택
[속성 != 값] : 속성의 값이 지정된 값과 일치하지 않는 태그 선택

[속성 $= 값] : 속성의 값이 지정된 값으로 끝나는 태그 선택
[속성 |= 값] : 속성의 값이 지정된 값과 일치하거나 지정된 속성으로 시작 후 '하이픈 -'으로 연결된 태그까지 선택
[속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선택

p[속성 ~= aa] : 속성의 값이 지정된 값을 단어로 가지고 있는 태그를 선택
p[속성 *= aa] : 속성의 값이 지정된 값을 포함하는 태그를 선택 (aa는 aaa에 포함이 되므로 font-size 30px 적용)

`8)` 상태 선택자

태그의 상태에 따라 선택하는 선택자

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</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>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
</body>
</html>

:header : h1 ~ h6 태그 선택

:focus : 현재 포커스가 주어진 태그를 선택

:contains('문자열') : 지정된 문자열이 포함되어있는 태그 선택

:has(선택자) : 지정된 선택자를 포함하는 태그를 선택

어려운 점

많은 선택자들이... 있었다는 점?

해결 방법

선택자들 태그 중에 세부 조건이 비슷하면서도 달라서 헷갈리는 부분이 있었는데 실제로 태그를 써보니 이해가 된다. :first-child 와 :first-of-type 같은 것들.

소감

훨씬 간결해서 편리해보이긴 하는데 선택자들을 잘 구분해야겠다는 생각.

MSJ

제로부터 시작하는 프로그래밍&코딩

이전 포스트

[개발일지 33일차] jQuery 개발 환경 구축하기, + 간단한 테스트

다음 포스트

[개발일지 34일차] jQuery 선택자

WEB

`jQuery` 함수

`.onload VS Ready` 함수

`.onload`

Ready 함수

`jQuery` 선택자

`1) Basic Selector` 기본 선택자

`2)` 기본 선택자의 조합

`선택자1, 선택자2`

`선택자1 > 선택자2` , `선택자1 선택자2`

`선택자1.선택자2`

`선택자1 + 선택자2` , `선택자1 ~ 선택자2`

`3)` 순서 필터 선택자

`4)`이 외의 순서 필터 선택자

`:odd`, `:even`

`:only-child` , `:only-of-type`

`5)` [인덱스] 번째 태그 선택

`6)` `:not` 선택자

`7)` 속성 선택자

`8)` 상태 선택자

어려운 점

해결 방법

소감

[개발일지 33일차] jQuery 개발 환경 구축하기, + 간단한 테스트

[개발일지 35일차] Form 선택자, DOM

0개의 댓글

[개발일지 34일차] jQuery 선택자

WEB

jQuery 함수

.onload VS Ready 함수

.onload

Ready 함수

jQuery 선택자

1) Basic Selector 기본 선택자

2) 기본 선택자의 조합

선택자1, 선택자2

선택자1 > 선택자2 , 선택자1 선택자2

선택자1.선택자2

선택자1 + 선택자2 , 선택자1 ~ 선택자2

3) 순서 필터 선택자

4)이 외의 순서 필터 선택자

:odd, :even

:only-child , :only-of-type

5) [인덱스] 번째 태그 선택

6) :not 선택자

7) 속성 선택자

8) 상태 선택자

어려운 점

해결 방법

소감

[개발일지 33일차] jQuery 개발 환경 구축하기, + 간단한 테스트

[개발일지 35일차] Form 선택자, DOM

0개의 댓글

`jQuery` 함수

`.onload VS Ready` 함수

`.onload`

`jQuery` 선택자

`1) Basic Selector` 기본 선택자

`2)` 기본 선택자의 조합

`선택자1, 선택자2`

`선택자1 > 선택자2` , `선택자1 선택자2`

`선택자1.선택자2`

`선택자1 + 선택자2` , `선택자1 ~ 선택자2`

`3)` 순서 필터 선택자

`4)`이 외의 순서 필터 선택자

`:odd`, `:even`

`:only-child` , `:only-of-type`

`5)` [인덱스] 번째 태그 선택

`6)` `:not` 선택자

`7)` 속성 선택자

`8)` 상태 선택자