메뉴 건너뛰기

XE Guidebook

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

● 계층 선택자 (Hierarchy selector) 

 

계층 선택자도 CSS에서 사용하는 것과 똑 같다. 
자식(child), 자손(descendant) 부모(parent), 형제(sibling) 태그 등과 같이 계층적인 선택을 지원하는 선택자이다.
 
- ancestor descendant        
  조상에 속한 자손을 찾는 선택자로 하위의 자손 태그가 몇 단계 아래의 계층에 있건 상관없이 모두 선택
- parent > child
  parent 에 속해 있는 바로 아래 <child> 태그를 선택
- prev + next
  현재 선택된 <prev> 태그를 기준으로 바로 뒤에 오는 첫 번째 형제태그를 선택
- prev ~ siblings
  현재 선택된 <prev> 태그를 기준으로 바로 뒤부터 형제 태그를 모두 선택
 

( 예제 )
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Hi jQuery! - 계층 선택자 (Hierarchy Selector) </title>
    <style>    
      body {
        padding:20px;
      }
      #container {
        padding:20px;
        background-color:#eee;
        border:1px solid #bbb;
        border-radius:20px;
      }
      h2 {
        color:#00f;
      }
      .subject {
        margin:20px 0 10px;
        font-size:18px;
        font-weight:bold;
        color:#09f;
      }
      .sub-text {
        color:#090;
      }
    </style>
    <script src="jquery-3.1.0.min.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="navbar">
        <div id="navbar-head">
          <h2> 자손 선택자 (공백) </h2>
        </div>
        <nav id="navbar-menu">
          <ul class="menu-group">
            <li id="menu-1">Menu 1</li>
            <li id="menu-2">Menu 2</li>
            <li id="menu-3">Menu 3</li>
            <li id="menu-4">Menu 4</li>
            <li id="menu-5">Menu 5</li>
          </ul>
        </nav>
      </div>
    </div>
    <div id="description">
      <div class="subject">
        $("div#navbar li")
      </div>
      <div class="sub-text">
        id가 "navbar"인 <div> 태그의 자손들 중에서 <li> 태그를 모두 선택
      </div>
    </div>
    <script>
      // jQuery 코드 입력 부분 
    </script>
  </body>
</html>
 
 
▶ 자손 선택자 ( 공백 )  

  id가 "navbar"인 <div> 태그의 자손들 중에서 <li> 태그를 모두 선택하여
  배경색 "#09f", 아웃라인 1px 두께의 "#03f" 실선 적용
 
  $("div#navbar li").css({backgroundColor:"#ddd", outline:"1px solid #03f"});
 

2-03-01 자손 선택자.gif

 

▶ 자식 선택자 (>)

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

2-03-02 자식 선택자.gif

 

▶ 형제 선택자 (+)


  id속성이 "menu-3"인 노드의 바로 그 다음에 오는 형제 <li> 태그를 선택하여
  배경색 "#09f", 아웃라인 1px 두께의 "#03f" 실선 적용

  $("#menu-3+li").css({backgroundColor:"#ddd", outline:"1px solid #03f"});
 

2-03-03 형제 선택자(+).gif

 

▶ 형제 선택자 (~)

  id속성이 "menu-3"인 노드 다음에 오는 모든 형제 <li> 태그를 선택하여
  배경색 "#09f", 아웃라인 1px 두께의 "#03f" 실선 적용
 
  $("#menu-3+li").css({backgroundColor:"#ddd", outline:"1px solid #03f"});
 

2-03-04 형제 선택자(~).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
» Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 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