JQuery

파일:Attachment/jQuery.png
공식 사이트
jQuery UI
jQuery Mobile

"write less, do more"

jQuery는 HTML 속 클라이언트 사이드 스크립트 언어를 단순화 하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다. 존 레식에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었다. 현재 가장 인기있는 JavaScript 라이브러리이며 표준에 가까운 점유율을 자랑한다.(참고)

기능적으로야 더 좋은 라이브러리들도 많지만, jQuery가 순식간에 업계를 장악한 특장점은 바로 무지하게 쉽고 간편하다는 점이다. 'write less, do more'가 모토로서 비프로그래머인 웹디자이너들도 어렵지않게 이해할 수 있을 만큼 쉬운 편이다. DOM구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할 정도다. 실제로 저자인 존 레식은 프로그래머들의 칭찬보다 순수 웹디자이너들의 감사 인사가 더 특별한 기쁨이라고 한다.

jQuery는 Behavial model(행동 모델)에 기초한 아키텍처를 따른다. 특히 jQuery는 메서드 체이닝을 통해 DOM엘리먼트를 조작한다. 예를 들어 기존에

<syntaxhighlight lang="javascript" line="1">
var a = document.getElementById("textNode");
a.style.color = "red";
var b = document.getElementById("someDiv");
b.appendChild(a);
</syntaxhighlight>
이렇게 했다면, jQuery에선 이렇게 한다.

<syntaxhighlight lang="javascript" line="1">
$("#textNode").css("color","red").appendTo("#someDiv");
</syntaxhighlight>

  • $("#textNode")
    $라는 함수에 인자로 "#textNode"를 넘겨주겠다는 JavaScript 구문이다. jQuery는 기본적으로 $를 함수 이름으로 사용한다.[1] $() 함수에 인자로 DOM selector를 넣어주면 해당하는 DOM 요소를 찾아 리턴해준다.
  • $("...").css("color","red") / $("...").css({"color":"red"})
    jQuery의 메소드들은 기본적으로 리턴하는 데이터의 자료형이 jQuery이고, 메소드를 사용할 때는 자료형이 jQuery인 값에 붙여서 호출하도록 설계되어 있다. 즉, $("...")를 호출하여 찾고자 하는 DOM 요소를(여기서는 id가 textNode인 요소) jQuery형으로 리턴받고 .css() 메소드를 호출하여 작업을 수행하는 것. 메소드 이름을 보면 알겠지만 .css("color","red")메소드는 대상의 css를 변경한다[2]. 그리고 변경한 DOM요소를 jQuery형으로 리턴한다. 후자의 경우는 JSON 문법으로 여러 속성을 한꺼번에 지정할 때 사용한다.
  • $("...").css("...","...").appendTo("#someDiv") / $("...").css({"...":"..."...}).appendTo("#someDiv")
    앞서 .css() 메소드로 색을 바꾸고 리턴한 요소에 .appendTo() 메소드를 적용하는 구문이다.

플루언트(Fluent) 인터페이스라고도 한다. 메서드의 반환값이 자기 자신의 참조가 되어 무한히 메서드를 이어붙일 수 있는 게 특징.

jQuery는 MIT 허가서와 GNU 일반 공중 사용 허가서 버전 2의 듀얼 라이선스를 가진 자유 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발이 쉽도록 디자인 되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. 덕분에 수많은 jQuery 플러그인들이 개발되어 있다.

워낙 많이 쓰다보니 JavaScript로 웹 개발을하는 개발자라면 당연히 jQuery를 쓴다고 생각하는 모양. 실제로도 경험이 부족한 개발자들이 jQuery가 없으면 간단한 DOM 조작도 어려워한다. jQuery는 JavaScript를 편하게 사용할 수 있게 지원하는 라이브러리이지 정식 언어가 아니다! 언제까지나 기초는 JavaScript임을 명심하고 기초를 튼튼히 하자. jQuery만 쓰게되면 이렇게 된다.[3]

마이크로소프트와 노키아는 자사 플랫폼에 jQuery를 포함하는 계획을 발표한 바 있다. 마이크로소프트는 비주얼 스튜디오의 ASP.NET AJAX 프레임워크와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 웹 위젯 개발 플랫폼에 통합하였다.

주요 웹 CMS나 위키위키에도 내장하는 경우가 많다. 미디어위키에도 1.16 버전부터 사용되고 있고, 그누보드나 XpressEngine도 이게 기본으로 들어가 있다.

프레임워크도 이거 기반인 경우가 많은데, HTML5 Boilerplate나 트위터 Bootstrap도 JQuery 기반으로 작동하는 것들이다.

jQuery Mobile이라는 물건도 있는데, 이것은 자바스크립트 라이브러리인 jQuery와는 달리 모바일 웹페이지나 HTML5 웹앱 등의 제작에 사용하는 웹 개발 프레임워크다.[4] HTML5 웹앱 프레임워크들이 대개 그렇듯 iOS, 안드로이드는 당연히 지원하고, Windows Phone, 블랙베리, 심비안 등 웬만한 기기는 다 지원한다.

jQuery는 다음과 같은 기능을 갖고 있다.

  • DOM 엘리먼트 선택
  • DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원)
  • 이벤트
  • CSS 조작[5]
  • 특수효과 및 애니메이션[6]
  • Ajax 및 JSON, XML 파싱
  • JavaScript 플러그인을 통한 확장성
  • 유틸리티 - 브라우저 종류와 버전,[7][8] "each" 함수[9]

jQuery는 1.x 버전과 2.x 버전의 2가지 종류가 있는데 기능은 동등하나 2.x 버전은 구형 브라우저 지원을 위한 레거시 코드를 삭제하여 용량이 작고 속도도 더 빠르다. Internet Explorer 8 이전 버전에서의 호환이 필요하다면 1.x를 사용해야 한다. 1.x 버전 중에서도 특히 1.9 버전은 하위 호환성이 떨어지는데, 1.9에서 삭제된 것들이 많기 때문이다. 이 때문에 연식이 좀 된 툴일 경우에는 호환성 문제 때문에 1.8 버전에서 머무는 경우가 많다. 1.9 버전 이상을 사용하면서 1.8 이하 버전의 호환성을 유지하려면 jQuery Migrate라는 플러그인을 사용하면 된다.

서버 사이드 JavaScript 엔진인 node.js용 jQuery도 있다. 클라이언트 사이드 jQuery와 비교해 코드가 약간 다르므로 서버 버전의 jQuery를 따로 찾아서 설치해야 한다. 역시 DOM 조작에 사용한다. 보통 복잡한 템플릿 코드를 서버 쪽에서 생성하거나 웹 크롤러를 만들 때 사용한다. 참고로 전혀 다른 언어지만 Go에서도 이것처럼 jQuery 문법에 따라 HTML 문서의 DOM 조작을 할 수 있게 만든 물건도 있다.[10]

jQuery를 대체할 목적으로 ZeptoJS 라는 게 만들어졌다. 코드 크기가 3분의 1정도라 로딩 속도가 빠르고 성능을 개선했다고 한다. 하지만 고성능을 위해 구형 브라우저 지원을 포기하고 일부 고차 함수 지원이 안된다. 일반 프로그래머 입장에서 고차 함수 미지원문제는 크게 심각하지 않을 수 있으나 플러그인 개발자에게는 민감할 수 있는 문제. jQuery 2 버전의 경우에는 ZeptoJS와 퍼포먼스의 차이가 그다지 없다고 한다.[11] 그리고 클라이언트 단의 사용자가 체감할 수 있는 퍼포먼스 차이가 얼마나 있는지는 더욱 의문인 만큼 jQuery를 대체하는 자바스크립트 라이브러리가 나올런지는 아직으로서는 미지수라고 할 수 있다.

2016년 6월 9일, jQuery 3.0이 정식 출시되었다.
  1. ↑ 기적의 호이스팅(변수나 함수를 먼저 사용하고 후에 선언문을 추가해도 제대로 돌아간다)이 생겨서 쥐도 새도 모르게 $를 재선언한다면 jQuery.noConflict()를 호출해서 $대신 jQuery()라는 함수를 사용해도 된다.
  2. ↑ 해당 DOM 요소에 style = "color:red;"를 적용
  3. ↑ 부연설명을 하자면, JavaScript에서 덧셈을 하는 방법을 묻고 있는데 댓글들은 뜬금없이 jQuery 사용하라고, jQuery가 최고라고 찬양하는 상황이고 그런 댓글들에 추천이 달려 있다. 그리고 맨 밑의 올바른 설명을 한 댓글은 jQuery 사용 안했다고 비추천이 달려 있다(...).
  4. ↑ 즉, 모바일 웹페이지에서 jQuery를 사용하려면 그냥 jQuery를 사용하는 것이지 jQuery Mobile를 사용하는 것이 아니다.
  5. ↑ 어디까지나 브라우저가 지원하는 것까지만. IE8 이하에서는 죽어라 border-radius 등을 줘도 안먹는다(...).
  6. ↑ 간단한 것만 가능하며 복잡한 애니메이션이 필요하다면 jQuery UI라는 확장기능을 사용해야 한다.
  7. ↑ IE, 모질라 파이어폭스, 오페라, 웹키트 등을 판별할 수 있다. 다만 1.9 버전 이후부터 삭제되었다. 굳이 사용하고 싶다면 jQuery Migrate라는 플러그인을 사용해야 한다. 이 플러그인은 구형 버전에서 지원되었으나 최신 버전에서 삭제된 함수를 사용 가능하게 해 준다.
  8. ↑ 삭제되었다기 보다는 플러그인으로 분리되어 나갔다고 보는게 더 옳다. migrate는 말 그대로 삭제된 기능을 되살리는 플러그인이고, 브라우저를 구분해주는 플러그인은 따로 있다. 플러그인으로 분리해 두지 않으면, 메인 jQuery자체가 버전업 되기 전까지는 새로 출시된 브라우져들을 지원할 수 없고, 역으로 브라우져 정보만 업데이트 되고 기능상 변경이 거의 없는데도 메인 버전이 올라가는 사태를 방지하기 위해서 분리되었다고 보는게 옳다.
  9. ↑ 배열이나 객체 등의 집합에서 요소를 차례로 훑는다.
  10. ↑ [1]
  11. ↑ ZeptoJS, jQuery 2의 DOM 엘리먼트 처리 벤치마크 [2] DOM 엘리먼트 처리 속도가 더 빠른 또다른 자바스크립트 라이브러리의 페이지다