웹 개발 공부 : Front-end/JQuery

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

Developer KTU 2021. 9. 4. 02:09
반응형

JQuery에서 중요한 개념인 선택자에 대해서 공부한 내용을 정리한다! 기본적인 선택자부터 시작한다!

기본적으로 JQUERY에서 선택자는 '$' 기호를 사용한다.

1.   *

'*'는 Oracle DB Query문에서도 마찬가지로 전체를 의미한다. 따라서 모든 요소를 선택한다는 의미다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	$("*").css("border", "1px solid blue");
});
</script>
</head>
<body>
	<h1>제이쿼리</h1>
	<h2>선택자</h2>
	<h3>직접 선택자</h3>
</body>
</html>

body의 <h1>, <h2>, <h3> 태그에 대해 즉, 모든 요소에 대해 border style이 적용된다. (아 물론 body 요소도 적용된다!)

결과

 

2.   #

#은 css 선택자에서도 마찬가지로 (css 선택자와 닮은점이 좀 있는 것 같다) id값을 가지는 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	// id값을 "tit"로 가지는 요소를 선택한다.
	$("#tit").css("background-color", "yellow");
});
</script>
</head>
<body>
	<h1>제이쿼리</h1>
	<h2 id="tit">선택자</h2>
	<h3>직접 선택자</h3>
</body>
</html>

id값으로 "tit"을 가지는 요소가 선택되고 css 스타일이 적용된다. 결과는?

id값으로 "tit"을 가지는 h2요소의 배경색이 노란색으로 적용된 것을 확인할 수 있다. 

 

3.   '.'

# id값을 의미했다면? css 선택자를 공부한 사람이라면 아마 예상이 갈 것이다. '.'은 바로 클래스를 의미한다. 클래스값을 가지는 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	// 클래스 이름을 "tit"로 가지는 요소를 선택한다.
	$(".tit").css("background-color", "aqua");
});
</script>
</head>
<body>
	<h1>제이쿼리</h1>
	<h2 class="tit">선택자</h2>
	<h3>직접 선택자</h3>
</body>
</html>

클래스 이름으로 "tit"을 가지는 요소가 선택된다. 마찬가지로 결과는?

클래스 "tit"을 가지는 요소 <h2>의 배경색이 'aqua'로 변경된 것을 확인할 수 있다.

 

4.  요소 직접 명시

말 그대로 선택하고 싶은 요소를 직접 명시하여 선택하는 방법이다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("h2").css("background-color", "aqua")
		.css("border", "2px dashed red");
	});
</script>
</head>
<body>
	<h1>제이쿼리</h1>
	<h2>선택자</h2>
	<h3>직접 선택자</h3>
</body>
</html>

선택하고 싶은 요소 h2를 직접 명시하여 선택했다. 결과는?

직접 명시하여 선택한 <h2> 요소에 배경색과 border 스타일이 적용된 것을 확인할 수 있다.

 

5.  여러 요소 선택하는  ','

여러개의 요소를 동시에 선택하고 싶을 때 사용하는 방법이다. 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	$("h1, #tit3").css("background-color", "aqua")
	.css("border", "2px dashed black");
});
</script>
</head>
<body>
	<h1>제이쿼리</h1>
	<h2>선택자</h2>
	<h3 id="tit3">직접 선택자</h3>
	<h3>인접 선택자</h3>
</body>
</html>

<h1>요소와 id값을 "tit3"으로 가지는 요소를 동시에 선택했다. 결과는??

<h1>태그와 <h3 id = "tit3"> 요소에 스타일이 잘 적용된 것을 확인할 수 있다.

 

다음 포스트에 계속 이어진다. 아 그리고 function을 쓰는 이유, 함수는 여러 지역변수들을 정의하고 메소드를 정의할 수 있다. 그런 이유에서 여러 요소들을 선택할 수 있으며, 스타일 또는 속성을 정의하는 것이 가능하고, 한번 함수를 실행하면 동시에 동작을 수행할 수 있기 때문에 function으로 정의한다.  그리고 $(function(){ ... }) 하는 이유는 function을 ()로 감싸면 함수를 따로 호출하지 않아도 함수를 정의함과 동시에 바로 실행할 수 있기 때문에 쓰는 것이다. (확실하게 장담은 못하겠다... 이 설명에 대해서 피드백이 있다면 언제든 환영합니다. 필자도 공부를 하는 학생의 입장이기에...ㅎㅎ)

 

 

다음 게시물에 계속...

반응형