jQuery로 요소 선택하기

jQuery의 핵심은 어떤문서에서 이름,어트리뷰트 상태 등을 기반으로 하여 요소를 선택가능 하게 하는 selector 엔진이다. css는 이미 대중적이기에, jQuery에서 요소를 쉽게 선택하도록 하기 위해 selector 문법을 채택한 것은 현명한 결정이다.

jQuery('#content p a') : #content 안에 있는 모든 단락(p 태그) 요소 내의 모든 앵커(a 태그) 요소를 선택한다.
셀렉터를 작서앟는 경우 최적화를 위한 개략적인 규칙이 있는데, 이는 가능한 명확하게 기술하라다.
셀렉터가 복잡하면 복잡할수로 jQuery가 문자열을 처리하는 데 더 많은 시간이 걸린다!

1. 직속 자식 요소 찾기
   직속 자손 결합자 '>' 를 사용.
   jQuery('#nav li > a') 는 id가 nav 안에 'li' 태그안에 'a' 인 태그를 선택하게 될것이다.
   이외에도 child() 및 find() 등을 써서 찾을 수 있을 것이다.
   그중 가장 빠른건 child() 메서드가 가장 빨리 찾는다
2. 특정 형제들 선택하기
   jQuery('h1 + h2') 는 h1 다음 바로 h2 인 것만 선택하게 된다.
   jQuery('li.selected ~ li') li.selected 뒤에 나오는 모든 li 태그를 항목으로 선택
   next() , nextAll() 로도 형제들을 선택 할 수 있다.
3. 인덱스 순서로 요소 선택하기 [filter들]
   :first == 첫번째 선택 요소와 일치
   :last == 마지막 선택요소와 일치
   :even == 짝수 요소와 일치 (0부터 인덱스)
   :odd == 홀수 요소와 일치 (0부터 인덱스)
   :eq(n) == (n)번째 인덱스에 해당하는 단일 요소와 일치
   :lt(n) == n번째보다 밑[ 숫자 2이면 0~1 ]에 있는 모든 요소와 일치
   :gt(n) == n번째보다 위[ 숫자 2이면 3~ ]에 있는 모든 요소와 일치
   
   리스트의 첫번째 항목을 선택하는 다양한 방법
   jQuery('ol li:first') == jQuery('ol li:eq(0)') == jQuery('ol li:lt)
4. 현재 애니메이션 중인 요소 선택하기
   jQuery('div:animated');
   jQuery( 'div:not(div:animated)' ).animated({height:100});와 같이 에니메이션이 실행 되지 않고 있던 부분을 체크하여 실행할때 height 100 으로 키우는 방법을 쓸수도 있다.
5. 무엇을 포함하고 있는지에 따라 요소 선택하기
   :contains() == 대소문자를 구분하며, 텍스트 컨텐츠을 포함 하고 있는 항목을 선택한다.
   jQuery('div:has(p a)'); == 이 셀렉터는 <p> 태그에 <a>를 가지고 있는 모든 <div> 요소를 찾을 것이다.
6. 일치되지 않는 요소 선택하기
   jQuery('div:not(#content)');
7. 가시성을 기반으로 요소 선택하기
   :hidden , :visible
   jQuery('p:visible').hide(); == 현재 visible 인 요소만을 숨긴다.
8. 어트리뷰트 기반으로 요소 선택하기
   jQuery('a[href="http://google.com"]'); == href="http://google.com 인 항목만 선택
   [attr]  : 특정 어트리뷰트를 가지고 있는 요소와 일치
   [attr==val] : 지정된 어트리뷰트가 특정 값을 가지는 요소와 일치
   [attr!=val] : 지정된 어트리뷰트가 값을 갖지 않는 요소와 일치
   [attr^=val] : 지정된 어트리뷰트가 특정 값으로 시작하는 요소와 일치
   [attr$=val] : 지정된 어트리뷰트가 특정 값으로 끝나는 요소와 일치
   [attr~=val] : 공백과 함께 특정 값을 포함하는 요소와 일치(즉 car는 car와 일치하지만 cart와는 일치하지 않는다.
   jQuery('div[id^="content-sec-"]'); div 의 ID 가 content-sec- 로 시작하는 모든 항목
9. 형식에 따라 폼 요소 선택하기
   형식(hidden , text, checkbox 등)을 기반으로 폼 요소들을 선택할때
   

   jQuery 셀렉터 구문	선택하는것
   :text	<input type="text" />
   :password	<input type="password" />
   :radio	<input type="radio" />
   :checkbox	<input type="checkbox" />
   :submit	<input type="submit" />
   :image	<input type="image" />
   :reset	<input type="reset" />
   :button	<input type="button" />
   :file	<input type="file" />
   :hidden	<input type="hidden

   
   jQuery(':text'); == 모든 text 입력창에 선택할 필요가 있다면.
   jQuery(':input:not(:hidden)'); // hidden을 제외한 모든 input 요소를 선택
10. 특성을 갖는 요소 선택하기
    다양한 방법이 존재한다. 이는 jQuery로 요소를 선택할 때도 그렇다. 어던 방식을 선택하는 것이 좋은가라는 문제에서 중요한 부분은 보통 속도가 될것이다. 분명히 어떤 방법은 바르 고어떤 방법은 느릴테니 말이다. jQuery의 기본 메서드를 사용하는 것이 가끔은 단일 셀렉터를 사용하는 것 보다 빠를 수도 있다.
11. 컨텍스트 매개변수 사용하기
    컨텍스트란? jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소를 말한다.
    기본 컨텍스트는 DOM 계층에서 최상위 항목인 document 이다.
12. 사용자 정의 필터 셀렉터 만들기
    jQuery.expr[':'] 개체로 만들 수 있다. 이는 Sizzle.selectors.filters 에 대한 별칭이기도 하다
    jQuery.expr[':'].newFilter = function(elem , index , match){
        return true; // filter() 메서드 처럼 true/false 를 반환
    };
    
    jQuery.expr[':'].inline = function(elem){
        return jQuery(elem).css('display') === 'inline';
    }; 와 같이 사용자 정의 필터를 정의 할수 있다.

* jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
  상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요