jQuery란 무엇인가?
지난 몇 년간 동안에 RIA와 Ajax기술 등에 의해 자바스크립트는 그 위신을 높이게 되었다.
이런 부각된 기술을 사용하기 편하게 하기 위해 자바스크립트 라이브러리가 등장하게 되었는데,
이로 인해 항상 문제가 되던 크로스 브라우저 문제가 해결되고, 새로운 패러다임을 제시하게 된다.
이러한 라이브러리 중 jQuery는 다소 늦게 등장하였으나 그 만의 간결하고도 강력한 기능에 의해
많은 사이트에서 채택되어 사용되고 있다.
왜 jQuery인가?
페이지에 동적인 기능을 추가하다 보면 엘리먼트 하나나 엘리먼트 그룹을 선택하여, 이들을 이용해
원하는 작업을 수행하는 방식의 패턴을 반복해서 따르고 있다. 선택된 엘리먼트를 페이지에서 감추거나
드러내고, 해당 엘리먼트에 CSS 클래스를 추가하거나 애니메이션 효과를 적용하며, 엘리먼트의 속성을
수정한다. 이런 일에 저 수준의 자바스크립트를 이용하여 직접 코드를 작성한다면, 작업마다 코드를
수십 줄은 작성해야 한다.
예를 들어 디자이너가 행간의 색상이 대비되는 얼룩무늬 형태의 테이블을 만든다고 할때, 자바스크립트를
이용하면 코드를 열 줄 이상 작성해야 한다. 다음은 동일한 내용을 jQuery로 작성한 결과이다.(예제보기)
| $("table tr:nth-child(even)").addClass("striped"); |
처음 보는 코드를 당장은 이해하기 힘들겠지만, 차차 이에 대해 알아보겠고, 이처럼 간결한 코드를 사용하여
효율적인 웹 개발을 할 수 있게 해주는 것이 jQuery인 것이다.
jQuery() 함수
jQuery는 HTML 페이지의 엘리먼트를 조회한 다음 그 결과를 이용하여 사용자가 원하는 동작을 수행하는 데 중점을 둔다.
우리는 이미 CSS에서 엘리먼트의 위치를 통해 엘리먼트 그룹을 가르키는 셀렉터(선택자)에 대해 알고 있을 것이다.
jQuery를 이용하면 이를 더욱 단순하게 유지할 수 있게 된다.
우선 다음의 셀렉터를 보자.
| p a |
이것은 단락 엘리먼트에 포함된 모든 링크의 그룹을 참조한다. jQuery 또한 이와 동일한 선택자를 사용한다.
이런 일반적인 CSS선택자 외에도 전 예제에서 살펴본 것 같이 n번째 자식 선택자가 CSS3가 정의한 강력한 셀렉터의 좋은 예이다.
엘리멘트의 그룹을 찾기 위해 다음과 같이 단순한 문법을 사용한다.
$(selector)
// or
jQuery(selector)
그렇다면 아까의 예를 jQuery 방식으로 나타내게 되면 $("p a")으로 표기할 수 있겠다.
이렇게 선택된 엘리먼트 그룹에 함수를 이용한다든지 새로운 CSS 클래스를 추가할 때는 다음과 같이 작성한다.
| $("div.notLongForThisWorld").fadeOut().addClass("removed"); |
위의 예제는 div중 클래스가 notLongForThisWorld인 엘리먼트를 페이드아웃(fadeOut)하고,
이와 함께 CSS 클래스인 removed를 추가하는 것이다.
이제 jQuery의 기초에 대해선 이정도면 살펴보고, 자세한 내용에 대해 다음 장에서 다루어 보자.
