jQuery 공부하기 – 1

jQuery는 “더적게 써서 (타이핑해서) 더 많은 일은 한다”는 취지로 만들어진 자바스크립트 프레임워크이다. 114kb라는 저용량에도 불구하고 상당히 많은 내용을 포함하고 있으며, 자바 스크립트를 통해 DOM을 제어할 때의 가장 귀찮은 점 두 가지 – 원하는 객체를 특정(selecting element)하는 일과 그 객체들에 대해 반복적으로 어떤 작업을 수행하는 것-를 매우 간단히 만들어줄 수 있다. 덕분에 jQuery를 사용하는 경우, 자바 스크립트 코드를 기존 대비해서 엄청나게 줄일 수 있다고 한다.

jQuery는 기본적으로 ‘선택자’를 사용하여 DOM 객체들을 골라올 수 있다. 기존 자바스크립트에서는 document 객체를 통해 id, 이름, 태그 이름, 클래스 이름을 기준으로 객체를 선택할 수 있었는데, jQuery에서는 기본적으로 CSS 선택자를 그대로 사용해서 원소(들)을 쉽게 선택할 수 있고, 선택한 각각의 원소에 대해 반복적인 작업을 쉽게 수행할 수 있다.

예를 들어, 문서의 모든 div 요소는 자바 스크립트로는 다음과 같이 선택이 가능한데,

var allDivs = document.getElementsByTagName('DIV');

위 구문으로 구한 결과물은 모든 DIV 요소를 원소로 가지는 배열이다. 따라서 이 들에 대해서 만약 css의 폰트 색상을 빨간색으로 바꾼다고 하면

var allDivs = document.getElementsByTagName('DIV');
for (var i=0;i < allDivs.length; i++) {
    allDivs.style.color = 'red';
}

비슷하게 코드를 쓰게 되는데… 이게  jQuery에서는 단 한줄로 표현된다.

$('div').css({'color':'red'});

$()는 선택자를 이용해서 DOM 요소를 검색하고 그에 해당하는 요소(들!)을 jQuery 객체로 포장해서 반환한다. ($는  jQuery의 줄임이다.) 게다가 jQuery 객체는 배열과 단독객체가 거의 구분되지 않는 것으로 보이며 (.is(Array) 구문을 통해 배열인지 아닌지는 구분할 수 있긴하다.) 이는 배열인 jQuery 객체의 어떤 메소드를 실행하면, 같은 메소드가 그 내부에 있는 모든 원소에 대해 동일하게 적용된다. 위의 예시에서도 볼 수 있듯이 css  속성을 업데이트하는 메소드를 사실상 ‘배열’인 jQuery 객체에서 호출하면, 자동적으로 배열에 포함된 모든 요소에 대해 동일한 메소드를 반복해서 적용하게 된다.

이러한 패턴은 자바스크립트 코드의 양을 획기적으로 줄일 수 있다. 게다가 간단한 페이드, 슬라이드 효과를 손쉽게 구현할 수 있기도 하다. 또한 대부분의 jQuery 메소드는 jQuery 객체를 리턴하는데, 적절한 리턴이 없을 거라 생각되는 메소드는 통상 객체 스스로를 리턴한다. 따라서   특정 동작을 실행하는 구문 뒤에 그 다음에 실행할 메소드를 연속적으로 써서 코드 길이를 줄일 수 있다. 다음은 이러한 예를 나타낸다.

$('p').hide().text('Newly Updated').show();

모든 p 엘레멘트에 대해서 숨김 처리를 한 후, 그 텍스트 내용을 Newly Updated로 바꾸고 다시 내용을 표시한다. 이 과정을 자바스크립트로 표현하는 건 꽤나 기나긴 과정을 요구한다.

var allPs = document.getElementsByTagName('P');
for (var aP in allPs) {
    aP.style.display = 'none';
}
for (var aP in allPs) {
    aP.innerHTML = 'Newly Updated';
}
for (var aP in allPs) {
    aP.style.display = 'block';
}

그나마 정수 값으로 for 루프를 돌리지 않아서 타이핑 양을 줄여서 쓴 코드임에도 길다. 하지만 jQuery 코드에서 살짝만 변경을 준다면, 그냥 자바스크립트로 구현하자니 머리가 살짝 아파오는 수준이 된다.

$('p').hide(1000).text('Newly Updated').show(1000);

위 코드는 1초간 모든 P 엘레멘트를 사라지게 하고 (높이가 줄어들면서 없어짐) 다시 텍스트를 바꿔서 1초간 나타나는 효과를 보인다. 제법 훌륭하다. 이걸 jQuery를 쓰지 않으려면…. 자세한 과정은 생략하겠다.

이처럼 간략히 살펴본 바대로 jQuery는 자바스크립트를 통해 문서객체모델에 대한 접근을 CSS 선택자를 통해 매우 편리하고 쉽게 만들어주며, 연속적인 변경 작업을 할 수 있도록 해 작성해야 하는 코드를 극적으로 줄여준다.

jQuery의 또하나의 강점은 CSS 변경을 통한 애니메이션을 손쉽게 구현할 수 있도록 해주는 것인데, 요 부분은 다음 기회에 다뤄보기로 하겠다. 성마른 사람은 다음 주소에서 jQuery에서 제공하는 애니메이션 및 시각 효과를 살펴보면 된다.

http://api.jquery.com/category/effects/