셀렉터에 날개를 달자 ? 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5126	PHP	팁이라고 하기에는 부끄럽지만... [5]	코드오타쿠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1797
5125	PHP	[Linux] php 7.x 컴파일 설치하기	한빛가람 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1602
5124	PHP	PHP 7.0 설치하기 (아마존 라이트세일 AWS Lightsail) [4]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2117
5123	OS	리눅스 Linux 마운트, 언마운트 [1]	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1399
5122	OS	리눅스 Linux diff 명령어	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1316
5121	OS	리눅스 Linux tar, gz 압축 및 해제	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1419
5120	OS	Linux 리눅스 zip/unzip	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1296
5119	PHP	영카트 상품일괄 엑셀 업로드에 대한 질문입니다.	시니어월천 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1147
5118	PHP	phpspreadsheet 사용하다가 삽질...	티로그 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1358
5117	Mobile	플러터와 네이티브 어플 [2]	jjunge 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1401
5116	PHP	html 내에 php 제어문,반복문 쓸때 tip [11]	폭주죽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2294
5115	MySQL	SNS 형태의 친구 맺기 (일촌) 기능 DB구조 [4]	welcome 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2906
5114	OS	리눅스 폴더내에서 동영상 일괄 인코딩 shell 명령어 [2]	벌이뉨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2003
5113	JavaScript	정규표현식 정리 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1539
5112	PHP	select값 선택시 선택 값이 저장되고, 여분필드에 별도 지정값이 저장방법? [3]	지니나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1559
5111	기타	어드민 좌측 매뉴를 상위로 옮겨봤습니다.	레드불355 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1299
5110	PHP	https에서 http와 ajax 통신시 proxy 프로그램 만들기 [10]	벌이뉨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	4545
5109	PHP	KimsQ 킴스큐RB 용 스마트에디터2 사진 업로더(보관용) [2]	경천76 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1580
5108	기타	[Selenium] select box, check box, radio button 조작하기 [1]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	12175
5107	기타	[Python] MP4 썸네일 생성(JPG, MP4 클립) [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2409
5106	기타	[Python] HWP 파일을 불러오기	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	6323
5105	기타	[Python] Requests <-> Selenium 쿠키 연동 [5]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	3695
5104	기타	[Python] 정규식을 사용하지 않고 문자열 내 특수문자를 제거하기 [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1503
5103	JavaScript	포인문으로 엘레먼트의 "속살" 보기 [4]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1693
5102	기타	[Python] 내일 날짜를 구하는 파이써닉한 방법	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1272
5101	기타	[Python] 확장자가 표시되지 않는 온라인 이미지의 확장자를 확인하기 [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1467
5100	기타	[Python] print() 되는대로 string으로 변환하는 함수 [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1308
5099	웹서버	python3 manage.py runserver 0.0.0.0:8000 [4]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2174
5098	PHP	AWS Lightsail 의 PHP 7.x 버전에서 SSH2 서비스 사용하기 [1]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1326
5097	PHP	알고있으면 좋은 코드 [2]	EI소프트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1986