개발자 노트

jQuery선택자

I. 서론

jQuery JavaScript Library의 선택자에 대하여 알아보겠습니다.

오늘의 아젠다 나와주세요.

• jQuery 선택자는 무엇인가?

• jQuery 선택자의 유형

  • 기본 CSS형 선택자
  • 위치형 선택자
  • 사용자 정의형 선택자

• 매칭 세트 메서드

  • 새로운 요소 추가 매칭하기
  • 매칭 세트에서 요소 제외 후 매칭하기
  • 자손들 중 원하는 요소 찾기
  • 매칭 세트 걸러내기
  • 요소의 인덱스로 매칭 세트 만들기
  • 요소간 관계로 매칭하기
  • 요소 변형하기
  • 체이닝 컨트롤하기

※ 본 문서는 jQuery Selectors RefCardz of Bear Bibeault & Yehuda Katz를 정리한 것임을 알립니다.

II. 본론

1) jQuery 선택자는 무엇인가?

jQuery 선택자는 jQuery 라이브러리를 사용함에 있어서 가장 중요한 것 중의 하나 입니다.

개발자는 이러한 CSS문법과 유사한 선택자들을 사용하여 페이지의 요소를 쉽고 빠르게 구분할 수 있습니다.

jQuery 선택자를 이해하는 것은 jQuery라이브러리 활용의 핵심입니다.

jQuery는 일반적으로 다음과 같은 문법 패턴을 따릅니다.

1. $(selector).methodName();

선택자는 문자열 표현으로 작성하며 DOM 요소들을 구분하고 jQuery 메서드로 해당 요소를 조작합니다.

jQuery는 다음과 같은 체인 기능을 지원합니다.

1. $(selector).method1().method2().method3();

예를 들어 말하자면 다음과 같이 goAway라는 id를 가진 DOM 요소를 감추고 incognito라는 클래스를 더할 수 있습니다.

1. $('#goAway').hide().addClass('incognito');

Hot Tip : 래퍼 세트의 요소들을 직접 접근하고 싶은 경우는 다음과 같이 배열의 인덱스를 사용할 수 있습니다.(img요소들 중 첫번째 요소를 element변수에 할당합니다.)

1. var element = $('img')[0];

2) jQuery 선택자의 유형

jQuery의 선택자 유형은 세가지가 있습니다.

1. 기본 CSS형 선택자

2. 위치형 선택자

3. 사용자 정의형 선택자

기본 선택자는 "find Selectors"라고도 하며 DOM에서 요소를 찾는 방식입니다.

위치및 사용자 정의형은 "filter Selectors"라고도 하며 기본적으로 DOM의 모든 요소 세트에서원하는 요소 세트를 필터링하는 방식입니다.

• 기본 CSS형 선택자

  기본 CSS형 선택자는 CSS3 표준 문법을 따르고 시멘틱합니다.

  문법	설명
  *	모든 요소와 매칭
  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요소와 매칭 (*.c나 .c와 같음)
  E#i	i라는 아이디를 가진 E요소와 매칭 (*#i나 #i와 같음)
  E[@a]	a라는 속성을 가진 E요소와 매칭
  E[@a=v]	a속성값이 v인 E요소와 매칭
  E[@a^=v]	a속성값이 v로 시작하는 E요소와 매칭
  E[@a$=v]	a속성값이 v로 끝나는 E요소와 매칭
  E[@a*=v]	a속성값이 v를 포함하는 E요소와 매칭

Hot Tip : 하나의 $()에 콤마(,)를 사용하여 여러 요소를 접근할 수 있습니다.

div와 p요소를 선택하고자 한다면

1. $('div,p')

id속성을 가진 div와 alt속성을 가진 img 요소를 선택하고자 한다면

1. $('div[id], img[alt]')

처럼 작성할 수 있습니다.

• 위치형 선택자

                  위치형 선택자는 요소들간의 위치 관계로 요소에 접근하는 방식입니다.

Hot Tip : :nth-child 선택자는 1부터 시작되는 반면에 :eq, :gt, :lt 선택자는 0부터 시작됩니다.

• 사용자 정의형 선택자

사용자 정의형 선택자는 CSS명세를 따르지는 않지만 보다 쉽게 요소들을 매칭시키기 위한 것입니다.

또한 위치형 선택자처럼 B로 표기된 매칭 세트를 필터링하는 방식이며 B표기를 제외하면 모든 요소가 대상이 되고,

결합형태로 사용하면 더욱 강력하게 사용 할 수 있습니다.

3) 매칭 세트 메서드

앞선 jQuery 선택자들은 DOM 요소들을 구별하는데 있어 탁월한 유연함을 보여주지만 가끔은 선택자만으로 원하는 요소를 구별해 낼 수 없을 경우가 있습니다.

매칭 세트 메서드는 체이닝 기능을 사용해 매우 유용하게 활용 할 수 있습니다. 원하는 요소들을 추가/삭제 선택 가능한 것이죠.

• 새로운 요소 추가 매칭하기

매칭하기 위한 새로운 요소를 추가 할 경우 사용하는 메서드 입니다.

다음 코드는 모든 div 요소와 p 요소의 글자색상을 빨란색으로 설정합니다.

1. $('div').add('p').css('color' ,'red');

혹자는 다음과 같이 사용하면 되지 않냐고 합니다.

1. $('div, p').css('color', 'red');

맞습니다. 그러나 다음과 같은 코드를 살펴보면 이 메서드의 활용가치를 알게 될 것 입니다.

코드를 살펴보면 우선적으로 모든 div 요소의 글자굵기를 굵게 한 후 모든 div 요소와 p 요소에 대해 글자색상을 빨간색으로 설정함을 알 수 있습니다.

1. $('div').css('font-weight', 'bold').add('p').css('color', 'red');

jQuery 체이닝 메서드는 긴 스크립트에서도 다음과 같이 작성할 수 있어 가독성을 높일 수 있습니다.

1. $('div')

2. .css('font-weight', 'bold')

3. .add('p')

4. .css('color', 'red');

• 매칭 세트에서 요소 제외 후 매칭하기

이미 매칭 세트에서 원하지 않는 요소를 제외 한 후 매칭하는 메서드 입니다.

다음 코드는 body요소의 하위 모든 요소들의 글자굵기를 굵게하고 p요소렐 제외 한 모든 요소에 대해 글자색상을 빨간색으로 설정합니다.

1. $('body *').css('font-weight', 'bold')

2. .not('p').css('color', 'red');

• 자손들 중 원하는 요소 찾기

이미 구분해 놓은 요소의 자손들 중에 원하는 요소가 있을 경우 매칭하는 메서드 입니다.

다음 코드는 모든 div 요소의 배경색을 파란색으로 변경하고 그 자손들 중 img 요소에 대하여 테두리를 설정합니다.

1. $('div').css('background-color', 'blue')

2. .find('img').css('border', '1px solid red');

• 매칭 세트 걸러내기

다음 코드는  bashful클래스를 가진 요소를 보여주고 src속성값이 gif로 끝나는 img요소의 title속성값을 Hi there!로 설정합니다.

1. $(.bashful).show()

2. .filter('img[@src$=.gif]').attr('title', 'Hi there!');

다음 코드는 src속성값이 images/로 시작하는 img요소중 title속성값에 @.com이 있으면 해당 요소를 숨깁니다.

1. $('img[@src^=images/]').filter(function() {

2. return $(this).attr('title').match(/.+@/+\.com/) != null;

3. })

4. .hide();

• 요소의 인덱스로 매칭 세트 만들기

다음 코드는 body의 모든 자손 요소 중 2번째 요소부터 모두 감춥니다.

1. $('body *').slice(2).hide();

다음 코드는 body의 모든 자손 요소 중 2번째부터 4번째 요소까지 감춥니다.

1. $('body *').slice(2, 5).hide();

다음 코드는 body의 모든 자손 요소 중 2번째 요소만 감춥니다.

1. $('body *').slice(2, 3).hide();

위의 코드는 다음과 같이 짧게 작성 할 수도 있습니다. eq(n)은 slice(n, n+1)과 같다는 것을 알 수 있습니다.

1. $('body *').eq(2).hide();

• 요소간 관계로 매칭하기

• 요소 변형하기

가끔 매칭된 요소를 다른 값들로 변형하고자 할 경우 map() 메서드를 사용합니다.

다음코드는 myForm이라는 id를 가지는 요소의 자손요소 중 input인 요소의 value값을 values변수(array)에 할당합니다.

1. var values = $('#myForm :input').map(function() {

2. return $(this).val();

3. });

Hot Tip : map() 함수는 jQuery객체의 인스턴스를 반환합니다. 일반 자바스크립트 배열로 변경하고 싶을 경우는 인자값이 없는 get() 메서드를 사용하면 됩니다.

1. var values = $('#myForm :input').map(function() {

2. return $(this).val();

3. }).get();

• 체이닝 컨트롤하기

원하는 요소를 찾기 위해 여러번 매칭 세트를 생성할 경우 체이닝을 컨트롤 하여 매칭 세트의 탐색을 조금 더 편리하게 할 수 있습니다.

다음 코드는 div요소의 자손 중 p요소를 찾은 후 div요소에 테두리를 설정합니다.

1.           $('div').find('p').end().css('border', '1px solid black');          

end()메서드는 마지막 매칭 세트 이전의 매칭 세트로 가리키게 됩니다.

다음 코드는 div요소의 자손 중 p요소를 찾 은 후 두개의 요소 모두에 테두리를 설정합니다.

1.           $('div').find('p').andSelf().css('border', '1px solid black');          

andSelf()메서드는 마지막 매칭 세트 이전의 매칭 세트와 현재의 매칭 세트를 가리키게 됩니다.

III. 결론

현재 수 많은 자바스크립트 라이브러리가 나와 있습니다. 최근 한 보고서를 보면 prototype.js와 비등할 정도로 jQuery의 수요가 급증하고 있습니다.

이는 jQuery의 용이성과 성능 측면을 입증한 것이라 생각합니다.

jQuery의 핵심인 jQuery 선택자를 알아봤으니 여러분도 한 번 jQuery를 사용해 보시는건 어떨지요?

참고문헌

• jQuery Selectors RefCardz of Bear Bibeault & Yehuda Katz
• jQuery in Action
• http://docs.jquery.com/Selectors