메뉴 건너뛰기

XE Guidebook

조회 수 8 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

기본 필터 선택자 (Basic Filter)


jQuery의 필터는 말 그대로 거르다의 뜻으로 원하는 요소를 다양한 방식으로 걸러내는 역할을 한다.
일반적으로 셀렉터와 함께 사용하는 경우가 대부분이지만,
필터는 단독으로도 사용이 가능하며, 필터와 필터를 연결해서 사용이 가능하기 때문에,
필터 자체를 셀렉터의 일종으로 볼 수 있다. 
 
필터는 선택자에 의해 선택된 집합 중에서 사용자의 조건에 맞는 요소를 다양한 방식으로 걸러서 다시 선택해 준다.
필터 앞에 :(콜론)을 붙여 사용한다.


● 기본 필터의 종류

- :eq(index) 
  선택된 태그들을 인덱스 번호로 찾을 수 있는 필터이다
  
- :gt(index)
  선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 반환한다.
 
- :lt(index)
  선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 반환한다.
 
- :first
  선택된 집합 중에서 첫 번째 요소를 찾는 선택자이다.
 
- :last
  선택된 집합 중에서 가장 마지막 요소를 찾는 선택자이다.
 
- :even
  선택된 집합 중에서 index를 기준으로 짝수인 요소를 찾는 선택자이다. (0을 포함)
 
- :odd
  선택된 집합 중에서 index를 기준으로 홀수인 요소를 찾는 선택자이다.
 
- :not
  현재 선택한 집합의 반대 집합을 선택하는 부정형 선택자이다.
 
- :header
  h1, h2, h3와 같은 제목 요소들을 선택한다.
 
- :animated
  show, hide, slideDown, slideUp 등의 명령으로 현재 애니메이션이 동작되고 있는 모든 요소를 반환해주는 필터이다.
 
- :focus  
  현재 포커스가 위치한 요소를 선택하며, 사용자의 포커스가 위치한 지점의 위치를 표시하거나,
  입력하고 있는 폼 요소를 강조하고 싶을 때 사용한다.

 
 ※ 인덱스 값을 기준으로 노드를 찾아주는 필터의 인덱스 값은 0부터 시작한다.
    가령 Selector로 찾은 태그가 10개라면 첫번째 찾은 태그의 인덱스는 0이 되며,
    열번째 찾은 태그의 인덱스는 9가 된다.
 
    반면에 n번째 태그를 선택할 수 있는 :nth-child(n) 선택자는 인덱스 값이 1부터 시작한다.  
 ※ 인덱스 값을 기준으로 노드를 찾아주는 필터 선택자에게 있어 인덱스 값은 0부터 시작한다.
    가령 Selector로 찾은 태그가 10개라면 첫번째 찾은 태그의 인덱스는 0이 되며,
    열번째 찾은 태그의 인덱스는 9가 된다.
 
    반면에 n번째 태그를 선택할 수 있는 :nth-child(n) 선택자는 인덱스 값이 1부터 시작한다.
 

● 기본 필터 사용 예제

( 예제 소스1 )
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Hi jQuery! - 기본 필터 선택자 (Basic Filter Selector) </title>
    <style>
      body {
        padding:20px;
      }
      #container {
        padding:20px;
        background-color:#eee;
        border:1px solid #bbb;
        border-radius:20px;
      }
      h2 {
        color:#00f;
      }
      h2 span {
        color:#f60;
      }
      ul li a {
        color:#555;
        text-decoration:none;
      }
      .subject {
        margin:20px 0 10px;
        font-size:18px;
        font-weight:bold;
        color:#f60;
      }
      .sub-text {
        color:#09f;
      }
    </style>
    <script src="jquery-3.1.0.min.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="navbar">
        <div id="navbar-head">
          <h2> 기본 필터 선택자 <span>:eq(index)</span> </h2>
        </div>
        <nav id="navbar-menu">
          <ul class="menu-group1">
            <li> Menu 1 (index 0) </li>
            <li> Menu 2 (index 1) </li>
            <li> Menu 3 (index 2) </li>
            <li> Menu 4 (index 3) </li>
            <li> Menu 5 (index 4) </li>
          </ul>
          <ul class="menu-group2">
            <li> Menu 1 (index 5) </li>
            <li> Menu 2 (index 6) </li>
            <li> Menu 3 (index 7) </li>
            <li> Menu 4 (index 8) </li>
          </ul>
        </nav>
      </div>
    </div>
    <div id="description">
      <div class="subject">
        $("li:eq(7)")
      </div>
      <div class="sub-text">
         index가 7인 li 태그를 선택
      </div>
    </div>
    <script>
      // jQuery 코드 입력 부분
    </script>
 
</body>
</html>
 

( 예제 소스2 ) 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hi jQuery! - 기본 필터 선택자 (Basic Filter Selector) </title>
    <style>
      body {
        padding:20px;
      }
      #container {
        padding:20px;
        background-color:#eee;
        border:1px solid #bbb;
        border-radius:20px;
      }
      h2 {
        color:#00f;
        margin-bottom:10px;
      }
      h2 span {
        margin-left:10px;
        color:#f60;
      }
      table {
        margin:0 auto;
        width:100%;
        border:1px solid #aaa;
      }
      td {
        border:1px solid #aaa;
      }
      .desc1 {
        margin:20px 0 8px;
      }
      .subject {
        margin-right:10px;
        font-size:18px;
        font-weight:bold;
        color:#f60;
      }
      .sub-text {
        color:#09f;
      }
    </style>
    <script src="jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        // jQuery 코드 입력 부분
      });
    </script>
  </head>
  <body>
    <div id="navbar-head">
      <h2> 기본 필터 <span>:even, :odd</span> </h2>
    </div>
    <div id="container">
      <table>
        <tr>
          <td>01.</td>
        </tr>
        <tr>
          <td>02.</td>
        </tr>
        <tr>
          <td>03.</td>
        </tr>
        <tr>
          <td>04.</td>
        </tr>
        <tr>
          <td>05.</td>
        </tr>
        <tr>
          <td>06.</td>
        </tr>
        <tr>
          <td>07.</td>
        </tr>
        <tr>
          <td>08.</td>
        </tr>
        <tr>
          <td>09.</td>
        </tr>
        <tr>
          <td>10.</td>
        </tr>
      </table>
    </div>
    <div id="description">
      <div class="desc1">
        <!-- 주제어와 설명  -->
      </div>
      <div class="desc2">
        <!-- 주제어와 설명 -->
      </div>
    </div>
  </body>
</html>
 

▶ 기본 필터 선택자  :eq(index)     .

  index가 6인 <li> 태그를 선택하여 배경색 "#09f", 아웃라인 1px 두께의 #03f 실선 적용   
 
  $("li:eq(6)").css( {backgroundColor:"#09f", outline:"1px solid #03f"} );

2-05-01 기본 필터 선택자 eq.gif


▶ 기본 필터 선택자  :gt(index)     .  

  index 3인 <li> 태그 뒤에 있는 모든 <li> 태그를 선택하여
  배경색 "#09f", 아웃라인 1px 두께의 #03f 실선 적용
 
  $("li:gt(3)").css( {backgroundColor:"#09f", outline:"1px solid #03f"} );
 

2-05-02 기본 필터 선택자 gt.gif

 

▶ 기본 필터 선택자  :lt(index)     .

  index 6인 <li> 태그 앞에 있는 모든 <li> 태그를 선택하여
  배경색 "#09f", 아웃라인 1px 두께의 #03f 실선 적용
 
  $("li:lt(6)").css( {backgroundColor:"#09f", outline:"1px solid #03f"} );
 

2-05-03 기본 필터 선택자 lt.gif

 

▶ 기본 필터 선택자  :first, :last

  
  li 태그 중에서 맨 처음 <li> 태그를 선택하여 배경색 "#09f" 적용
 
  $("li:first").css("backgroundColor", "#09f");

  li 태그 중에서 맨 마지막 <li> 태그를 선택하여 배경색 "#f90"적용
 
  $("li:last").css("backgroundColor", "#f90"");
 
 

2-05-04 기본 필터 선택자 first last.gif

 

▶ 기본 필터 선택자  :even, :odd

  
  tr 태그 중에서 짝수 번째 인덱스를 선택하여 배경색 "#fff" 적용
 
  $("tr:even").css("background", "#fff");

  tr 태그 중에서 홀수 번째 인덱스를 선택하여 배경색 "#fff" 적용
 
  $("tr:odd").css("background", "#ccc");


2-05-05-1 기본 필터even odd1.gif

 

▶ 기본 필터 선택자  :not()

  
  index가 7인 <li> 태그를 제외한 나머지 <li> 태그를 선택하여 배경색 "#09f" 적용
 
  $("li:not(:eq(7))").css("backgroundColor", "#09f");
 

2-05-06 기본 필터 선택자 not.gif

 

▶ 기본 필터 선택자  :header 

 
  문서에서 h1, h2, h3 같은 제목 태그가 있으면 모두 선택하여 배경색 "#09f" 적용
 
  $(":header").css( {backgroundColor:"#09f");
 

2-05-07 기본 필터 선택자 header.gif

 


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
» Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4