JQuery 익히기 - 스타일, 애니메이션

MINJOO·2022년 6월 21일
0

AttributeSelector

<!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(){
		$("p[title]").css("background-color", "yellow");
		// [속성]: 속성을 가지고 있는 태그를 선택
		$("p[title = 'aaa1']").css("color", "blue");
		// [속성 = 값]: 속성의 값이 지정된 값과 일치하는 태그를 선택
		$("p[title != 'aaa1']").css("color", "red");
		// [속성 != 값]: 속성의 값이 지정된 값과 일치하지 않는 태그를 선택
	});
</script>
</head>
<body>
	<p>속성이 없는 p태그</p>
	<p title="aaa1">title이 aaa1인 p 태그</p>
	<p title="aaa2">title이 aaa2인 p 태그</p>
</body>
</html>
Insert title here

속성이 없는 p태그

title이 aaa1인 p 태그

title이 aaa2인 p 태그

<!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(){
		$("p[title $= 'aaa3']").css("background-color", "blue");
		// [속성 $= 값] : 속성의 값이 지정된 값으로 끝나는 태그를 선택
		$("p[title |= 'aaa3']").css("color", "green");
		// [속성 |= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
		$("p[title ^= 'aaa3']").css("font-size", "30px");
		// [속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선택
		
		$("p[title ~= 'aa']").css("color", "purple");
		//
		$("p[title *= 'aa']").css("background-color", "yellow");
		//
	});
</script>
</head>
<body>
	<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-test">title이 aaa5-test인 p 태그</p>
	<p title="aa a6">title이 aa a6인 p 태그</p>
	<p title="aa">title이 aa인 p 태그</p>
</body>
</html>
Insert title here

title이 aaa3인 p태그

title이 aaa3-test인 p 태그

title이 aaa3test인 p 태그

title이 aaa4인 p태그

title이 aaa5-test인 p 태그

title이 aa a6인 p 태그

title이 aa인 p 태그

``` Insert title here

title이 aaa4인 p태그

title이 aaa5-test인 p 태그

title이 aa a6인 p 태그

title이 aa인 p 태그

``` Insert title here

title이 aaa4인 p태그

title이 aaa5-test인 p 태그

title이 aa a6인 p 태그

title이 aa인 p 태그

IndexSelector

<!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(){
		$("#a1 + p").css("background-color", "blue");
		// 선택자1 + 선택자2 => 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
		// 바로 다음에 오는 선택자를 올바르게 선택해야 적용이 된다
		
		$("#a1 ~ div").css("background-color", "yellow");
		// 선택자1 ~ 선택자2 => 선택자1 태그 바로 다음에 오는 선택자2태그 전부를 선택
		// 바로 다음에 오는 선택자2에 해당 하는 모두를 위치에 상관없이 적용해준다
	});
</script>
</head>
<body>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p id="a1">p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그</div>
	<p>p 태그</p>
</body>
</html>
Insert title here

p 태그

p 태그

p 태그

p 태그

p 태그

div 태그

p 태그

p 태그

div 태그

p 태그

## Onload ``` Insert title here
``` Insert title here

느낀점

늘 Visual Studio Code만 사용하다 Eclipse를 사용하니 새롭다. 한눈에 창을 여러개 상태를 확인할수 있어 좋다.

profile
코딩 신생아

0개의 댓글