[Jquery] Selector

Selector(선택자)

직접 선택자

직접 선택자는 전체, 아이디, 클래스, 태그, 그룹 총 5가지 선택자로 구성됩니다. 전체 선택자는 DOM의 모든 태그를 한번에 선택합니다. 기호는 $("*") 이고 달러와 all(*) 표시만 기억하면 쉽게 쓸 수 있죠.

아이디 선택자는 해당 아이디명인 태그를 고르고, $("#아이디명") 으로 사용합니다.

클래스 선택자는 클래스를 고르고 $(".클래스명") 이렇게 씁니다.

그룹 선택자는 여러 선택자를 묶어서 고를 수 있고, $("선택자1, 선택자2, ...") 이렇게 사용합니다. 선택자 n에는 아이디, 클래스, 태그 선택자 등 다양하게 입력이 가능해서 유용합니다.

종류	코드
전체 선택자	$("*")
아이디 선택자	$("#아이디")
클래스 선택자	$(".클래스명")
태그 선택자	$("태그명")
그룹 선택자	$("선택자1, 선택자2, ...")

 

관계 선택자

관계란 무엇일까요? 주로 가족 관계를 생각해보면 쉽습니다. 부모, 자식, 자손, 형제 정도만 생각합시다.

부모 요소를 선택하려면, 선택자.parent() 사용합니다.

$("기준 선택자")는 기준이 되는 태그가 있고, 그것의 모든 하위 태그 중에 특정한 선택자에 해당하는 태그를 모두 고를 수 있습니다.

자식은 선택자.children(), $("기준 > 선택자") 를 사용해서, 기준이 되는 모든 태그의 바로 아래 하위 태그 중 입력한 선택자에 해당하는 모든 태그를 고릅니다.

선택자.prev()는 선택자의 형제 중 바로 앞 태그를 선택하고, 선택자.next()는 형제 중 바로 뒤 태그를 선택합니다. 마지막으로 선택자.siblings()는 모든 형제 태그를 한번에 고릅니다.

 

부모 선택자	선택자.parent()
기준 선택자	$("기준선택자")
자식 선택자	선택자.children() 혹은 $("기준 > 선택자")
이전 형제 선택자	선택자.prev()
이후 형제 선택자	선택자.next()
형제 선택자	선택자.siblings()

 

탐색 선택자

선택자.first() 혹은 $("선택자:first")는 선택된 태그들 중에 첫번째 태그를 고릅니다.

반대로 마지막 태그는 선택자.last() 혹은 $("선택자:last")를 사용합니다.

여기에 인덱스를 지정해서 해당하는 태그를 고를 때는 eq(equal) 키워드를 사용해서 선택자.eq(index) 혹은 $("선택자:eq(index)")를 씁니다.

처음	선택자.first() 혹은 $("선택자:first")
마지막	선택자.last() 혹은 $("선택자:last")
지정 인덱스	선택자.eq(index) 혹은 $("선택자:eq(index)")

 

속성 탐색 선택자

$("선택자[속성]")은 해당 속성을 가지고 있는 태그를 선택합니다.

$("선택자[속성=속성값]")은 해당 속성의 값이 우측 속성값과 동일한 태그를 선택합니다.

$(":selected")는 드롭다운 메뉴에서 목록 중 selected된 태그를 고릅니다.

$(":checked")는 checkbox, radio 메뉴 중에서 선택된 태그만 고르는 선택자입니다.

지정 속성	$("선택자[속성]")
지정 속성값	$("선택자[속성=속성값]")
드롭다운 태그	$(".selected")
체크박스/라디오 태그	$(".checked")

 

선택자와 함께 사용하면 편리한 메소드

선택자.is(상태(:checked, :selected, ...)) 이것은 선택된 태그의 상태값을 확인하는 메소드입니다. true, false로 반환합니다.

선택자.each(콜백함수) 혹은 $.each("선택자", 콜백함수)는 선택자가 여러 개의 태그를 선택할 때, 하나씩 순회하면서 콜백함수를 실행합니다. 이거 자세히 보면, Java의 스트림과 비슷한 느낌이 들죠?! 

선택된 태그의 상태값 확인	is(상태(:checked, selected, ...))
순회 콜백함수 실행	선택자.each(콜백함수) 혹은 $.each("선택자", 콜백함수)