HTML 요소를 선택하여 조작하기 위해 사용하는 jQuery 선택자(Selector)의 활용법을 정리했다.
CSS 선택자 문법을 기반으로 jQuery 고유의 필터링 기능을 제공한다.
선택 기술 분석
기본 선택부터 상태 필터링까지 다양한 선택자 활용이 가능하다.
// 1. 기본 선택: ID, 클래스, 속성 접근
$('#main-title').text('jQuery Study');
$('.item-list li').css('color', 'blue');
$('input[type="password"]').attr('placeholder', '비밀번호 입력');
// 2. 필터 선택자: 요소 선별 기능
$('li:first').addClass('active'); // 첫 번째 요소 선택
$('li:even').css('background', '#eee'); // 짝수 번째 요소 선택
$('p:contains("중요")').show(); // 특정 텍스트 포함 요소 선택
// 3. 폼 상태 선택자: 입력 상태 파악
$(':checked').parent().addClass('selected');
$(':disabled').val('현재 사용 불가');
체이닝(Chaining) 구조
jQuery 선택자는 조작 메서드와 연쇄적으로 연결되는 체이닝 기법을 지원한다.
$(...).css(...).attr(...).fadeIn()과 같이 선택과 조작을 통합하여 코드 가독성을 높인다.
정확한 요소 선택의 중요성
DOM 구조 내에서 필요한 요소를 정확히 추출하는 것은 프론트엔드 개발의 기초이다.
CSS 선택자 지식과 jQuery 필터를 조합하여 복잡한 UI를 제어할 수 있다.
정확한 선택자 설계는 코드의 정갈함을 유지하는 기반이 되는 것 같다.
