jQuery

 

jQuery 의 셀렉터

 

  • 셀렉터
  • jQuery 는 강력한 Selectors를 제공한다. 우리는 개발을 하다 보면 엘리먼트 하나 또는 엘리먼트 집합을 선택하고 다뤄야 하는 일이 많다. 이런한 경우에 집합 그룹을 쉽고 편리하게 얻을 수 있는 방법으로 Selectors를 제공 하는 것이다.

  • 셀렉터의 종류

    1. 기본 CSS 셀렉터
    2. 자식 셀렉터, 컨테이너 셀렉터, 어트리뷰트 셀렉터
    3. 위치로 선택하기
    4. jQuery 정의 셀렉터 사용하기
  • 기본 CSS 셀렉터
  1. $("p a.specialClass")

위 소스와 같은 형식은 CSS를 좀 해보심 분들이라면 한번쯤? 보셨을 겁니다. CSS에서 특정 엘리먼트에 대한 스타일을 정의할때 많이 사용하는 방법입니다. jQuery에서도 이와 같은 셀렉터를 사용 가능 합니다.

  1. a 또는 p 또는 div  - 는 모든 링크(<a>) 엘리먼트 또는 (<p>)엘리먼트 또는 (<div>)엘리먼트를 뜻합니다.
  2. #specialID  - 는 specialID를 아이디로 가지고 있는 엘리먼트와 일치 하는 셀렉터 입니다.
  3. .specialClass - 는 specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터 입니다.
  4. a#specialID.specialClass -  아이디가 specialID이고 specialClass를 클래스로 가지는 링크와 일치하는 셀렉터이다.
  5. p a.specialClass - <p> 엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든 링크와 일치하는 셀렉터이다. 
  • jQuery 에서 가장 중요한 부분이 셀렉터가 아닌가 싶다. 다시 쉽게 설명한다면 javascript를 코딩할때 특정 div 또는 특정 input를 선택해야 할때가 있다. 그 이유는 input 엘리먼트의 값을 얻어 오거나 div에 innerHTML로 값을 넣기 위에 해당 엘리먼트를 자바스크립트내에 obj 형태로 얻어 와야 하는 것이다.
  1. <script language="javascript">
        var value = document.getElementById('inputName').value;
    1. alert( value );
  2. </script>

기존에는 이런 식으로 inputName을 선택해서 그 value값을 얻어왔을 것이다. 하지만 jQuery의 css셀렉터를 이용한다면

  1. <script language="javascript">
  2. var value = $('#inputName').val();
  3. alert( value );
  4. </script>

이런 식으로 엘리먼트를 얻어 올 수 있다는 것이다. 지금은 하나의 엘리먼트를 얻어 오는 부분 이였지만 배열 및 반복된 작업을 할때는 소스 코드를 엄청나게 줄여 주게 된다. 

  • 셀렉터 예제를 쉽게 테스트해 볼수 있는 소스 코드를 받아 보도록 하자 [여기]  jqia.source.zip

http://www.manning.com/jQueryinAction 에서 다운 받아 테스트 할 수 있다.

다운 받은 소스를 사용 하셔도 되고요! 일단 http://gisung2.cafe24.com/jquery/chapter2/lab.selectors.html 이곳에서 셀렉터 예제는 테스트 가능 합니다.

예제 : http://gisung2.cafe24.com/jquery/chapter2/lab.selectors.html 

  • 자식 셀렉터, 컨테이너 셀렉터

  1. <ul class="myList">
      <li><a href="http://jquery.com">jQuery supports</a>
        <ul>
          <li><a href="css1">CSS1</a></li>
          <li><a href="css2">CSS2</a></li>
          <li><a href="css3">CSS3</a></li>
          <li>Basic XPath</li>
        </ul>
      </li>
      <li>jQuery also supports
        <ul>
          <li>Custom selectors</li>
          <li>Form selectors</li>
        </ul>
      </li>
    </ul>

위와 같은 소스에서 우리가 붉은색만을 얻어 오고 싶을때  $('ul.myList li a') 와 같은 형식으로 셀렉터를 시도할 것이다. 여기서 문제는 하나의 a 엘리먼트가 아니가 세개 모두 얻어 올 것이다. 이러한 문제는 자식 셀렉터로 해결 가능하다.

  1. jQuery statement: $("ul.myList li a")             기본 CSS셀렉터
  2. jQuery statement: $("ul.myList > li > a")         자식 셀렉터 사용

위처럼 자식 셀렉터(child selector)은 오른쪽 부등호(>)로 구분한다. 위 소스 내용은 myList라는 클래스를 갖고 있는 ul엘리먼트의 첫번째 li 엘리먼드의 첫번째 a 엘리먼트란 뜻이다.

 

  • 어트리뷰트 셀렉터(attribute selector) (강력함)

어 트리뷰트 셀렉터는 매우 강력한 능력을 갖고 있다. 예를 들어 <a> 에서 href 속성의 값으로 http:// 로 시작하는 링크에만 특정 class를 적용하고 싶을 경우 기존의 저 스크립트 방식 이였다면 일일이 엘리먼트에 class를 주거나 스크립트에서 id를 참조 하여 일일이 작업해 주어야 했을 것이다.  하지만 어드리 뷰트 셀렉터를 사용한다면 이렇게 마무리 된다. 

  1. jQuery statement: $("a[href^=http://]")

대박이다!  위 처럼 한줄로 모든 http://로 시작하는 링크를 참조 할 수 있는 것이다.  어트리뷰트 셀렉터는 속성의 값과 상관없이 속성을 갖고 있기만 해도 참조가 가능하다. 

  1. jQuery statement: $("form[method]")

이렇게 하면 method 속설을 갖고 있는 form 엘리먼트를 찾게 되는 것이다. 또는 이렇게? 

  1. jQuery statement: $("input[type=text]")

이 렇게 하면 type속성 값이 text인 input 엘리먼트를 모조리다 참조 할 수 있는 것이다. 페이지에 input 가 100개 있다고 하자 이 모든 놈들은 저 코딩 할줄로 참조 할수 있다는 말이다^^; 대박..대박.. 어트리뷰터 셀렉터에서는 약간의 정규식을 사용할 수 있다. 간단하게 설명한다. 

  1. div[title^=my]         //대박
  2. a[href=$=.pdf]         //대박
  3. a[href*=jquery.com]    //쩌름 대박

먼 저 ^ 는 시작값을 뜻하는 것이고 $ 는 마지막 값을 * 는 임의의 문자열을 포함한다라는 뜻이다. 기억 하는가 예전에는 임의의 문자열을 찾을려면 indexOf로 쫄로리 값을 찾아야 했으나 a[href*=jquery.com] 이거 한방으로 된다는거^^; 가이 대단한다.

 

  • 컨테이너 셀렉터(container selector)
  1. jQuery statement: $("li:has(a)")

a 엘리먼트를 포함하는 모든 li엘리먼트와 일치할 것이다.

 

  • jQuery가 지원하는 기본 CSS 셀렉터
    셀렉터 설명
    * 모든 엘리먼트와 일치
    E 태그명이 E인 모든 엘리먼트와 일치
    E F E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
    E>F E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
    E+F E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
    E~F E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
    E:has(F) 태그명이 F인 자손을 하나 이상 가지는 태크명이 E인 모든 엘리먼트와 일치
    E.C 클래스명 C를 가지는 모든 엘리먼트E와 일치. E의 생략은 *.C와 동일함
    E#ID 아이디가 ID인 엘리먼트 E와 일치, E의 생략은 *#ID와 일치
    E[A] 어트리뷰터 A를 가지는 모든 엘리먼트 E와 일치
    E[A=V] 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
    E[A^=V] 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

    E[A$=V]

    E[A*=V]

    값이 V로 끝나는 어트리뷰터트 A를 가지는 모든 엘리먼트 E와 일치

    값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

  • 위치로 선택하기
  • 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택해야 할 때가 있다. 첫 번째 엘리먼트만 선택한다던지, 또는 리스트에서 홀수 짝수만 선택해야 하는 경우가 그렇다고 하겠다.
  1. jQuery statement: $("a:first")

위 셀렉터는 페이지에서 첫번째 <a> 엘리먼트와 일치한다.

  1. jQuery statement: $("p:odd")

위셀렉터는 모든 홀수 번째 문단(<p>) 엘리먼트와 일치한다. 짝수는 아래와 같다.

  1. jQuery statement: $("p:even")

 

  • jQuery가 지원하는 고급 위치 기반 셀렉터. DOM에서 위치를 기반으로 엘리먼트를 선택한다.
    셀렉터 설명
    :first 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
    :last 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링키를 반환한다.
    :first-child 첫 번째 자식 엘리먼트. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.
    :last-child 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
    :only-child 형제가 없는 모든 엘리먼트를 반환한다.
    :nth-child(n) n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.
    :nth-child(even|old) 짝수 또는 홀수 자식 엘리먼트. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
    :nth-child(Xn+Y)

    전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능하다.

    li:nth-child(3n)은 3의 배수 번째 아이템을 반환한다.

    li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환한다.

    :even / :odd 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even 은 모든 짝수 번째 아이템을 반환한다.
    :eq(n) n번째로 일치하는 엘리먼트
    :gt(n) n번째 엘리먼트(포함하지 않음) 이후의 엘리먼트와 일치
    :lt(n) n번째 엘리먼트(포함하지 않음) 이전의 엘리먼트와 일치

다른 셀렉터는 인덱스가 0부터 시작 하지만 n번째 자식 셀렉터는 1부터 시작된다.

 

  • jQuery 정의 셀렉터 사용하기
  • 어 트리뷰트를 이용하는 방식은 컨트롤(체크박스)의 초기 상태밖에 확인하지 못하므로 jQuery는 jQuery 정의 셀렉터인 :checked를 제공한다. :checked 셀렉터는 일치하는 엘리먼트 중 선택 상태인 엘리먼트만 필터링해 남겨 둔다.
  1. :checkbox:checked:enabled         //대박
  2. jQuery statement: $(":checkbox:checked:enabled")

위 코딩은 enabled되어 있는 checkbox중에서 체크되어 있는 엘리먼트만 일치시킬 수 있는 것이다. 대박인 것이다.

 

  • jQuery 정의 필터 셀렉터. 대상 엘리먼트를 식별해내는 데 강력한 기능을 준다.
    셀렉터 설명
    :animated 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
    :button 모든 버튼을 선택한다.(input[type=submit], input[type=reset], input[type=button], button)
    :checkbox 체크박스 엘리먼트만 선택한다
    :checked 선택된 체크박스나 라디오 버튼만을 선택한다.(CSS에서 지원)
    :contains(foo) 텍스트 foo를 포함하는 엘리먼트만 선택
    :disabled 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.(CSS에서 지원)
    :enabled 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.(CSS에서 지원)
    :file 모든 파일 엘리먼트를 선택한다.(input[type=file])
    :header 헤더 엘리먼트만 선택한다. 예를 들어<h1>부터 <h6>까지의 엘리먼트를 선택한다.
    :hidden 감춰진 엘리먼트만 선택한다.
    :image 폼 이미지를 선택한다. (input[type=image])
    :input 폼 엘리먼트만 선택한다.(input, select, textarea, button)
    :not(filter) 필터의 값을 반대로 변경한다.
    :parent 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
    :password 패스워드 엘리먼트만 선택한다.(input[type=password])
    :radio 라디오 버튼 엘리먼트만 선택한다.(input[type=radio])
    :reset 리셋 버튼을 선택한다.(input[type=reset] 이나 button[type=reset])
    :selected 선택된 엘리만트만 선택한다.
    :submit 전송 버튼을 선택한다.(button[type=submit] 이나 input[type=submit])
    :text 텍스트 엘리먼트만 선택한다.(input[type=text])
    :visible 보이는(visible) 엘리먼트만 선택한다.

 

  • not 필터 사용하기

    위 필터를 반대로 적용하고 싶다면 not 필터를 사용하면 된다.

  1. jQuery statement: $("input:not(:checked) ")

checked 되지 않은 모든 input 를 반환한다. 한가지 유의할 것은 :not 필터안에서는 찾기셀렉터는 들어 갈수 없다는 것이다. $(" input:not(#idName:checked) ") 이런식으로 찾기 셀렉터는 들어 갈 수 없다.

 

 

 

+ Recent posts

티스토리툴바