jQuery - 선택자

■ jQuery API Selectors
 ο 개요
    DOM의 요소(엘리먼트)를 선택

 ο DOM(Document Object Model)
    - HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원
    - DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하기 위한 방법
    - 브라우저별로 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성

 ο 기본 셀렉터
   - #id : 지정된 아이디를 가지는 엘리먼트와 일치하는 셀렉터. 
   - element : 모든 <element> 엘리먼트와 일치하는 셀렉터.(태그 등)
   - .class : 지정된 클래스명을 가지는 요소를 선택
   - * : 모든 엘리먼트를 선택 한다.
   - selector1, selector2, ... selectorN : 각각의 지정된 셀렉터와 일치하는 엘리먼트 선택.

   - 사용 예
     // 모든 div 태그의 스타일 변경
     $("div").css("border","3px solid red");
     $("div").css({"backgroundColor": "yellow", "font-size": "9pt"});

     // id가 myDiv인 객체의 스타일 변경
     $("#myDiv").css("border","3px solid red");

     // class 속성이 myClass인 객체의 스타일 변경
     $(".myClass").css("border","3px solid red");

     // 모든 엘리먼트의 스타일 변경
     $("*").css("font-size","10pt");

     // div, span, p 태그중 class 속성이 myClass인 스타일 변경
     $("div,span,p.myClass").css("border","3px solid red");

 ο 계층 실렉터  
   - ancestor descendant : 조상<ancestor> 엘리먼트의 자손(descendant)인 모든<descentant> 엘리먼트를 선택 
   - parent > child : <parent>의 바로 아래 자식인 모든 <child> 엘리먼트를 선택
   - prev + next : <prev> 엘리먼트 바로 다음의 형재인 <next> 엘리먼트를 선택
   - prev ~ sibling : <prev> 엘리먼트 다음의 형제인 모든 <sibling> 엘리먼트를 선택

   - 사용예
     // ancestor descendant -> form 태그 안의 input 태그 스타일 변경
     $("form input").css("border", "2px dotted blue");

     // parent > child : 아이디가 main인 객체 아래의 일단계의 모든 객체 스타일 변경
     $("#main > *").css("border", "3px double red");

     // prev + next -> label 태그 바로 아래 태그가 input인 모든 input 태그의 스타일 변경 및 value 값을 설정
     $("label + input").css("color", "blue").val("테스트 !!!")
            :
      <label>Name:</label>
      <input name="name" />
      <label>Email:</label>
      <input name="email" />
      <input name="none" />   <!-- 변화 없음 --!>

     // prev ~ sibling -> 아이디가 prev인 객체의 형제인 모든 div 태그의 스타일 변경
     $("#prev ~ div").css("border", "3px groove blue");
           :
     <div>div 1</div>  <!-- 변화 없음 --!>
     <div id="prev">div 2</div>   <!-- 변화 없음 --!>
     <div>div 3</div>
     <div>div 4<div id="small">div 4-1</div></div>   <!-- 4-1은 변화 없음 --!>
     <span>span</span> <!-- 변화 없음 --!>
     <div>div 5</div>

 ο 기본 필터 셀렉터  
   - :first : 페이지 처음 선택된 엘리먼트 선택
   - :last : 페이지 마지막 선택된 엘리먼트 선택
   - :not(selector) : 주어진 실렉터와 반대의 모든 엘리먼트 선택
   - :even : 페이지의 짝수 번째 엘리먼트 선택(인덱스는 0부터 시작) 
   - :odd : 페이지의 홀수 번째 엘리먼트 선택(인덱스는 0부터 시작) 
   - :eq(index) : 지정된 index 번째의 엘리먼트 선택
   - :gt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트 선택
   - :lt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트 선택
   - :header : 헤더 <h1> ~ <h6> 엘리먼트 선택
   - :animated : 현재 애니메이션이 적용되고 있는 엘리먼트 선택

   - 사용 예
     // 첫번째 tr 태그 스타일 변경
     $("tr:first").css("font-style", "italic");

     // 마지막 tr 태그 스타일 변경
     $("tr:last").css({"backgroundColor": "yellow", "fontWeight": "bolder"});

     // checkbox 객체가 선택되지 않은 형재 태그인 span 태그의 스타일 변경
     $("input:not(:checked) + span").css("background-color", "yellow");
              :
     <input type="checkbox" name="a" />
     <span>홍길동</span>
     <input type="checkbox" name="b" checked="checked" />
     <span>이순신</span>    <!-- 변화 없음 --!>

     // 짝수행의 스타일 변경(인덱스는 0부터 시작)
     $("tr:even").css("background-color", "#bbbbff");

     // 홀수행의 스타일 변경(인덱스는 0부터 시작)
     $("tr:odd").css("background-color", "#bbbbff");

     // 2번째 인덱스의 td 태그의 스타일 변경(인덱스는 0부터 시작) - 한번만 실행
     $("td:eq(2)").css("text-decoration", "blink");

     // 인덱스가 4보다 큰 td 태그 스타일 변경
     $("td:gt(4)").css("text-decoration", "line-through");

     // 인덱스가 4보다 작은 td 태그 스타일 변경
     $("td:lt(4)").css("color", "red");

     // h1, h2, h3과 같은 헤더 태그 스타일 변경
     $(":header").css({ background:'#CCC', color:'blue' });

     // 애니메이션이 동작하고 있는 것만 스타일 변경
               :
         <script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
         <script type="text/javascript">
           $(document).ready(function(){
              $("#run").click(function(){
                 $("div:animated").toggleClass("colored");
               });
               function animateIt() {
                 $("#mover").slideToggle("slow", animateIt);
               }
               animateIt();
           });
        </script>
       <style>
          div {background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left;}
          div.colored {background:green;}
       </style>
             :
       <button id="run">Run</button>
       <div></div>
       <div id="mover"></div>
       <div></div>

 ο 내용 필터 셀렉터 
   - :contains(text) : 지정된 text 내용을 포함하는 엘리먼트 선택
   - :empty : 자식을 가지지 않은 엘리먼트 선택
   - :has(selector) : 지정된 selector와 일치되는 엘리먼트를 포함하는 엘리먼트 선택
   - :parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택
 
   - 사용예
     // div 태그 안의 text에 Han이 포함된 text의 스타일 변경
     $("div:contains('Han')").css("text-decoration", "underline");

     // 내용이 없는 td 태그에 text를 추가하고 스타일 변경
     $("td:empty").text("테스트 !!!").css('background', 'rgb(255,220,200)');

     // div 태그 안의 p 태그에 class 속성에 test 클래스 설정
     $("div:has(p)").addClass("test");

     // td 태그에 값이 존재하는 경우 애니메이션효과 부여(주어진 것이 부모인 것을 모두 받아온다. 비어있는 것은 포함 안함)
     $("td:parent").fadeTo(1500, 0.3);

 ο 가시 필터 셀렉터 
   - :hidden : 감춰진(hidden) 엘리먼트 선택
   - :visible : 보이는(visible) 엘리먼트 선택

   - 사용예
     // hidden 속성인 div 태그를 보이게 함
     $("div:hidden").show(3000);
           :
     <div style="display:none;width:70px; height:40px; background:#ee77ff; margin:5px; float:left;">테스트 !!!</div>

     // 보이는 div 태그를 클릭 할 경우 스타일 변경
     $("div:visible").click(function () {
         $(this).css("background", "yellow");
     });

 ο 속성 필터 셀렉터 
   - [attribute] : 지정된 속성(attribute)를 가지는 엘리먼트 선택
   - [attribute=value] : 지정된 속성(attribute)과 값(valu)을 가지는 엘리먼트 선택
   - [attribute!=value] : 지정된 속성과 같지않거나 지정된 속성 값을 가지지않는 엘리먼트 선택
   - [attribute^=value] : 지정한 값으로 시작하는  속성을 가진 엘리먼트 선택
   - [attribute$=value] : 지정한 값으로 끝나는  속성을 가진 엘리먼트 선택
   - [attribute*=value] : 지정한 값을 포함하는  속성을 가진 모든 엘리먼트 선택
   - [attributeFilter1][attributeFilter2][attributeFilterN] : 지정한 속성 필터 셀럭터와 일치하는 모든 엘리먼트 선택

   - 사용 예 
     // input 객체의 name 속성이 test인 모든 input 객체 다음 객체의 text를 변경
     $("input[name='test']").next().text("테스트 !!!");
           :
     <input type="radio" name="test" value="1" />
     <span>name?</span>
     <input type="radio" name="test" value="2" />
     <span>name?</span>
     <input type="checkbox" name="ch" value="3" />
     <span>man?</span>

     // input 객체의 name 속성이 test가 아닌 모든 input 객체 다음 객체의 text를 변경
     $("input[name!='test']").next().text("남자 ?");
           :
     <input type="radio" name="test" value="1" />
     <span>name?</span>
     <input type="radio" name="test" value="2" />
     <span>name?</span>
     <input type="checkbox" name="ch" value="3" />
     <span>man?</span>

     // input 객체의 name 속성이 news로 시작하는 객체의 value 속성 값 설정
     $("input[name^='news']").val("abc !");

     // input 객체의 name 속성이 letter로 끝나는 객체의 value 속성 값 설정
     $("input[name$='letter']").val("a letter");

     // input 객체의 name 속성이 man을 포함하는 모든 객체의 value 속성 값 설정
     $("input[name*='man']").val("man !!!");

 ο 자식 필터 셀렉터 
   - :nth-child(index/even/odd/equation) : N/짝수/홀수/수식에 따른 번째 자식 엘리먼트 선택 
   - :first-child : 첫 번째 자식 엘리먼트 선택
   - :last-child : 마지막 자식 엘리먼트 선택
   - :only-child : 동기(형제)가 없는 자식 엘리먼트 선택

 ο 폼 셀렉터
   - :input : 모든 input, textarea, select, button 요소 선택
   - :text : text 타입의 모든 input 요소 선택
   - :password : password 타입의 모든 input 요소 선택
   - :radio : radio 타입의 모든 input 요소 선택
   - :checkbox : checkbox 타입의 모든 input 요소 선택
   - :submit : submit 타입의 모든 input 요소 선택
   - :image : image 타입의 모든 input 요소 선택
   - :reset : reset 타입의 모든 input 요소 선택
   - :button 모든 button 요소들 및 button 타입의 input 요소 선택
   - :file : file 타입의 모든 input 요소 선택
   - :hidden : hidden 상태인 모든 요소 선택

 ο 폼 필터 셀렉터
   - :enabled : 현재 enable 상태인 모든 요소 선택
   - :disabled : 현재 disable 상태인 모든 요소 선택
   - :checked : 체크된 모든 요소 선택
   - :selected : 선택된 모든 요소 선택

출처 - http://blog.daum.net/kitepc/550