JQuery 선택자

kh0520·2022년 6월 21일

1)학습내용

Jquery 선택자

jQuery에서 가장중요한 함수
자바스크립트는 생성된 객체 맴버를 추가하는것이 자유로운데 이것을 이용해 만든 라이브러리가 jquery
jquery 함수는 객체형태로 작성하지만 jquery 대신에 $로 작성가능

기본선택자




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
</html>

결과

기본선택자 조합

선택자 > 선택자2 : 태그의 바로 하위태그들을 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		 $("#a1 > h1").css("background-color","yellow");
	
	})
</script>
</head>
<body>
	<div id="a1">
		<h1>자식 태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>
</body>
</html>

결과

선택자 선택자2 : 태그내부의 모든태그들을 선택할때

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		
		$("#a1 h1").css("background-color","yellow");
	})
</script>
</head>
<body>
	<div id="a1">
		<h1>자식 태그 h1</h1>
		<div>
			<h1>자손 태그 h1</h1>
		</div>
	</div>
</body>
</html>

결과

두개다 태그가 되었다

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
</html>

결과

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		$("#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>
	<div>div 태그 2</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그 3</div>
	<p>p 태그</p>
</body>
</html>

결과

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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","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 태그 2</div>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<p>p 태그</p>
	<div>div 태그 3</div>
	<p>p 태그</p>
</body>
</html>