필수적인 jQuery 셀렉터(Selector) 기능
기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.
$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택
<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는 '>' 로 해석하면 이해할만 하다
<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 메서드를 '트리 순환 메서드'라 부른다
<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를 걸러내는 코드다.
<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를 다시 선택하는 코드다.
<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()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.
<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로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자
<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에서 '조건선택자'에 해당하는 요소를 제거한다.
<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> 요소를 반환하는 코드다.
<div id="divID"><span><a href="#">Go!!</a></span></div>
- Script
$(function(){
var element = $('#divID span a');
alert(element.text());
});
지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.
jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.
출처 : mkexdev.net