SIR - 그누보드와 영카트 커뮤니티

셀렉터에 날개를 달자 ? 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>#

댓글 작성

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

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
27425	이제 가입이 됐네여~	퍼블리셔강	635	12년 전
5811	임포턴트 를 지우니까 글씨 주변으로 박스가 생기는데 이게 무슨뜻인가요 3	북금곰	1,291	12년 전
5810	html5에 대해서....	북금곰	612	12년 전
27422	오랜만에 다녀갑니다~ 2	퍼블리	787	12년 전
19316	PHP GMAIL의 SMTP 메일 발송 함수 3	떵짜루	6,574	12년 전
5809	탭인댁스 어디에 붙여줘야되나요.,	북금곰	544	12년 전
5808	css에 적은건데여.. 오류가 먼가요..	북금곰	831	12년 전
5807	장애인웹접근법 소스를 어디서 구할수있나요	북금곰	472	12년 전
5806	하나만 더 여쭐께여..	북금곰	518	12년 전
27421	이런경우는 어떻게 해야할가요..ㅡㅡ	조박사님	786	12년 전
5801	장애인 웹접근성과 웹접근성의 차이는 먼가요? 4	북금곰	722	12년 전
24540	html5로 제작시 디자이너와 프로그래머의 조율작업 3	북금곰	1,720	12년 전
24537	폐쇄몰 기획 및 구축에 대한 대략적인 단가가 얼마나 될까요? 2	가슴시린하늘	1,707	12년 전
5798	mysql_fetch_array() 오류...도와주세요... 2	아라미	1,349	12년 전
30863	반응형 반응형 웹 작업 시 mouseover click 분기 팁 20	지운아빠	5,218	12년 전
5795	자바 스크립트 소스에서 새창열기 문의 2	열공중	1,489	12년 전
27416	애플 홈페이지 효과는 어떻게 해야 할까요? 4	퓔퓔	1,590	12년 전
5793	크롬 언어셋 가져오기 1	아제아제	944	12년 전
27405	BootStrap 데모가 적용이 않되는 ... 10	벤지	1,964	12년 전
27403	WebKit (사파리)에서 srcset 구현 1	전진	1,357	12년 전
19314	PHP PREG 한글 특수문자 체크 & 추출 1	관리자	3,033	12년 전
19312	PHP 우분투 서버 셋팅하는 방법 1	프로프리랜서	2,539	12년 전
19309	PHP ereg_replace 정규식, 바뀔문자, 변수 입니다 2	프로프리랜서	1,884	12년 전
19306	PHP php변수를 스크립트로 사용하는 방법 2	프로프리랜서	2,361	12년 전
19304	MySQL 트리거를 이용하여 날짜 자동 업데이트법 1	프로프리랜서	1,842	12년 전
19303	기타 리눅스 파일 인코딩법 (쉘 상에서)	프로프리랜서	1,618	12년 전
5791	사이트에 성인인증이 있는데 1	쿠로사키	1,011	12년 전
27397	접근성 관련 탭 질문이 있습니다. 5	조박사님	1,120	12년 전
19298	MySQL mysql 환경 설정 4	프로프리랜서	5,546	12년 전
19293	JavaScript 달력소스입니다. 4	프로프리랜서	2,589	12년 전
19281	PHP 웹사이트 주소 알아내기 11	프로프리랜서	3,068	12년 전
19278	기타 오라클바인딩기술 2	프로프리랜서	1,736	12년 전
19275	PHP 파일 전송 버튼없이 전송하기 2	프로프리랜서	1,455	12년 전
5787	개발 완료된 사이트인데요~ 3	장마비	791	12년 전
5783	모바일웹도 결제가 되나요? 3	yunkiri486	1,796	12년 전
5781	C++ 과외 합니다~ 1	윈플	907	12년 전
5773	웹호스팅 주로 어디를 쓰시나요? 7	다비넷	1,485	12년 전
32027	trello 의 인상적인 기능 2	지운아빠	2,748	12년 전
19271	기타 IE9 속도 빠르게 하는법 (레지스트리) 3	오늘도망했다	2,325	12년 전
19269	기타 CSV를 다양한 형식으로 바꿔주는 고마운 사이트 1	오늘도망했다	1,668	12년 전
19265	정규표현식 IE11에서 사라지는것들이랍니다~ 3	오늘도망했다	6,646	12년 전
19264	웹서버 [퍼옴] SSL, HTTPS에 대한 7가지 미신	오늘도망했다	2,486	12년 전
5771	제작의뢰에 대량 DB 입력 있는데 1	홈피119	691	12년 전
5770	글쓰기에서 HTML변환 버튼이 안보여요.	덜렁덜렁	650	12년 전
27391	처음 보이는 화면 (above the fold) 로딩 속도 개선 5	전진	1,401	12년 전
27389	구글 검색 순위와 페이지 속도 1	전진	2,040	12년 전
27387	이걸 여기에 올려놔도 되는지는 모르지만.. 1	방방이	880	12년 전
5768	php 로 스크롤양 알아내기 1	누즈	692	12년 전
27384	반응형 웹과 애드센스 2	전진	1,320	12년 전
5767	php 공부좀 제대로 해보고 싶은대 추천할만한 서적이 있나요??	라희파더	1,452	12년 전
5765	CentOs 질문 드립니다. 1	Header	682	12년 전
27379	주말에 nhn 웹접근성 관련 세미나 갔다왔었는데요~ 4	grapedw	1,111	12년 전
27374	정말 답답해서 올려요,..div 코딩인데요. 4	개초보제이	1,384	12년 전
5763	포털사이트로 메일은 보내 지는데 특정메일로 보내기가 되지 않습니다 도와주세요 1	꼬쟁이2	772	12년 전
27371	웹와치 접근성 마크... 관련 질문입니다... 2	조박사님	1,066	12년 전
30846	기타 모바일, 반응형 웹 작업시 필요할듯... 16	조박사님	3,659	12년 전
5758	자바스크립트 공부법... 4	조박사님	1,407	12년 전
27365	아.. 난리내요 난리..ㅋㅋ 5	조박사님	947	12년 전
5756	php 수정 작업 바로 가능하신분 구합니다. 1	하야쉬	829	12년 전
5753	다른 개발자가 만든 php 사이트를 유지보수중인데요. 2	AMDbest	1,197	12년 전
19256	기타 웹접근성 인증 방법 7	jinmuk	1,433	12년 전
19250	MySQL my-sql 서브쿼리^^ 5	jinmuk	4,232	12년 전
19248	MySQL 기초적인 my sql 쿼리문~ 1	jinmuk	5,555	12년 전
5748	url 및 게시판 페이징 관련 질문입니다 도와주세요 4	꼬쟁이2	680	12년 전
19245	jQuery xhtml vs json 2	jinmuk	2,256	12년 전
19244	정규표현식 정규식 표현법	jinmuk	6,719	12년 전
19242	웹서버 리눅스 기본 명령어 1	jinmuk	2,393	12년 전
19241	jQuery ajax 예제 입니다.	jinmuk	9,313	12년 전
5746	개발자 디자이너 고수님들께... 1	희망과열정	515	12년 전
5744	리눅스 하드용량추가 질문좀 드립니다. 1	Header	717	12년 전
5738	나이가 많아도 일할수있나요? 5	희망과열정	1,336	12년 전
24534	기획에 대한 대략적인 단가가 궁금합니다. 2	프리랜서개발자	1,652	12년 전
5733	홈페이지 견적문의입니다 4	벌스	1,306	12년 전
19232	jQuery jQuery Performance 8	jinmuk	1,918	12년 전
19228	jQuery jQuery Event - 이벤트에 생명을~ 3	jinmuk	2,328	12년 전
19225	jQuery jQuery Event - bind() 메서드 2	jinmuk	3,182	12년 전
19222	jQuery jQuery Event - 이벤트 지원 메서드 2	jinmuk	2,155	12년 전
19220	jQuery jQuery Form API - 폼 지원 메서드에 대하여 1	jinmuk	2,322	12년 전
19219	jQuery jQuery Attribute - 요소의 속성 관련 메서드에 대하여	jinmuk	2,295	12년 전
19217	jQuery jQuery CSS - 스타일 관련 메서드에 대하여 1	jinmuk	1,578	12년 전
19216	jQuery jQuery Core	jinmuk	1,378	12년 전
19215	jQuery jQuery Traverse - Miscellaneous Traversing	jinmuk	1,025	12년 전
19214	jQuery jQuery Traverse - Filtering	jinmuk	1,211	12년 전
19213	jQuery jQuery Filter - 자식필터 Child Filter	jinmuk	1,995	12년 전
19212	jQuery jQuery Filter - 폼 필터 Form Filter	jinmuk	1,552	12년 전
19211	jQuery jQuery Filter - 기본필터(Basic Filter) 현재글	jinmuk	1,256	12년 전
19210	jQuery jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 2	jinmuk	2,295	12년 전
19209	jQuery jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근	jinmuk	2,031	12년 전
19208	jQuery jQuery Selector - 속성 Attribute	jinmuk	1,873	12년 전
19207	jQuery jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 2	jinmuk	1,609	12년 전
19206	jQuery jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터	jinmuk	2,306	12년 전
19204	jQuery jquery를 이용하여 컨텐츠 또는 스타일 바꾸기^^ 1	jinmuk	1,126	12년 전
5728	닷넷 웹 개발 해 보신분 있으신가요??? 4	wndProc	771	12년 전
5727	비가오는 날엔..	쿤이	388	12년 전
5725	로그분석 관련 질문이요..; 1	senseme	529	12년 전
19200	JavaScript 주소표시 3	세븐데이	1,036	12년 전
30841	CSS CSS 자료 링크 4	세븐데이	2,456	12년 전
19196	PHP 로그아웃시 현재 페이지 유지하기 3	세븐데이	2,467	12년 전
19192	PHP 스팸로봇의 이메일 수집 방지 3	세븐데이	1,550	12년 전
27359	웹접근성 페이지를 따로 만들어도 되나요? 5	밥먹고합시다	1,170	12년 전

이전 다음

16 17 18 19 20

전체 목록

jQuery Filter - 기본필터(Basic Filter)

댓글 작성

게시글 목록