[jQuery] 래퍼(wrapper)와 셀렉터(Selector)

jQuery( element object | 'css stye selector' ) = $ ( element object | 'css stye selector' )

래퍼( wrapper )란, jQuery 또는 $로 시작되는 함수이고,

인자로 전달된 요소들에 제이쿼리의 기능성을 부가해서 반환한다는 의미이다.

 

 

셀렉터 종류

종류	표현	Ex
All	$('*')	$('*')
ID 선택자	$('#id')	$('#data')
Class 선택자	$('.className')	$('.data')
Element ( tag )	$('elementName')	$('p')
다중 선택자	$('tag, tag1, tag2')	$('span, th, td')
속성	$('[속성이름]')	$('[value]')                                                 // value라는 속성을 가진 태그             $("select[name=keyword]")                               // name 속성의 값이 keyword인 select 태그
자식 선택자	$('#id > elementName')	$('#zero > p')
후손 선택자	$('#id  elementName')	$('#zero  p')
형제자매 선택자	$('#id +  elementName') $('#id ~ elementName')	$('#zero + div') $('#zero ~ p')
가짜 선택자	$(':선택자')	예시 하단에 따로 첨부

 

자식 선택자는 해당태그 바로 아래의 태그만 가리키며,

후손 선택자는 해당 태그 아래에 포함된 모든 태그를 말한다. ( jQuery에서는 띄어쓰기 한 칸으로 후손태그임을 나타냄 )

형제자매 선택자에서 +는 다음 하나만 선택, ~는 일치하는 모든 것 선택.

 

가짜선택자 예시

$(':input'), $(':button'), $(':image'), $(':checkbox'), $(':radio'), $(':text')                                                                 // 각각 모든 인풋, 버튼, 이미지, 체크박스, 라디오, 텍스트인풋 태그를 선택합니다.

$(':odd'), $(':even'), $(':gt(순서)'), $(':lt(순서)'), $(':first'), $(':last')                                                                         // 각각 홀수 번째, 짝수 번째 태그, 주어진 순서보다 순서가 큰 태그, 순서가 작은 태그, 선택된 것들 중에 첫번째태그,마지막 태그를 선택합니다.

$(':focus'), $(':parent'), $(':empty');, $(':disabled'), $(':enabled'), $(':visible'), $(':hidden');                                             // 각각 현재 포커스된 태그, 자식이 하나라도 있는 태그, 자식이 없는 태그, 비활성화된 태그, 활성화된 태그, 투명이 아닌, 숨겨진 태그를 선택합니다.

$(':checked'), $(':selected'), $(':only-child');, $(':first-child'), $(':last-child')                                                              // 각각 체크된(체크박스), 선택된(select), 부모의 유일한 자식인 태그, 첫 번째 자식인 태그, 마지막 자식인 태그를 선택합니다.

$(':nth-child(순서)'), $(':nth-of-type(순서)'), $(':eq(순서)');                                                                                // 각각 순서 번째 자식 태그, 해당 타입 중 순서 번째 자식 태그, 순서 번째 태그를 찾습니다. eq는 0부터 시작하고, nth-child는 1부터 시작합니다.

$(':has(선택자)'), $(':contains(텍스트)');                                                                                                       // 각각 선택자를 자식으로 갖고 있는 태그나 해당 텍스트를 갖고 있는 태그를 선택합니다.