1. 태그(Tag)로 요소 선택

특정 태그명을 가진 모든 요소를 선택합니다.

$("p") // 모든 <p> 요소를 선택
$("div") // 모든 <div> 요소를 선택
$("span") // 모든 <span> 요소를 선택

2. 클래스(Class)로 요소 선택

특정 클래스를 가진 모든 요소를 선택합니다.

$(".myClass") // class="myClass" 를 가진 모든 요소 선택
$(".box") // class="box" 를 가진 모든 요소 선택
$(".highlight") // class="highlight" 를 가진 모든 요소 선택

3. ID로 요소 선택

특정 ID를 가진 단 하나의 요소를 선택합니다.

$("#myElement") // id="myElement" 인 요소 선택
$("#header") // id="header" 인 요소 선택
$("#footer") // id="footer" 인 요소 선택

4. 속성(Attribute)으로 요소 선택

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

$("[name='firstName']") // name="firstName" 을 가진 요소 선택
$("[type='checkbox']") // type="checkbox" 인 요소 선택
$("[href='https://example.com']") // 특정 링크를 가진 <a> 요소 선택

특정 속성을 포함하는 요소를 선택하는 방법:

$("[name^='user']") // name이 'user'로 시작하는 요소 선택
$("[name$='Name']") // name이 'Name'으로 끝나는 요소 선택
$("[name*='middle']") // name에 'middle'이 포함된 요소 선택

5. 하위 요소(Descendant) 선택

특정 요소의 하위 요소를 선택합니다.

$("#parentElement .childElement") // id="parentElement" 내부의 class="childElement" 요소 선택
$("div p") // <div> 내부의 모든 <p> 요소 선택
$("ul li") // <ul> 내부의 모든 <li> 요소 선택

6. 직접 자식(Child) 요소 선택

특정 부모의 직속 자식만 선택합니다.

$("#parentElement > .childElement") // id="parentElement"의 직속 자식 중 class="childElement" 요소 선택
$("div > p") // <div> 내부의 직속 <p> 요소만 선택
$("ul > li") // <ul> 내부의 직속 <li> 요소 선택

7. 그룹의 특정 위치 요소 선택

첫 번째 요소 선택

$("ul li:first") // 각 <ul> 내부의 첫 번째 <li> 요소 선택
$("p:first") // 모든 <p> 요소 중 첫 번째 요소 선택

마지막 요소 선택

$("ul li:last") // 각 <ul> 내부의 마지막 <li> 요소 선택
$("p:last") // 모든 <p> 요소 중 마지막 요소 선택

특정 인덱스 요소 선택

$("ul li:eq(2)") // 각 <ul> 내부의 세 번째 <li> 요소 선택 (0부터 시작)
$("div:eq(0)") // 첫 번째 <div> 요소 선택

특정 범위의 요소 선택

$("ul li:lt(3)") // 각 <ul> 내부에서 첫 번째~세 번째(<3) <li> 요소 선택
$("ul li:gt(3)") // 각 <ul> 내부에서 네 번째(>3) 이후 <li> 요소 선택

8. 짝수/홀수 요소 선택

$("ul li:even") // 각 <ul> 내부의 짝수 인덱스(0, 2, 4...) <li> 요소 선택
$("ul li:odd") // 각 <ul> 내부의 홀수 인덱스(1, 3, 5...) <li> 요소 선택

9. 특정 상태를 가진 요소 선택

$(":checked") // 체크된 체크박스, 라디오 버튼 선택
$(":disabled") // 비활성화된(disabled) 요소 선택
$(":enabled") // 활성화된(enabled) 요소 선택
$(":focus") // 현재 포커스된 요소 선택

10. 숨겨진 요소와 표시된 요소 선택

$(":hidden") // display: none 이거나 visibility: hidden 인 요소 선택
$(":visible") // 화면에 보이는 요소 선택

이 게시물에 포함된 라이브러리