메뉴 건너뛰기

XE Guidebook

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

● 속성 선택자 (Attribute Selector)

 

XPath 표현을 사용하여 태그의 특정 속성(attribute)을 가진 노드를 찾는 선택자로
실무에서 매우 유용하게 사용된다.
 
- [attr]
  attr 속성명이 있는 요소를 찾는 선택자
 
- [attr = 'value']
  태그의 attr 속성값과 "value"가 일치하는 요소를 찾는 선택자
 
- [attr != 'value']
  태그의 attr 속성값과 "value"가 일치하지 않는 요소만 반환하는 선택자
 
- [attr ^= 'value']
  태그의 attr 속성값에 "value" 값으로 시작하는 문자열이 있는 요소를 반환하는 선택자
 
- [attr $= 'value']
  태그의 attr 속성값에 "value"값으로 끝나는 문자열이 있는 요소를 반환하는 선택자
 
- [attr *= 'value']
  태그의 attr 속성값에 "value"값이 해당하는 문자열이 포함되어 있는 모든 요소를 반환하는 선택자
 
- [attr ~= 'value']
  태그의 attr 속성값에 "value"에 해당하는 문자가 공백을 포함한 단어로 들어가 있는 요소를 반환하는 선택자
 
- [attr = 'value1'][attr = 'value2']
  속성을 동시에 사용하여 요소를 선택할 때 사용하는 선택자
 

( 예제 )
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Hi jQuery! - 속성 선택자 (Attribute 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;
      }
      img {
        width:32.8%;
      }
      .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>[attr]</span> </h2>
        </div>
        <nav id="navbar-menu">
          <ul class="menu-group">
            <li>
              <a href="http://xeguidebook.com/" target="_blank" class="xe-manual" title="XE-manual">
                XE Guidebook
              </a>
            </li>
            <li>
              <a href="https://www.xpressengine.com/" target="_blank" id="xe" title="XE">
                Xpress Engine
              </a>
            </li>
            <li>
              <a href="http://www.xemarket.co.kr/" target="_blank" id="xe-store" title="XE-shop">
                XE Market
              </a>
            </li>
            <li>
              <a href="http://www.cafe24.com/" target="_blank" class="hosting" title="Web Hosting">
                Cafe24
              </a>
            </li>
            <li>
              <a href="#page4" title="Page4">
                4 페이지로 이동
              </a>
            </li>
          </ul>
          <div>
            <a href="http://xeguidebook.com/" target="_blank" >
              <img src="home1.jpg" alt="XE Guidebook"/>
            </a>
            <a href="https://www.xpressengine.com/" target="_blank" >
              <img src="home2.jpg"/>
            </a>
            <a href="http://www.xemarket.co.kr/" target="_blank" >
              <img src="home3.gif" alt="XE Market"/>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <div id="description">
      <div class="subject">
        [attr]
      </div>
      <div class="sub-text">
        attr 속성명이 있는 요소를 반환
      </div>
    </div>
    <script>
      // jQuery 코드 입력 부분 
    </script>
 
</body>
</html>
 
 

▶ 속성 선택자 [attr]    .

  <li> 태그 안에 있는 <a>태그 중에서 "class" 속성이 있는 모든 요소를 찾아
  글자 크기:"24px", 글자 색상:"#f60", 테두리 1px 두께의 색상 "#03f" 실선 적용
 
  $("li a[class]").css({fontSize:"24px", color:"#f60", border:"1px solid #03f"});

2-04-01 속성 선택자.gif

 

▶ 속성 선택자 [attr="value"]

  <li> 태그 안에 있는 <a>태그의 "id" 속성이 "xe"인 요소를 찾아
  배경색을 "#f60"으로 적용 
 
  $("li a[id='xe']").css("background-color","#f60");
 
2-04-02 속성 선택자.gif

 

▶ 속성 선택자 [attr!="value"]

  <li> 태그 안에 있는 <a>태그 중에서 "href" 속성값이 "#page4"가 아닌 모든 요소를 찾아
  배경을 "#f60" 색으로 적용
 
  $("li a[href!='#page4']").css("background-color","#f60");
 

2-04-03 속성 선택자.gif

 

▶ 속성 선택자 [attr^="value"]

  <li> 태그 안에 있는 <a>태그의 "href" 속성값이 "https"로 시작하는 모든 요소를 찾아
  글자 색을 "#f60"으로 변경 
 
  $("li a[href^='https']").css("color","#f60");
 

2-04-04 속성 선택자.gif

 

▶ 속성 선택자 [attr$="value"] 

  <li> 태그 안에 있는 <a>태그의 "href" 속성값이 "com/"으로 끝나는 모든 요소를 찾아
  글자 색을 "#f60"으로 변경
  
  $("li a[href$='com/']").css("color","#f60");
 

2-04-05 속성 선택자.gif

 

▶ 속성 선택자 [attr*="value"] 

  <li> 태그 안에 있는 <a>태그의 "href" 속성값에 "xe" 문자열이 있는 모든 요소를 찾아
  글자 색상을 "#f60"으로 변경
 
  $("li a[href*='xe']").css("color","#f60");

2-04-06 속성 선택자.gif

 

▶ 속성 선택자 [attr~="value"] 

  <li> 태그 안에 있는 <a>태그의 "title" 속성값에 공백을 포함한 "XE" 단어가 있는 모든 요소를 찾아
  글자 색상을 "f60"으로 적용 
 
  $("li a[title~='XE']").css("color","#f60");
 

2-04-07 속성 선택자.gif

 

▶ 속성 선택자 [attr1="value1"][attr2="value2"]

- <li> 태그 안에 있는 <a>태그의 "href" 속성값이 "com/"로 끝나는 요소들 중에서.
  "http://x"로 시작하는 요소를 찾아 배경을 "#f60" 색상으로 적용

  $("li a[href$='com/'][href^='http://x']").css("background-color","#f60");

- "src" 속성 값에 "jpg" 문자열이 있는 요소를 찾고
  동시에 "alt" 속성이 있는 요소를 찾아 테두리를 "#f60" 색상의 점선으로 표시
 
  $("[src*='jpg'][alt]").css("border","2px #f60 dashed");
 

2-04-08 속성 선택자.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
» 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