메뉴 건너뛰기

XE Guidebook

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

● 내용 필터 선택자 (Content Filter)

 
 
HTML의 텍스트 콘텐츠와 관련있는 필터 선택자로,
찾고 싶은 텍스트를 가지는 노드를 선택할 수도 있고,
선택한 노드의 내용이 있는지 여부도 알 수 있다.
 
- :contains()
  ()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환한다.
 
- :has()
  ()안의 찾고 싶은 태그가 들어 있는 요소들을 반환해 준다.
 
- :empty
 
  요소에 텍스트가 없을 때에 선택된다.
  enter key에 의해 개행이 되거나 공백이 있는 경우에는 빈 요소로 인식되지 않는다.
 
 
- :parent
  :empty와 반대로 요소에 텍스트가 존재할 때에 선택한다.
 
  
( 예제 )
 
<!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <title> Hi jQuery! - 내용 필터 선택자 (Content 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>:contains()</span> </h2>
    </div>
        <nav id="navbar-menu">
          <ul class="menu-group1">
            <li class="flower"> Rose </li>
            <li class="flower"> Calla </li>
            <li class="flower"> Magnolia </li>
          </ul>
          <ul class="menu-group2">
            <li class="fish"> Guppy </li>
            <li class="fish"> Platy </li>
            <li class="fish"> Discus </li>
          </ul>
          <ul class="menu-group3">
            <li class="flower"> Tulip </li>
            <li class="fish"></li>
            <li class="fish"> </li>
            <li class="fish">
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div id="description">
      <div class="subject">
        <!--  주제어  -->
      </div>
      <div class="sub-text">
        <!--   설명   -->
      </div>
    </div>
    <script>
      // jQuery 코드 입력 부분
    </script>
  </body>
</html>

 

▶ 내용 필터 선택자 :contains( )

  <li> 태그가 가지고 있는 텍스트 중에서 "la"가 있는 <li> 태그를 선택하여, 배경색 "#09f" 적용
 
  $("li:contains('la')").css("backgroundColor","#09f");

2-06-01 내용 필터 선택자 contains.gif

 

▶ 내용 필터 선택자 :has( )

  class 속성이 "fish"인 노드를 가지고 있는 ul 태그를 선택하여 배경색 "#09f" 적용
 
  $("ul:has('.fish')").css("backgroundColor", "#09f");

2-06-02 내용 필터 선택자 has.gif

 

▶ 내용 필터 선택자 :empty
 
  클래스 속성이 "fish"인 <li> 태그 중에서 텍스트가 없는 노드를 선택하여,
  "Angel"이라고 적고, 배경색은 "#09f" 적용
  
  $("li.fish:empty").text("Angel").css("backgroundColor", "#09f"); 
 
  ※ "ul.menu-group3"의 3번째, 4번째 <li>태그도 class 속성이 "fish"이고 텍스트가 안보이지만
     공백이 있고, 개행이 되어 있기 때문에 jQuery가 작용하지 않는다. 

2-06-03 내용 필터 선택자 empty.gif

 

▶ 내용 필터 선택자 :parent 
 
  class가 "menu-group3"인 ul 태그의 자식 li 노드 중에서,
  텍스트나 공백 등을 포함하여 콘텐츠가 있는 노드는 모두 선택하여 배경색 "#09f" 적용
 
  $("ul.menu-group3 > li:parent").css("backgroundColor", "#09f");  
 

2-06-04 내용 필터 선택자 parent.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
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
» 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