jQuery 선택자 컨닝 페이퍼
늦깍이에 웹 개발의 험난한 파도 속에 허욱적 대고 있는 요즘.. jQuery에서 가장 많이 사용하는 선택자가 까마귀 고기로 보여 컨닝 페이퍼 만들어 봅니다.
전체 선택자
$('*').css('color', 'red');
Tag 선택자
$('h1').css('color', 'orange');
ID 선택자
$('#abc').css('color', 'orange');
여러 개의(OR 조건) 선택자
$('h1, p, #abc').css('color', 'orange');
class 선택자
$('.item').css('color', 'black');
AND 조건 선택자
$('.item.abc').css('color', 'black');
자식 선택자
$('div > p').css('color', 'black');
후손 선택자
$('div p').css('color', 'black');
속성 선택자
$('h1[tt').val('good'); // 속성을 가지는 것 선택
$('h1[tt=aa').val('good'); // 속성값 일치하는 것 선택
$('h1[tt~=aa').val('good'); // 속성값에 단어로써 포함하는 것 선택
$('h1[tt^=aa').val('good'); // 속성값의 시작에 일치하는 것 선택
$('h1[tt$=aa').val('good'); // 속성값의 끝에 일치하는 선택
$('h1[tt*=aa').val('good'); // 속성값에 포함하는 것 선택
input tag 중 특정 type 선택자
$(':button').val("BTN");
$('.a:button').attr("disabled", true);
input tag 중 특정 상태 선택자
$('.a:checked').val('good'); // checked된 input 요소
$('.a:disabled').val('good'); // 비활성화된 input 요소
$('.a:enabled').val('good'); // 활성화된 input 요소
$('.a:focus').val('good'); // 포커스 대상 input 요소
$('.a:input').val('good'); // input, textarea, button, select 요소
alert( $('.a > option:selected').val() ); // class 'a'를 가진 select 요소 자식 중 선택된 option 요소