제이쿼리 선택자 정리 (Selector)

728x90

목 차

• 1. 전체 선택자 (*)
• 2. 태그 선택자
• 3. 아이디 선택자 (#id)
• 4. 클래스 선택자 (.class)
• 5. 속성 선택자
• 6. 그룹 선택자
• 7. 후손 선택자
• 8. 자식 선택자 (>)
• 9. 형제 선택자 (+, ~)
• 10. Pseudo-class 선택자

 

1. 전체 선택자 (*)

• 설명: 문서의 모든 요소를 선택합니다.

$("*").css("color", "red"); // 모든 요소의 텍스트를 빨간색으로 변경

 

2. 태그 선택자

• 설명: 특정 태그 이름을 기준으로 요소를 선택합니다.

$("p").hide(); // 모든 <p> 태그를 숨김

 

3. 아이디 선택자 (#id)

• 설명: 특정 id 값을 가진 요소를 선택합니다.

$("#header").text("Hello!"); // id가 'header'인 요소의 텍스트를 변경

 

4. 클래스 선택자 (.class)

• 설명: 특정 클래스 값을 가진 요소를 선택합니다.

$(".highlight").css("background-color", "yellow"); // 클래스가 'highlight'인 요소의 배경색 변경

 

5. 속성 선택자

• 설명: 특정 속성을 가진 요소를 선택합니다.

※ 특정 속성을 가진 요소 선택

$("[href]").css("color", "blue"); // href 속성을 가진 모든 요소를 선택

 

※ 특정 값의 속성을 가진 요소 선택

$("[type='text']").val("입력 필드"); // type이 'text'인 요소의 값을 변경

 

※ 부분 일치 선택자

// 시작하는 값: ^=
$("[src^='https']").css("border", "1px solid green"); // src 속성이 https로 시작하는 요소 선택

// 끝나는 값: $=
$("[src$='.jpg']").hide(); // src 속성이 .jpg로 끝나는 요소 숨김

// 포함하는 값: *=
$("[title*='important']").css("font-weight", "bold"); // title 속성에 'important'가 포함된 요소

 

6. 그룹 선택자

• 설명: 여러 선택자를 쉼표(,)로 연결하여 한 번에 여러 요소를 선택합니다.

$("h1, h2, h3").css("font-family", "Arial"); // h1, h2, h3 태그의 폰트 변경

 

7. 후손 선택자

• 설명: 특정 요소의 모든 자식 요소를 선택합니다.

$("div p").css("color", "green"); // div 안에 있는 모든 p 태그를 선택

 

8. 자식 선택자 (>)

• 설명: 특정 요소의 직계 자식 요소를 선택합니다.

$("ul > li").css("list-style", "none"); // ul의 직계 자식인 li 태그 선택

 

9. 형제 선택자 (+, ~)

• 설명: 특정 요소의 형제 요소를 선택합니다.

※ 인접 형제 선택자 (+)

$("h1 + p").css("font-size", "18px"); // h1 바로 뒤의 p 태그를 선택

 

※ 일반 형제 선택자 (~)

$("h1 ~ p").css("color", "blue"); // h1 이후 모든 p 형제 요소를 선택

 

10. Pseudo-class 선택자

• 설명: 특정 상태의 요소를 선택합니다.

※ 첫 번째 자식 선택자 (:first-child)

$("li:first-child").css("font-weight", "bold"); // 첫 번째 <li> 요소 선택

 

※ 마지막 자식 선택자 (:last-child)

$("li:last-child").css("color", "red"); // 마지막 <li> 요소 선택

 

※ 홀수/짝수 요소 선택 (:odd, :even)

$("tr:odd").css("background-color", "#f2f2f2"); // 홀수 행 선택
$("tr:even").css("background-color", "#ffffff"); // 짝수 행 선택

 

※ 포커스된 요소 (:focus)

$(":focus").css("border", "2px solid blue"); // 포커스된 요소 선택