[jQuery] 선택자와 DOM 조작

1. 선택자(Selector)란?

선택자는 웹 페이지에서 특정 요소를 선택하는 도구이다. 웹 페이지는 다양한 요소(<div>, <p>, <button> 등)로 이루어져 있으며, 선택자를 사용하면 원하는 요소를 쉽게 선택하고 조작할 수 있다.

• CSS 선택자를 확장하여 사용 가능
• HTML 요소(태그명, 클래스, 아이디) 기반 선택 가능
• DOM(Document Object Model) 조작 가능

• jQuery의 선택자는 CSS 선택자와 유사하며, 더 강력한 기능을 제공한다.

---

2. DOM(Document Object Model)이란?

DOM(문서 객체 모델)은 웹 페이지의 HTML을 객체로 표현한 트리 구조이다.
브라우저는 HTML 문서를 읽은 후 DOM 트리를 생성하여 웹 페이지를 표시한다.

특징

• HTML 태그를 객체 형태로 표현 (예: <p>, <div> -> p 객체, div 객체)
• 트리 구조로 부모-자식 관계를 형성
• JavaScript 및 jQuery를 사용하여 동적으로 요소 변경 가능

✅ DOM을 사용하면 특정 요소를 선택하고 조작할 수 있음
✅ 클릭 이벤트, 스타일 변경, 요소 추가/삭제 등을 쉽게 구현 가능

---

3. jQuery 선택자 기본 문법

jQuery에서 요소를 선택하는 기본적인 방법은 다음과 같다.

$(선택자) // 선택자에 해당하는 HTML 요소를 선택

예제 코드

$(document).ready(function() {
  	$("p").css("color", "blue"); // 모든 <p> 태그의 글자색을 파란색으로 변경
});

설명

• $("p") -> 모든 <p> 요소를 선택
• .css("color", "blue") -> 선택한 요소의 텍스트 색상을 파란색으로 변경

✅ 선택자를 사용하면 요소의 스타일 변경, 속성 변경, 이벤트 추가 등이 가능함

---

4. jQuery 주요 선택자 정리

4.1 기본 선택자

선택자	설명	예제
$("태그명")	해당 태그의 모든 요소를 선택	$("p") -> 모든 <p> 태그 선택
$(".클래스명")	해당 클래스를 가진 요소 선택	$(".container") -> class="container" 요소 선택
$("#아이디명")	해당 아이디를 가진 요소 선택	$("#header") -> id="header" 요소 선택

예제 JSP 코드

<script>
	$(document).ready(function() {
    	$("h1").css("color", "red"); // h1 태그의 글자색을 빨간색으로 변경
        $(".box").css("background-color", "yellow"); // class="box" 요소 배경색 변경
        $("#content").css("border", "2px solid black"); // id="content" 요소에 테두리 추가
    });
</script>

4.2 계층 선택자

선택자	설명	예제
$("부모 > 자식")	부모 요소의 직계 자식 선택	$("div > p") -> <div> 안의 <p> 선택
$("형제 + 다음")	특정 요소 바로 다음 형제 선택	$("h1 + p") → <h1> 다음 <p> 선택
$("형제 ~ 이후")	특정 요소 다음의 모든 형제 선택	$("h1 ~ p") → <h1> 다음의 모든 <p> 선택

예제 JSP 코드

<script>
    $(document).ready(function() {
        $("div > p").css("color", "blue");  // div의 직계 p 태그 파란색
        $("h2 + p").css("font-weight", "bold");  // h2 바로 다음 p 태그 글자 굵게
        $("h2 ~ p").css("background-color", "lightgray");  // h2 이후 모든 p 태그 배경 회색
    });
</script>

4.3 속성 선택자

선택자	설명	예제
$("[속성]")	특정 속성을 가진 요소 선택	$("[disabled]") -> disabled 속성 가진 요소
$("[속성='값']")	특정 속성과 값을 가진 요소 선택	$("[type='text']") -> type="text" 요소
$("[속성^='값']")	특정 값으로 시작하는 속성 선택	$("[href^='https']") -> href="htts..."요소

예제 JSP 코드

<script>
	$(document).ready(function() {
    	$("[type='text']").css("border", "2px solid red"); // 모든 텍스트 입력 필드에 빨간 테두리
        $("[href^='https']").css("color", "green"); // https로 시작하는 링크 초록색
     });
</script>

4.4 상태 선택자

선택자	설명	예제
:checked	체크된 체크박스 선택	$(":checked")
:disabled	비활성화된 요소 선택	$(":disabled")
:enabled	활성화된 요소 선택	$(":enabled")
:focus	포커스가 있는 요소 선택	$("focus")

예제 JSP 코드

<script>
	$(document).ready(function() {
    	$("input:checked").css("outline", "2px solid red"); // 체크된 박스 테두리 빨간색
        $("input:disabled").css("background-color", "gray"); // 비활성화된 입력 필드 배경 회색
</script>

---