JQuery 편집하기 (부분)

== 셀렉터 ==

jQuery의 '''셀렉터'''는 [[CSS]] 셀렉터 문법을 기반으로 하며, 추가적인 '''고유 셀렉터'''들도 제공한다.

=== 기본 셀렉터 ===

<syntaxhighlight lang="javascript">
// 전체 셀렉터
$('*')              // 모든 요소 선택

// 태그 셀렉터
$('div')            // 모든 div 요소
$('p')              // 모든 p 요소
$('h1, h2, h3')     // 여러 태그 동시 선택

// ID 셀렉터
$('#myId')          // id="myId"인 요소

// 클래스 셀렉터
$('.myClass')       // class="myClass"인 모든 요소
$('.class1.class2') // 두 클래스를 모두 가진 요소

// 속성 셀렉터
$('[name]')         // name 속성을 가진 요소
$('[name="email"]') // name="email"인 요소
$('[href^="http"]') // href가 "http"로 시작하는 요소
$('[src$=".jpg"]')  // src가 ".jpg"로 끝나는 요소
$('[title*="test"]') // title에 "test"가 포함된 요소
</syntaxhighlight>

=== 계층 셀렉터 ===

<syntaxhighlight lang="javascript">
// 후손 셀렉터
$('div p')          // div 내부의 모든 p 요소

// 자식 셀렉터
$('div > p')        // div의 직접 자식인 p 요소만

// 인접 형제 셀렉터
$('h1 + p')         // h1 바로 다음의 p 요소

// 일반 형제 셀렉터
$('h1 ~ p')         // h1 이후의 모든 형제 p 요소
</syntaxhighlight>

=== jQuery 고유 셀렉터 ===

<syntaxhighlight lang="javascript">
// 순서 기반 셀렉터
$('li:first')       // 첫 번째 li 요소
$('li:last')        // 마지막 li 요소
$('li:eq(2)')       // 인덱스 2번째 li 요소 (0부터 시작)
$('li:lt(3)')       // 인덱스 3보다 작은 li 요소들
$('li:gt(1)')       // 인덱스 1보다 큰 li 요소들
$('li:odd')         // 홀수 번째 li 요소들 (1, 3, 5...)
$('li:even')        // 짝수 번째 li 요소들 (0, 2, 4...)

// 내용 기반 셀렉터
$(':contains("Hello")')    // "Hello" 텍스트를 포함한 요소
$(':empty')               // 내용이 비어있는 요소
$(':parent')              // 자식 요소나 텍스트를 가진 요소

// 가시성 기반 셀렉터
$(':visible')             // 보이는 요소들
$(':hidden')              // 숨겨진 요소들

// 폼 관련 셀렉터
$(':input')               // 모든 input, textarea, select, button 요소
$(':text')                // type="text"인 input 요소
$(':password')            // type="password"인 input 요소
$(':radio')               // type="radio"인 input 요소
$(':checkbox')            // type="checkbox"인 input 요소
$(':submit')              // type="submit"인 input 요소
$(':file')                // type="file"인 input 요소
$(':enabled')             // 활성화된 폼 요소
$(':disabled')            // 비활성화된 폼 요소
$(':checked')             // 체크된 radio나 checkbox
$(':selected')            // 선택된 option 요소
</syntaxhighlight>

=== 필터링 메소드 ===

<syntaxhighlight lang="javascript">
$('li').filter('.important')    // li 중에서 .important 클래스를 가진 것만
$('li').not('.ignore')         // li 중에서 .ignore 클래스를 가지지 않은 것만
$('li').has('span')            // li 중에서 span 자식 요소를 가진 것만
$('li').eq(2)                  // li 중에서 인덱스 2번째 요소만
$('li').first()                // li 중에서 첫 번째 요소
$('li').last()                 // li 중에서 마지막 요소
$('li').slice(1, 4)            // li 중에서 인덱스 1부터 3까지의 요소들
</syntaxhighlight>