선택자(Selector)는 jQuery 라이브러리의 근간을 이루는 핵심 요소입니다. jQuery로 DOM을 조작할 때는 언제나 선택자가 사용되며, 선택자는 일종의 함수로 작동해 일치하는 요소를 반환합니다. 선택자는 jQuery 라이브러리에 기본으로 포함되어 있어 별도의 설정 없이 바로 사용할 수 있습니다.
선택자 함수는 특유의 모양을 가지고 있습니다. 달러 기호($)로 시작하고 그 뒤에 괄호가 붙습니다.
$()
괄호 안에는 선택하려는 요소의 태그 이름, id 또는 클래스명이 들어갑니다. 요소를 선택한 후에는 점(.) 표기법을 사용해 선택자 함수에 메서드를 체이닝(chaining)하여 해당 요소를 원하는 대로 변경할 수 있습니다.
$('p').html("Some new content rendered from jQuery")
위 코드는 페이지의 모든 단락(<p>) 요소를 선택하고, 그 내부 HTML을 문자열로 교체합니다. jQuery는 특정 요소나 여러 요소에 빠르게 접근해 원하는 변경 작업을 수행하도록 설계되었습니다. 이러한 기능 덕분에 동적 웹 애플리케이션을 만들 때 불필요한 시행착오를 크게 줄일 수 있습니다.
jQuery 선택자란 무엇인가?
jQuery 선택자는 jQuery 라이브러리에 기본 포함된 함수로, jQuery를 사용하려면 반드시 거쳐야 하는 출발점입니다. 매개변수로 요소의 태그 이름, 클래스, id를 문자열 형태로 받으며, 이후 jQuery 메서드를 체이닝해 DOM 조작을 수행합니다.
왜 유용할까요? 순수 자바스크립트에서는 코드가 장황해지기 쉬운 작업을 jQuery는 간결한 축약형 메서드로 처리할 수 있습니다. document.querySelector()나 document.querySelectorAll()을 직접 호출하는 대신, 선택자만으로 요소에 곧바로 접근할 수 있기 때문입니다.
즉, jQuery 선택자는 자바스크립트의 querySelector()를 $()라는 짧은 표현으로 줄여줍니다. document 객체에 명시적으로 호출하는 대신 암묵적으로 호출되므로 작성해야 하는 코드량도 함께 줄어듭니다.
jQuery 선택자 문법
지금까지 jQuery 선택자 함수를 추상적인 수준에서 살펴봤습니다. 선택자는 지정된 DOM 요소를 직접 참조하는 함수이며, 요소의 태그 이름, 클래스, id 중 하나만 있으면 충분합니다. HTML 구조에 따라 태그 이름과 클래스 또는 id를 조합해 사용할 수도 있습니다.
선택자는 페이지의 모든 요소를 선택하는 것처럼 포괄적으로 사용할 수도 있습니다.
$('*')
다만 이런 방식은 일반적으로 권장되지 않습니다. 더 흔하게 쓰이는 방식은 같은 종류의 요소 그룹을 선택하는 것입니다. 예를 들어 모든 단락 요소를 변경하고 싶다면 다음과 같이 직접 선택할 수 있습니다.
$('p')
이제 현재 페이지의 모든 <p> 태그가 선택되었습니다. 여기에 jQuery 메서드를 체이닝해 변경을 적용할 수 있습니다.
$('p').html('Replace original paragraph HTML with this.')
html() 메서드는 선택된 모든 <p> 태그의 HTML 내용을 새 값으로 교체합니다.
그렇다면 특정 단락 요소 하나만 선택하고 싶다면 어떻게 해야 할까요? 페이지에 여러 개의 <p> 태그가 있고, 그중 하나의 id가 'new-content'라고 가정해 보겠습니다. 이 경우 해당 요소를 아래처럼 직접 선택할 수 있습니다.
$('p#new-content')
jQuery 선택자는 CSS 참조 방식(# = id, . = class)을 그대로 따릅니다. 이제 id가 'new-content'인 단락 요소만 선택되었으며, 변경 작업을 바로 진행할 수 있습니다.
마지막으로 클래스가 지정된 요소를 선택해 보겠습니다. 애플리케이션에 여러 개의 <div> 요소가 있고, 그중 일부가 'main-content' 클래스를 가진 <div>로 감싸져 있다고 가정합니다. 메인 콘텐츠를 선택해 동적으로 변경하려면 태그 이름과 클래스를 함께 전달하면 됩니다.
$('div.main-content')
이제 선택된 <div>로 감싸진 모든 콘텐츠를 자유롭게 조작할 준비가 끝났습니다.
마치며
jQuery 선택자 함수는 라이브러리 전체를 움직이는 엔진이라고 할 수 있습니다. 선택자 함수를 다루는 방법과 jQuery 메서드를 체이닝하는 방법을 제대로 익혀야 jQuery의 진정한 힘을 발휘할 수 있습니다. 이번 글에서는 jQuery 선택자의 개념과 요소를 선택하는 기본 문법을 살펴봤습니다.
이제 jQuery 선택자가 무엇이고 어떻게 사용하는지 명확하게 이해하셨기를 바랍니다. 다음 단계로는 다양한 선택자와 메서드 체이닝을 직접 연습해 보세요. 실전 경험이 쌓이면 그 재미에 빠지게 될 것입니다. 즐거운 코딩 되세요!