웹 개발 공부 : Front-end/JQuery

[JQuery] Chapter 1-1 선택자(2)

Developer KTU 2021. 9. 8. 19:52
반응형

지난 선택자 첫 번째 포스팅에 이어 두번째 포스팅입니다!

6. 같은 클래스 이름을 가진 요소 구별하여 선택하기

말이 좀 긴데, 먼저 코드를 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	// 같은 클래스 이름을 가진 h1, h3 요소 중 h1 요소 선택
	$("h1.tit").css("background-color", "aqua")
	.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
	<h1 class="tit">제이쿼리</h1>
	<h2>선택자</h2>
	<h3 class="tit">직접 선택자</h3>
</body>
</html>

코드를 보면 "tit"이라는 같은 이름의 클래스를 가진 요소 <h1>과 <h3> 요소가 있습니다.

$(".tit").css(...)

이런식으로 사용한다면, <h1>과 <h3> 두 요소 모두 css 스타일이 적용됩니다. <h1>요소와 <h3> 요소를 구별하기 위해선 

$("h1.tit").css(...)

이런식으로 명시해준다면 같은 클래스이름을 가진 요소를 구별할 수 있습니다. 결과를 보면?

<h1> 요소에만 css 스타일이 적용된 것을 확인할 수 있습니다.

 

7.  parent()

parent() 메소드는 선택한 요소의 직계부모 요소를 선택하는 메소드입니다. 간단히 예를 들자면,

<section class="main_section">
	<div class="div1">
    		<p class="p1">Hello JS!</p>
    	</div>
	<div class="div2">
  	  	<p class="p2">Hello JQuery!</p>
    	</div>
</section>

위 간략한 HTML 코드에서 class p2의 parent()는 바로 위의 부모인 class div2가 됩니다.

<!DOCTYPE html>
<html lang="ko">
<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>   // #list_1의 parent() (직계부모요소)
				<li id="list_1">리스트1-1</li>
				<li>리스트1-2</li>
			</ul>
		</li>
		<li>리스트2</li>
		<li>리스트3</li>
	</ul>
</body>
</html>

<결과>

id list_1의 바로 위 요소인 <ul> 에 스타일이 적용된 것을 확인할 수 있습니다.

직계 부모요소를 선택하는 것이 parent()라면, 상위 요소들을 모두 선택하는 것은 parents() 메소드입니다.

 

8. 하위 요소들을 선택하는 ' ' (공백)

자기 자신에 속한 하위요소 (자식 요소들)들을 선택하는 것이 바로 ' ' (공백) 선택자입니다. 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
    		// 참고!
		$("#wrap h1").css("background-color", "yellow")
		.css("border", "2px dashed #f00");
	});
</script>
</head>
<body>
	<div id="wrap">
		<h1>인접 관계 선택자</h1>
		<p>내용1</p>
		<section>
			<h1>하위 요소 선택자</h1>
			<p>내용2</p>
		</section>
	</div>
</body>
</html>

#wrap의 하위요소 중 <h1>요소를 모두 고른다는 뜻입니다.

#wrap의 하위요소 <h1> 요소'들'이 선택되고 스타일이 적용됐습니다.

 

9. 하위요소들을 선택하는 children()

선택자에서 '>'는 직계 자식요소를 선택하는 키워드였습니다. children() 메소드는 선택한 요소의 하위요소'들'을 선택하는 메소드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#wrap > h1").css("border", "2px dashed #f00");

		$("#wrap > section").children()
		.css("background-color", "yellow")
		.css("border", "2px solid #f00");
	});
</script>
</head>
<body>
	<div id="wrap">
		<h1>인접 관계 선택자</h1>
		<p>내용1</p>
		<section>
			<h1>
				자식 요소 선택자
				<p>자식 요소 선택자 2</p>
			</h1>
			<p>내용2</p>
		</section>
	</div>
</body>
</html>

$안의 선택자로 '>'를 사용하여 #wrap의 직계 자식요소인 <section>요소를 선택한 후, children() 메소드를 사용하여 하위 요소들을 모두 선택했습니다.

<결과>

 

10. next(), prev(), "+"

next()메소드는 선택한 요소의 다음 요소를 선택하고, prev() 메소드는 선택 요소의 이전 요소를 선택합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		var style_1 = {
			"background-color":"aqua",
			"border":"2px solid red"
		}
		var style_2 = {
			"background-color":"yellow",
			"border":"2px dashed red"
		}

		$(".txt").prev()
		.css(style_1);

		$(".txt + p").css(style_2);

		$(".txt").next().next()
		.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>
</html>
$(".txt").prev()
	.css(style_1);

클래스 "txt"를 가진 요소의 이전 요소를 선택합니다. 그렇다면 선택된 요소는?

<p>내용1</p>

이 요소가 선택됩니다. 그 다음 코드는 어떤 요소가 선택될까요?

$(".txt + p").css(style_1);

이 코드는 클래스 "txt"를 가진 요소의 다음 <p>요소를 선택합니다. 그렇다면

<p>내용3</p>

이 요소가 선택됩니다. "+" 선택자도 마찬가지로 다음 요소를 선택하는 메소드입니다.

$(".txt").next().next()
	.css(style_2);

이 코드는 어떤 요소가 선택될까? next()가 두번 실행됐으니 class "txt"요소의 다음 다음 요소가 선택됩니다.

<p>내용4</p>

<결과>

 

다음 포스트에 이어집니다!

반응형