자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편

증말이지... 나이가 들수록 점점 기억력이 감소하고 디지털 기기의 발전은 이를 더 부추긴다.

너무 많은 라이브러리와 프레임워크의 등장으로 함수 하나하나도 쉬이 기억나지 않음이야...
동일한 기능의 함수명과 사용법도 각 프로그래밍 언어별로 조금씩 달라 기억 창고에 두고 바로 사용할 수 없는 지경이다. 그래서 정리한다. jQuery의 자주 쓰는 기능편!!!

이것은 노하우보다는 노웨어(Know Where)를 위한 글이라 할 수 있다.

기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.

$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택

- HTML
<p>Paragraph Element</p>  
<div id="divID">Division Element</div>    
<div class="className">Division Element</div>

- Script
$(function(){
     var element = $('p'); alert(element.html());                
     element = $('#divID'); alert(element.html());        
     element = $('.className'); alert(element.html());
}); 

순서 기반 셀렉터
기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.

$('선택자:even')
선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.

$('선택자:odd')
선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.

$('선택자:eq(인덱스)')
선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.

$('선택자:first') , $('선택자:last')
선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다

$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')
선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다

- HTML
<p>Paragraph Element 0</p> 
<p>Paragraph Element 1</p>
<p>Paragraph Element 2</p>
<p>Paragraph Element 3</p>

- Script
$(function(){
     var elements = $('p:odd');
     elements.each(function(){ alert($(this).html())});        
        
     elements = $('p:even');
     elements.each(function(){ alert($(this).html())});        
        
     elements = $('p:eq(3)'); alert(elements.html())

      elements = $('p:first'); alert(elements.html());     
      elements = $('p:last'); alert(elements.html());
     
      elements = $('p:gt(1)');
      elements.each(function(){ alert($(this).html())}); 
     
      elements = $('p:lt(2)');
      elements.each(function(){ alert($(this).html())});
});

관계 기반 셀렉터
부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.

$('선택자').children() : 선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.
$('선택자').parent() : 선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.

$('선택자').next() , $('선택자').nextAll()
선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.

$('선택자').prev() , $('선택자').prevAll()
선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.

이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다

- HTML
<div id="root">
   <p>Paragraph Element</p>
   <div id="1deptCh">Division Element <div id="2deptCh">Sub Division Element</div></div>
 </div>

- Script
$(function(){
     var elements = $('#root').children();
     elements.each(function(){ alert($(this).html())});  
        
     elements = $('#2deptCh').parent();
     alert(elements.html());        
});

조건 기반 셀렉터
특정 내용이 포함된 element, 특정 규칙에 맞는 element 즉 조건에 의해 선택하는 방법을 안내한다. 따지고 보면 모든 셀렉터가 조건 기반 셀렉터이다. 다만 단락 구분과 실제 규칙을 명시하는 범주를 여기서 다룬다.

$('선택자').filter('조건선택자')
앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.

- HTML
<p class="filterName">Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p class="filterName">Paragraph Element 2</p>
<p>Paragraph Element 3</p>

- Script
$(function(){
     var elements = $('p').filter('.filterName');
     elements.each(function(){ alert($(this).html())});                    
})

$('선택자').find('조건선택자')
앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.

- HTML
<div>Division Element 0</div>
<div>Division Element 1<span> Span Element 1</span></div>    
<div>Division Element 2<span> Span Element 2</span></div>

- Script
$(function(){
     var elements = $('div').find('span');
     elements.each(function(){ alert($(this).html())});                    
});

filter() vs find()
여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.

filter() : 현재 선택된 집합을 대상으로 검색함
find() : 현재 선택된 집합의 자식 요소를 대상으로 검색함

filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.

- HTML
<div class="tempClass">Division Element 0</div>
<div>Division Element 1<span class="tempClass"> Span Element 1-1</span></div>    
<div class="tempClass">Division Element 2<span> Span Element 2-1</span></div>

- Script
$(function(){                
     elements = $('div').filter('.tempClass');
     elements.each(function(){ alert('filter() :' + $(this).html())});                  
        
     var elements = $('div').find('.tempClass');
     elements.each(function(){ alert('find() :' + $(this).html())});  
});

두 경우 모두 처음에는 모든 <div>를 선택하고, 이후 filter와 find를 같은 조건(class 명이 'tempClass' 인 것)으로 검색한다. 결과는 다음과 같다.

- filter()로 검색한 결과: 첫 번째와 세 번째 <div> 요소 반환
- find()로 검색한 결과: 두 번째 요소의 자식 요소인 <span> 요소 반환

이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!

$('선택자:contains("searchText")')
앞의 '선택자'에 의해 선택된 element(s)의 콘텐트에서 "searchText"가 포함된 element만을 다시 선택한다.
다음 코드는 모든 <div>요소의 내용에서 'mkex'가 포함된 요소만을 선택하는 코드이다. 참고로 contains로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자

- HTML
<div>Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div>Hi, MKEX</div>

- Script
$(function(){                
     var elements = $('div:contains("mkex")');
     elements.each(function(){ alert($(this).text())});                    
});

$('선택자:not(조건선택자)')
앞의 '선택자'에서 선택된 모든 elements에서 '조건선택자'에 해당하는 요소를 제거한다.

- HTML
<div class="divClass">Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div class="divClass">Hi, MKEX</div>

- Script
$(function(){                
   var elements = $('div:not(.divClass)');
   elements.each(function(){ alert($(this).text())});                    
});    

참고로 not 조건에 셀렉터를 중첩해서 사용 가능하다. 다음과 같이...
$('div:not(.divClass , #divID)');

위 코드는 모든 <div> 요소에서 class로 'divClass'가 지정되거나 id로 'divID'로 지정된 요소를 제거한다.
즉 조건식을 or 조합으로 만들 수 있다.


선택자 중첩
지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다.
기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.

$('선택자 선택자 선택자 ...')
총 3개의 선택자를 지정한다. 셀렉터를 중첩해도 동일한 효과를 줄 수 있지만 여기서는 선택자를 중첩 지정하여 탐색의 깊이를 점점 좁혀가고 있다.

예를 하나 보자. 다음 코드는 ID가 'divID'인 요소 안에 있는 <span> 내의 모든 <a> 요소를 반환하는 코드다.

- HTML
<div id="divID"><span><a href="#">Go!!</a></span></div>

- Script
$(function(){                
     var element = $('#divID span a');
     alert(element.text());       
});

지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.

jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.