[jQuery] DOM 요소 탐색 - 요소선택자

- HTML page 의 모든 문서객체 탐색

<script 
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(function() {
			$("*").css("border", "1px solid blue");
		});
	});
</script>

 

- 특정 element 선택

<script 
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(function() {
			$("h1").css("color", "orange");
		});
	});
</script>

 

- 특정 id 선택

<script 
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(function() {
			$("h1#target").css("color", "orange");
		});
	});
</script>

h1 요소 중 target 이란 아이디 찾기

 

 

- 특정 class 찾기

<script 
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(function() {
			$(".item").css("color", "orange");
			$(".item.select").css("color", "magenta");
		});
	});
</script>

.item.select -> 복합선택자! item 과 select 둘 다 갖고있는 요소 찾음

 

 

- 다중 탐색

<script 
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(function() {
			$("h1, p").css("color", "orange");
		});
	});
</script>