jQuery - Element 선택하기 updated_at: 2023-03-24 06:34

기본 셀렉터

$('태그명') : HTML 문서에서 해당 태그를 모두 선택 $('#id') : HTML 문서에서 해당 id가 지정된 element 선택 $('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택

$('p')
$('input[name=gender]:radio')
$("input[name=엘리먼트이름]")...
$("input[@name=rList]")
$( "input[name='lesson']")
$(".class)..
$("#id)..

순서 기반 셀렉터

기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.

$('선택자:even')

선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.

$('선택자:odd')

선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.

$('선택자:eq(인덱스)')

선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.

$('선택자:first') , $('선택자:last')

선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다

$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')

선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다

관계 기반 셀렉터

부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.

$('선택자').children()

선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.

$('선택자').parent()

선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.

$('선택자').next() , $('선택자').nextAll()

선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.

$('선택자').prev() , $('선택자').prevAll()

선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.

이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다

조건 기반 셀렉터

$('선택자').filter('조건선택자')

앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.

$('선택자').find('조건선택자')

앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.