[jQuery] 제이쿼리 선택자(Selector)

jQuery 선택자는 CSS 선택자와 비슷하게 사용할 수 있으며, HTML 요소를 쉽게 조작하는 데 유용하다. 다양한 선택자를 활용하여 원하는 요소를 빠르게 찾고, 효과적으로 조작할 수 있다.

 

jQuery에서는 $() 기호를 사용하여 HTML 요소를 선택할 수 있다. CSS 선택자와 유사한 방식으로 동작하며, 다양한 방법으로 요소를 찾을 수 있다.

✔ 기본 선택자
✔ 계층 선택자
✔ 속성 선택자
✔ 필러 선택자
✔ 폼 선택자

 

 

---

 

 

기본 선택자

jQuery의 기본 선택자는 HTML 요소를 쉽게 찾을 수 있도록 도와주는 가장 기본적인 선택자이다. CSS 선택자와 유사한 방식으로 사용된다. 기본 선택자에는 태그 선택자, ID 선택자, 클래스 선택자가 있다.

 

태그 선택자

$('div')  // 모든 `<div>` 요소 선택
$('p')    // 모든 `<p>` 요소 선택
$('h1')   // 모든 `<h1>` 요소 선택

 

ID 선택자

$('#myId')  // ID가 'myId'인 요소 선택

 

클래스 선택자

$('.myClass')  // 클래스가 'myClass'인 요소 선택

 

 

---

 

 

계층 선택자

jQuery 계층 선택자는 HTML 요소 간의 부모-자식 관계 또는 형제 관계를 기준으로 특정 요소를 선택할 때 사용된다.

 

하위(자손) 선택자 (공백)

$('div p')  // `<div>` 내부의 모든 `<p>` 요소 선택

 

자식 선택자 (>)

$('div > p')  // `<div>`의 바로 아래 자식 `<p>` 요소만 선택

 

형제 선택자
인접 형제 (+): 바로 다음 형제 요소 선택

$('h1 + p')  // `<h1>` 다음에 나오는 첫 번째 `<p>` 요소 선택

 

일반 형제 (~): 특정 요소 뒤에 있는 모든 형제 요소 선택

$('h1 ~ p')  // `<h1>` 뒤에 있는 모든 `<p>` 요소 선택

---

 

 

속성 선택자

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

$('input[type="text"]')  // type이 'text'인 `<input>` 요소 선택
$('a[href]')  // `href` 속성이 있는 `<a>` 태그 선택

 

 

속성 값이 특정 값과 일치하는 요소

$('input[name="username"]')  // name이 'username'인 `<input>` 요소 선택

 

 

속성 값이 특정 값으로 시작 (^=)

$('a[href^="https"]')  // `href` 속성이 'https'로 시작하는 `<a>` 태그 선택

속성 값이 특정 값으로 끝남 ($=)

$('img[src$=".png"]')  // `.png`로 끝나는 `src`를 가진 `<img>` 선택

속성 값이 특정 문자열을 포함 (*=)

$('div[class*="box"]')  // `class` 속성에 'box'가 포함된 `<div>` 선택

 

 

---

 

 

필터 선택자

첫 번째 요소 (:first)

$('p:first')  // 첫 번째 `<p>` 요소 선택

마지막 요소 (:last)

$('p:last')  // 마지막 `<p>` 요소 선택

N번째 요소 (:eq(n))

$('li:eq(2)')  // 3번째 `<li>` 요소 선택 (0부터 시작)

N번째 이후 요소 (:gt(n))

$('li:gt(1)')  // 2번째 이후의 모든 `<li>` 요소 선택

N번째 이전 요소 (:lt(n))

$('li:lt(3)')  // 3번째 이전의 모든 `<li>` 요소 선택

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

$('tr:odd')  // 홀수 번째 `<tr>` 선택 (0부터 시작 → 1,3,5...)
$('tr:even') // 짝수 번째 `<tr>` 선택 (0부터 시작 → 0,2,4...)

특정 요소 포함 여부 (:contains(text))

$('p:contains("Hello")')  // "Hello"를 포함한 `<p>` 요소 선택

비어 있는 요소 (:empty)

$('div:empty')  // 내용이 없는 `<div>` 요소 선택

부모 요소가 있는 요소 (:parent)

$('div:parent')  // 자식 요소가 있는 `<div>` 선택

 

 

---

 

폼 선택자

특정 폼 요소 선택

$(':text')       // `<input type="text">` 선택
$(':password')   // `<input type="password">` 선택
$(':checkbox')   // `<input type="checkbox">` 선택
$(':radio')      // `<input type="radio">` 선택
$(':submit')     // `<input type="submit">` 선택
$(':reset')      // `<input type="reset">` 선택
$(':button')     // `<input type="button">`, `<button>` 선택
$(':file')       // `<input type="file">` 선택
$(':image')      // `<input type="image">` 선택

선택된 폼 요소

$(':checked')  // 체크된 체크박스나 라디오 버튼 선택
$(':selected') // 선택된 `<option>` 요소 선택
$(':disabled') // 비활성화된 폼 요소 선택
$(':enabled')  // 활성화된 폼 요소 선택