02. jQuery의 위치 기반 선택자

$(document).ready(function(){
  $('tr:first').addClass('style1');        // 첫 번째 tr 선택
  $('tr:first-child').addClass('style1');  // 부모 기준 첫 번째 tr
  $('tr:last-child').addClass('style1');   // 부모 기준 마지막 tr
  $('tr:nth-child(2)').addClass('style1'); // 두 번째 tr 선택

  // $('td:eq(1)').css('backgroundColor', 'blue'); 
  // 특정 td 인덱스(0부터 시작) 선택

  $('tr:nth-child(2n)').addClass('style2');  // 짝수 번째 tr에 스타일 적용
});

 

• :first / :last-child → 첫 번째 / 마지막 요소
• :nth-child(n) → n번째 요소 선택
• :eq(index) → 0부터 시작하는 인덱스 기준으로 요소 선택
• :nth-child(2n) → 2의 배수(짝수 번째) 요소 선택

 

---

📌 이번 예제에 나온 jQuery 메서드 & 선택자 정리

 

1. .ready()

$(document).ready(function(){
   // 문서 로드가 완료되면 실행
});

 

• DOM이 준비된 후 실행할 코드를 지정
• 모든 jQuery 스크립트는 보통 이 안에서 실행

 

2. .addClass("클래스명")

$("선택자").addClass("style2");

 

 

• 선택된 요소에 CSS 클래스를 추가
• 여러 클래스를 동시에 추가 가능 ("class1 class2")

 

3. 선택자

• $('tr:nth-child(2n)')
  → 짝수 번째 <tr> 요소 선택
• nth-child(n)
  • 특정 번째 요소 선택
  • nth-child(2n) : 짝수 행
  • nth-child(2n+1) : 홀수 행
  • nth-child(3) : 세 번째 요소

---

✅ 정리

• .ready() : 문서 준비 완료 시 실행
• .addClass() : 요소에 CSS 클래스 추가
• :nth-child(n) : 구조적 선택자, n번째 자식 요소 선택

 

---

📌 addClass()의 역할

• CSS 속성을 직접 추가하는 것(X)
• 이미 정의된 CSS 클래스 이름을 요소에 붙이는 것(O)

즉, addClass()는 새로운 스타일을 “코드로 만들어주는” 게 아니라, 스타일시트에서 미리 정의해둔 클래스를 요소에 추가해서 적용하는 방식이에요.

 

📌 예시

CSS 정의

.redText {
  color: red;
  font-weight: bold;
}

 

 

jQuery 코드

$("p").addClass("redText");

 

• 기존 스타일은 그대로 두고, 새로운 클래스만 붙이는 방식
• 나중에 removeClass("redText")로 제거 가능
• toggleClass("redText")는 추가/제거를 번갈아 실행

---

📌 직접 CSS 속성 바꾸고 싶다면?

그럴 때는 css() 메서드를 사용해야 해요.

$("p").css("color", "blue");
$("p").css({ "color":"blue", "font-size":"20px" });

 

👉 css()는 특정 스타일 속성을 직접 적용.

 

✅ 정리

• addClass() → 미리 정의된 CSS 클래스를 추가할 때 사용
• css() → 특정 CSS 속성을 직접 지정할 때 사용