셀렉터에 날개를 달자 ? Filter를 이용한 개체 접근
이번 강좌에서는 jQuery에서 지원하고 있는 여러가지 필터중에 기본이 되는 부분과 jQuery의 DOM 필터 메서드,(filter())를 사용하여 사용자가 원하는 요소를 선택하는 방법에 대해 알아 보도록 하겠습니다.

형식(표현식)	설명
:animated	에니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다.
:eq(index)	Index에 해당하는 요소를 반환합니다.(단일요소)
:even	짝수의 요소를 반환합니다. (0부터 시작)
:odd	홀수의 요소를 반환합니다. (0부터 시작)
:first	첫번째 요소를 반환합니다.
:last	마지막 요소를 반환합니다.
:gt(index)	Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다.
:lt(index)	Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다.
:header	모든 헤더 요소들을 반환합니다.(h1,h2,h3….)
:not(selector)	Selector와 일치되는 요소를 제외한 나머지 요소를 반환합니다.
:focus	현재 포커스가 위치한 요소를 반환합니다. (1.6 이상에서 지원)
표 1. [jQuery 필터의 종류]

jQuery의 필터는 말 그대로 거르다, 여과하다의 뜻으로 원하는 요소를 다양한 방식으로 걸러내는 역할을 합니다.

일반적으로 셀렉터와 함께 사용하는 경우가 대부분으로 셀렉터와 함께 써야 하는하는 것 알고 있는 분이 많이 있습니다.

하지만 필터는 단독으로도 사용이 가능하며, 필터와 필터를 연결해서도 사용이 가능합니다.
테이블의 컬럼인 td 항목을 예로 들어 설명을 하자면 다음과 같습니다.

$(“td:eq(0)”)	td 요소중에 첫번째 항목만을 선택합니다. (eq의 index는 0부터 시작입니다.) eq의 index는 0부터 시작을 하며 0 이면 요소중 첫번째, 1이면 두번째 요소가 됩니다.
$(“td:even”) $(“td:odd”)	td 요소중에 짝/홀수번째 요소를 선택합니다. 짝/홀수의 구분은 eq의 index와 동일하게 구분이 됩니다.
$(“td:first”) $("td:last")	td 요소중에 첫번째 요소, 마지막 요소를 선택합니다.
$(“td:gt(2)”) $(“td:lt(2)”)	td 요소중에 2번째 요소 이후의 모든 요소를 선택하거나 2번째 요소 이전의 모든 요소를 선택합니다.

각각의 설명만으로도 각 필터가 어떠한 역할을 하고 있는지 쉽게 이해를 하실 수 있을것입니다. 간단한 예제를 통해 위에 다시 한번 살펴보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:40px; height:40px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr:eq(0) > td:eq(7)").css("background", "#EEE");
            $("tr:eq(1) > td:gt(2)").css("background", "#EEE");
            $("tr:eq(2) > td:odd").css("background", "#EEE");
            $("tr:eq(3) > td:first").css("background", "#AAA");
            $("tr:eq(3) > td:last").css("background", "#BBB");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
            <td>#26</td><td>#27</td><td>#28</td><td>#29</td><td>#30</td>
        </tr>
        <tr>
            <td>#31</td><td>#32</td><td>#33</td><td>#34</td><td>#35</td>
            <td>#36</td><td>#37</td><td>#38</td><td>#39</td><td>#40</td>
        </tr>
        </table>
    </div>
</body>
</html>

[예제 1]

[예제 1을 적용한 결과 화면]

예제에서는 $(“td:even”)으로 사용했지만 $(“tr:even”).css(“background”, “#DDD”)와 같이 사용하면 각 tr 부분에 스타일을 작성하지 않고 간단하게 “zebra” 스타일의 목록을 만들 때 매우 유용합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; width:100% }
        td { border:1px solid #AAA; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr:even").css("background", "#AAA");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <table>
        <tr>
            <td>#1</td>
        </tr>
        <tr>
            <td>#2</td>
        </tr>
        <tr>
            <td>#3</td>
        </tr>
        <tr>
            <td>#4</td>
        </tr>
        <tr>
            <td>#5</td>
        </tr>
        <tr>
            <td>#6</td>
        </tr>
        <tr>
            <td>#7</td>
        </tr>
        <tr>
            <td>#8</td>
        </tr>        
        </table>
    </div>
</body>
</html>

[예제 2. :even 필터를 이용한 Zebra 스타일 목록 만들기]

[예제 2를 이용한 Zebra 스타일 목록 결과]

예제중에서 “:even, :odd” 경우 “zebra” 줄무늬 스타일의 목록을 만들 때 자주 사용이 됩니다.

:not(selector)

$(“td:not(‘.noselect’)”)
td 요소중에 클래스명이 “notSelect”인 항목을 제외한 요소의 집합을 선택합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; width:100% }
        td { border:1px solid #AAA; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td:not(.notSelect)").css("background", "#AAA");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <table>
        <tr>
            <td>#1</td>
        </tr>
        <tr>
            <td>#2</td>
        </tr>
        <tr>
            <td class="notSelect">#3</td>
        </tr>
        <tr>
            <td class="notSelect">#4</td>
        </tr>
        <tr>
            <td class="notSelect">#5</td>
        </tr>
        <tr>
            <td>#6</td>
        </tr>
        <tr>
            <td>#7</td>
        </tr>
        <tr>
            <td>#

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
5377	네임서버 zone 파일 인쿠르드 #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	884
5376	GPS정보 모바일에서 사용하기 #개발자 #php	파아랑 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1906
5375	SNMP(Simple Network Monitoring Protocol)과 MRTG 관련정보 #개발자 #php	파아랑 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1116
5374	메뉴 네비 레이어 서서히 없어지는거 #개발자 #javascript	마뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1520
5373	파워묵업 Power MockUP good story board! [광고가 아닙니다 ㅠ.ㅠ] #기획자 #기획서	SOFTA 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5707
5372	안녕하세요! 저희가 만든 채팅프로그램 소개합니다^^ [1] #개발자 #기타	천기소년 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2245
5371	mms 스트리밍 동영상 다운로드 방법 #퍼블리셔 #기타	신리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	15260
5370	에딧플러스에서 HOME 키 설정 [2] #퍼블리셔 #기타	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1396
5369	제니퍼소프트, UI 소스 오픈 하여군요 [1] #개발자 #javascript	비혼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3124
5368	좋은... swipe 스크롤 [2] #개발자 #jquery	열매 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1562
5367	이미지 파일을 base64 로 인코딩하여 전송 및 보여주기 #개발자 #php	네이비컬러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3597
5366	phpinfo 페이지 내에 삽입하기 #개발자 #php	네이비컬러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1311
5365	swipe 좌우스크롤 #개발자 #jquery	열매 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5005
5364	브라우저별 그리고 브라우저 버전별 웹사이트 확인방법 [3] #퍼블리셔 #html	박달나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4387
5363	MYSQL 오늘 날짜 뽑아오기 #개발자 #mysql	리얼홀릭 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4412
5362	date 함수를 이용하여 주를 날짜로 변환하기 #개발자 #php	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1181
5361	php array 로 만든 페이징 [1] #개발자 #php	천국나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2648
5360	audio 음악이 끝났을때 이벤트를 넣을 수 있나요? [1] #개발자 #javascript	봉보로봉봉 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	899
5359	음식점 혹은 술집 의 내부와 외부 전경 이미지 무단으로 사용할 경우 저작권? 초상권?에 걸릴까요? [3] #디자이너	입문개발자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3230
5358	캔버스 ( html5 ) 그림 그리기3 #개발자 #javascript	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3112
5357	PHP5.3 이상에서 PHP 오류 메시지 출력하기 [1] #개발자 #php	바보천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2055
5356	캔버스 ( html5 ) 그림 그리기2 #개발자 #javascript	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2495
5355	캔버스 ( html5 ) 그림 그리기 #개발자 #javascript	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2249
5354	파일 첨부시심플하게 버튼으로만 되게.. #개발자 #jquery	콩주삼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1346
5353	한국접근성연구소, 저렴한 '웹접근성 진단 서비스' 출시 #웹접근성	포톤 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3590