JQuery
1. 개요
jQuery는 존 레시그가 2006년 1월에 처음 개발한 자바스크립트 라이브러리이다. HTML 문서 탐색, 이벤트 처리, 애니메이션, AJAX 기능 등을 제공하며, CSS 선택자를 기반으로 DOM을 조작한다. 다양한 버전이 출시되었으며, 2010년대 초반 한국 웹 개발 생태계에서 널리 사용되었으나, React, Vue.js, Angular 등 새로운 프레임워크의 등장으로 사용 빈도가 감소하는 추세이다. jQuery는 `$` 함수와 `$.`로 시작하는 유틸리티 함수를 통해 인터페이스를 제공하며, 플러그인을 통한 확장성을 지원한다. 웹 페이지에 자바스크립트 파일로 포함하여 사용하며, CDN을 통해서도 배포된다. jQuery는 QUnit을 사용하여 테스트된다.
이미지 준비중입니다.
| 종류 | 자바스크립트 라이브러리 |
|---|---|
| 라이선스 | MIT 허가서 |
| 웹사이트 | jQuery 공식 웹사이트 |
| 원저자 | 존 레식 |
|---|---|
| 개발자 | jQuery 팀 |
| 프로그래밍 언어 | 자바스크립트 |
| 첫 번째 릴리스 | 2006년 8월 26일 |
|---|---|
| 최신 버전 | 3.7.1 |
| 최신 버전 릴리스 날짜 | 2023년 8월 28일 |
| 최신 미리보기 버전 | 4.0.0-beta.2 |
| 최신 미리보기 버전 릴리스 날짜 | 2024년 7월 17일 |
| 크기 | 27–274 KB |
|---|---|
| 플랫폼 | 브라우저 지원 섹션 참고 |
-
자바스크립트로 작성된 자유 소프트웨어 -
Node.js
Node.js는 라이언 달이 2009년에 개발한 자바스크립트 런타임 환경으로, 구글 크롬 V8 엔진을 기반으로 구축되었으며 이벤트 기반의 논블로킹 I/O 모델을 사용하여 확장성 있는 네트워크 애플리케이션 개발에 용이하고 웹 서버 및 네트워킹 도구 제작을 위한 다양한 코어 모듈과 npm을 통한 오픈 소스 라이브러리 활용을 제공한다. -
자바스크립트로 작성된 자유 소프트웨어 -
D3.js
D3.js는 웹 브라우저에서 데이터를 기반으로 동적인 시각화를 구현하기 위해 사용되는 자바스크립트 라이브러리로, SVG 요소 조작, 데이터-DOM 연결, 다양한 시각화 기능 및 API를 제공하여 복잡한 데이터 시각화를 효율적으로 구현하도록 돕는다. -
Ajax -
구글 문서도구
-
Ajax -
AngularJS
AngularJS는 동적 웹 애플리케이션 개발을 용이하게 하기 위해 설계된 오픈 소스 자바스크립트 프레임워크로, MVC 패턴 적용, 의존성 주입, HTML 확장 디렉티브 제공, 양방향 데이터 바인딩 등의 특징을 가지며, 장기 지원은 종료되었지만 웹 개발에 중요한 영향을 미쳤다. -
웹 프레임워크 -
드루팔
드루팔은 드리스 바이테르트가 개발하여 2001년 공개된 PHP 기반의 오픈 소스 콘텐츠 관리 시스템으로, 모듈과 테마를 통해 기능 확장이 가능하며 다양한 기관에서 활용되고 활발한 커뮤니티를 가지고 있다. -
웹 프레임워크 -
실버스트라이프 CMS
실버스트라이프 CMS는 PHP로 제작된 오픈 소스 콘텐츠 관리 시스템으로, 웹사이트 및 웹 애플리케이션을 개발하고 관리하는 데 사용되며, MVC 패턴과 Sapphire ORM 프레임워크를 활용하여 사용자 친화적이고 확장 가능한 플랫폼을 제공한다.
2. 역사
jQuery는 2006년 1월 존 레시그가 바캠프 뉴욕에서 처음 만들었으며, 딘 에드워드의 이전 cssQuery 라이브러리의 영향을 받았다. 현재 jQuery는 팀미 윌리슨을 중심으로 한 개발자 팀이 유지 관리하고 있으며, jQuery 선택자 엔진인 Sizzle은 리처드 깁슨이 이끌고 있다.
jQuery는 처음에는 CC BY-SA 2.5 라이선스로 배포되었으나, 2006년에 MIT 라이선스로 변경되었다. 2006년 말에는 GPL 및 MIT 라이선스의 이중 라이선스로 배포되면서 혼란이 발생하여, 2012년에 GPL이 삭제되고 현재는 MIT 라이선스만으로 배포되고 있다.
2.1. 개발 배경
존 레시그는 2006년 1월 바캠프 뉴욕에서 딘 에드워드의 cssQuery 라이브러리에 영향을 받아 jQuery를 처음 만들었다. 현재 jQuery는 팀미 윌리슨을 중심으로 한 개발자 팀이 유지 관리하고 있으며, jQuery 선택자 엔진인 Sizzle은 리처드 깁슨이 이끌고 있다.
2.2. 주요 버전별 특징
| 버전 | 최초 릴리스 | 최신 업데이트 | 최소화 크기 (KB) | 추가 노트 |
|---|---|---|---|---|
| 1.0 | 2006년 8월 26일 | 최초의 안정 버전 | ||
| 1.1 | 2007년 1월 14일 | |||
| 1.2 | 2007년 9월 10일 | 1.2.6 | 54.5 | |
| 1.3 | 2009년 1월 14일 | 1.3.2 | 55.9 | 시즐 셀렉터 엔진이 코어에 도입됨. |
| 1.4 | 2010년 1월 14일 | 1.4.4 | 76.7 | 대폭적인 성능/실행 속도 개선 |
| 1.5 | 2011년 1월 31일 | 1.5.2 | 83.9 | 디퍼드(Deferred) 콜백 관리, Ajax 모듈 재작성, 일부 API 성능 개선 |
| 1.6 | 2011년 5월 3일 | 1.6.4 (2011년 9월 12일) | 89.5 | `attr()` 및 `val()` 함수 성능 대폭 개선, 애니메이션 처리 개선 |
| 1.7 | 2011년 11월 3일 | 1.7.2 (2012년 3월 21일) | 92.6 | 새로운 이벤트 API: `.on()` 및 `.off()`, 이전 API도 계속 지원, 일부 API 연계 개선, 인터넷 익스플로러에서의 문제점/사양 대응 |
| 1.8 | 2012년 8월 9일 | 1.8.3 (2012년 11월 13일) | 91.4 | 시즐 셀렉터 엔진 재작성, 애니메이션 개선 및 `$(html, props)` 유연성 향상, CSS 벤더 프리픽스 자동 추가, 5개의 모듈로 분할, XSS 대책 강화, 소프트웨어 라이센스 단일화 |
| 1.9 | 2013년 1월 15일 | 1.9.1 (2013년 2월 4일) | 90.5 | `.toggle` 등의 사용 빈도가 낮은 API 폐지 (폐지된 API는 [https://github.com/jquery/jquery-migrate/ jQuery Migrate Plugin]으로 별도 제공), 사용 중단된 인터페이스 제거 및 코드 정리 |
| 1.10 | 2013년 5월 24일 | 1.10.2 (2013년 7월 3일) | 90.9 | 1.9 및 2.0 베타 주기의 버그 수정 사항 및 차이점 통합 |
| 1.11 | 2014년 1월 24일 | 1.11.3 (2015년 4월 28일) | 93.7 | |
| 1.12 | 2016년 1월 8일 | 1.12.4 (2016년 5월 20일) | 94.9 | 1계열, 2계열의 기능 추가는 이 버전에서 종료, 이후 버그 수정만 진행. 성능 개선, SVG 클래스 조작 등의 신기능 추가. |
| 2.0 | 2013년 4월 18일 | 2.0.3 (2013년 7월 3일) | 81.7 | 인터넷 익스플로러 6, 7, 8 미지원, 파일 크기를 12% 줄임. API는 1.9와의 호환성을 유지. |
| 2.1 | 2014년 1월 24일 | 2.1.4 (2015년 4월 28일) | 82.4 | |
| 2.2 | 2016년 1월 8일 | 2.2.4 (2016년 5월 20일) | 83.6 | |
| 3.0 | 2016년 6월 9일 | 3.0.0 (2016년 6월 9일) | 84.3 | 디퍼드(Deferred)의 Promises/A+ 호환, `$.ajax` 및 `$.when`, `.data()` HTML5 호환, 사용자 정의 선택자의 속도 향상, Ajax 기능을 포함하지 않는 경량 버전 제공, ES2015의 for of 루프에 대한 대응 및 requestAnimationFrame에 대한 대응. |
| 3.1 | 2016년 7월 7일 | 3.1.1 (2016년 9월 23일) | 84.7 | `jQuery.readyException` 추가, 준비 핸들러 오류가 더 이상 무시되지 않음, Deferred 모듈의 오류 처리 개선. |
| 3.2 | 2017년 3월 16일 | 3.2.1 (2017년 3월 20일) | 84.6 | |
| 3.3 | 2018년 1월 19일 | 3.3.1 (2018년 1월 20일) | 84.9 | 이전 함수의 폐지, 클래스를 수용하는 함수는 이제 배열 형태로 지원. |
| 3.4 | 2019년 4월 10일 | 3.4.1 (2019년 5월 1일) | 86.1 | 성능 개선, `nonce` 및 `nomodule` 지원, 라디오 요소 수정, 사소한 보안 수정. |
| 3.5 | 2020년 4월 10일 | 3.5.1 (2020년 5월 4일) | 87.4 | 보안 수정 사항, .even() & .odd() 메서드, jQuery.trim 사용 중단 |
| 3.6 | 2021년 3월 2일 | 3.6.4 (2023년 3월 8일) | 88.2 | 버그 수정, JSONP 오류 발생 시 JSON 반환, 새로운 Chrome 선택자 처리 |
| 3.7 | 2023년 5월 11일 | 3.7.1 (2023년 8월 28일) | 85.4 | .uniqueSort() 메서드, 성능 개선, .outerWidth(true) & .outerHeight(true) 음수 여백 처리, 포커스 수정 |
| 4.0 | 2024년 2월 6일 | 4.0.0-beta.2 | 78.8 | IE11 지원 중단, 사용 중단된 API 제거, 배열 메서드 제거, 포커스 이벤트 순서 변경, FormData 지원, ES 모듈로 마이그레이션 |
3. 기능
jQuery는 다음과 같은 다양한 기능을 제공하여 웹 개발을 편리하게 해준다.
* DOM 요소 선택: jQuery는 멀티브라우저 오픈 소스 선택자 엔진인 Sizzle을 사용하여 DOM 요소를 선택한다. Sizzle은 jQuery 프로젝트에서 파생되었다.
* CSS 셀렉터에 기반한 DOM 조작: ID 및 클래스와 같은 요소의 이름과 속성을 기준으로 DOM 노드를 선택하고 조작할 수 있다.
* 이벤트 처리: 이벤트 할당과 콜백 함수 정의를 한 번에 처리할 수 있다.
* 특수효과 및 애니메이션: 페이드 인/아웃, 슬라이드 다운 등 다양한 효과와 CSS 속성을 이용한 애니메이션을 지원한다.
* AJAX: `$.ajax()` 메서드를 통해 서버와 비동기적으로 데이터를 주고받을 수 있다.
* JSON 파싱
* 확장성: 플러그인을 통해 새로운 기능을 쉽게 추가하고 재사용할 수 있다.
* 유틸리티: `inArray()`, `each()` 함수 등 유용한 유틸리티 함수를 제공한다.
* 호환성 메소드: 구형 브라우저에서도 일관된 동작을 보장하기 위한 호환성 메소드를 제공한다. (inArray(), each() 함수 등)
* 멀티브라우저 지원: 크로스 브라우저와는 다르게, 여러 브라우저를 지원한다.
jQuery는 JavaScript와 HTML을 분리하고, 간결하고 명확한 코드 작성을 돕는다. 또한, 브라우저 간 비호환성 문제를 해결하고, 확장성을 제공하여 웹 개발 생산성을 향상시킨다.
3.1. DOM 조작
jQuery는 웹 페이지의 모든 요소를 트리 구조로 표현한 DOM을 조작하는 라이브러리이다. DOM 요소를 찾고, 선택하고, 조작하는 구문을 단순화하여 사용자가 쉽게 웹 페이지를 제어할 수 있도록 돕는다.
jQuery는 CSS 선택자를 기반으로 DOM을 조작한다. ID 및 클래스와 같은 요소의 이름과 속성을 DOM에서 노드를 선택하기 위한 기준으로 사용한다. 예를 들어, `$("div.test")`는 `test` 클래스를 가진 모든 `div` 요소를 가진 jQuery 객체를 반환한다.
jQuery는 기본적인 DOM 요소 선택 및 조작 외에도 이벤트 처리, 특수효과, 애니메이션, AJAX, JSON 파싱 등 다양한 기능을 제공한다. 이러한 기능들은 플러그인을 통해 확장할 수 있으며, `jQuery.inArray()`와 `jQuery.each()`와 같은 호환성 메서드를 통해 구형 브라우저에서도 일관된 동작을 보장한다.
3.2. 이벤트 처리
jQuery는 이벤트 할당 및 이벤트 콜백 함수 정의를 코드의 한 위치에서 한 번에 처리할 수 있게 해준다. 또한, jQuery는 요소를 숨길 때 페이드 인/아웃 효과를 주거나, CSS 속성을 조작하여 애니메이션을 만드는 등 자주 사용되는 JavaScript 기능을 통합하는 것을 목표로 한다.
jQuery 개발 원칙은 다음과 같다.
* JavaScript와 HTML의 분리: jQuery는 JavaScript를 사용하여 이벤트 핸들러를 DOM에 추가하는 간편한 구문을 제공한다. 이를 통해 개발자는 JavaScript 함수를 호출하기 위해 HTML 이벤트 속성을 추가하는 대신, JavaScript 코드를 HTML 마크업에서 완전히 분리할 수 있다.
* 간결함과 명확성: jQuery는 "체인 가능한" 함수와 단축 함수 이름과 같은 기능을 통해 간결하고 명확한 코드 작성을 돕는다.
* 교차 브라우저 비호환성 제거: 브라우저마다 JavaScript 엔진이 조금씩 다르기 때문에, 한 브라우저에서 작동하는 JavaScript 코드가 다른 브라우저에서는 작동하지 않을 수 있다. jQuery는 이러한 브라우저 간 불일치를 처리하여 다양한 브라우저에서 작동하는 일관된 인터페이스를 제공한다.
* 확장성: 새로운 이벤트, 요소 및 메서드를 쉽게 추가하고 플러그인 형태로 재사용할 수 있다.
jQuery는 다음과 같은 기능을 포함한다.
* 이벤트 처리
* 효과 및 애니메이션
* Ajax
* 비동기 처리를 제어하기 위한 Deferred 및 Promise 객체
3.3. 애니메이션 및 효과
jQuery는 다양한 시각적 효과와 애니메이션 기능을 제공하여 웹 페이지를 동적으로 만들 수 있도록 돕는다. 이러한 기능들은 사용자와의 상호작용을 향상시키고, 정보를 보다 효과적으로 전달하는 데 사용된다.
jQuery에서 제공하는 몇 가지 주요 애니메이션 메서드는 다음과 같다:
* `slideDown()`: 선택한 요소를 아래로 슬라이드하여 나타나게 한다.
* `fadeIn()`: 선택한 요소를 서서히 나타나게 한다 (페이드 인 효과).
jQuery는 CSS 속성을 조작하여 애니메이션 효과를 만드는 기능도 제공한다. 예를 들어, 요소의 크기, 위치, 투명도 등을 시간에 따라 변경하여 움직이는 듯한 효과를 낼 수 있다. 이러한 애니메이션 기능들은 웹 페이지를 더욱 풍부하고 흥미롭게 만들어 준다.
3.4. Ajax
jQuery는 `$.ajax()` 메서드를 사용하여 Ajax 요청을 통해 서버와 비동기적으로 데이터를 주고받을 수 있도록 지원한다. 이 메서드는 크로스 브라우저를 지원하여 다양한 브라우저 환경에서도 일관된 방식으로 Ajax를 사용할 수 있게 해준다.
다음은 `$.ajax()` 메서드를 사용한 예시이다.
$.ajax({
type: 'POST',
url: '/process/submit.php',
data: {
name: 'John',
location: 'Boston',
},
}).then(function(msg) {
alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
alert(
'Your form submission failed.\n\n'
+ 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
+ ',\nStatus Text: ' + statusText
+ ',\nError Thrown: ' + errorThrown);
});
이 코드는 `name=John`과 `location=Boston` 데이터를 서버의 `/process/submit.php`로 POST 방식으로 전송한다. 요청이 성공하면 `then()` 메서드에 정의된 콜백 함수가 실행되어 사용자에게 성공 메시지를 보여준다. 요청이 실패하면 `catch()` 메서드에 정의된 콜백 함수가 실행되어 실패 이유를 알려준다.
`$.ajax()` 메서드는 프로미스(Promise) 인터페이스를 구현한 `Deferred` 객체를 반환한다. 따라서, `then()` 메서드를 사용하여 비동기 요청의 결과를 처리해야 한다. Ajax 요청은 비동기적으로 동작하기 때문에, 응답이 완료될 때까지 기다리지 않고 다음 코드가 실행될 수 있다. `then()` 과 `catch()` 메서드를 사용하여 응답 완료 후 실행될 콜백 함수를 등록하면, 이러한 비동기 처리를 효율적으로 제어할 수 있다.
jQuery 3.0 이전에는 `success`, `error`, `complete` 와 같은 콜백 함수를 사용했지만, 이후 버전에서는 삭제되어 더 이상 동작하지 않는다.
jQuery는 Fetch API와 유사한 문법을 제공하지만, 내부적으로 XMLHttpRequest 객체를 사용한다. 따라서 반환되는 객체의 형태나 HTTP 상태 코드가 `404`일 때의 오류 처리 방식 등에서 약간의 차이가 있다.
3.5. 유틸리티
jQuery는 유용한 유틸리티 함수들을 제공한다. 이러한 함수들은 jQuery 객체에 직접 작용하지 않고, `jQuery` 또는 `$` 식별자를 통해 접근하는 정적 메서드이다.
몇 가지 유용한 유틸리티 함수는 다음과 같다.
* `$.each()`: 배열이나 객체의 각 요소를 반복 처리한다.
* `$.inArray()`: 배열에서 특정 값의 인덱스를 찾는다.
* `$.trim()`: 문자열의 앞뒤 공백을 제거한다.
* `$.ajax()`: Ajax 요청을 처리한다.
* 기타 유틸리티: 브라우저 버전 획득 등
이러한 유틸리티 함수들은 jQuery를 사용하여 개발할 때 유용하게 활용될 수 있다.
3.6. 확장성 (플러그인)
jQuery는 플러그인을 통해 기능을 쉽게 확장할 수 있다. 새로운 이벤트, 요소, 메서드를 추가하고 플러그인으로 재사용할 수 있다.
웹에는 Ajax 헬퍼, 웹 서비스, 데이터 그리드, 동적 목록, XML 및 XSLT 도구, 드래그 앤 드롭, 이벤트, 쿠키 처리, 모달 창 등 다양한 기능을 다루는 수천 개의 jQuery 플러그인이 존재한다.
jQuery 프로젝트 웹사이트의 플러그인 하위 도메인은 jQuery 플러그인의 중요한 소스였다. 그러나 2011년 12월 스팸 제거 시도 중 실수로 삭제되었다. 이후 깃허브에서 호스팅되는 저장소로 새로운 사이트가 만들어졌으며, 개발자는 플러그인을 다시 제출하고 새로운 제출 요구 사항을 준수해야 했다.
jQuery는 사용자가 자바스크립트를 이해하고 jQuery 플러그인 개발을 시작하는 데 도움을 주는 "학습 센터"를 제공한다.
4. 사용법
jQuery는 두 가지 상호 작용 스타일을 제공한다.
* `$` 함수 이용: jQuery 오브젝트의 팩토리 메소드이다. 각각의 함수들은 jQuery 오브젝트를 반환하고 서로 연계할 수 있다.
* `$.`가 앞에 붙은 함수 이용: 이들 함수는 jQuery 오브젝트 자체와 연동되지는 않는다.
일반적으로 여러 개의 DOM 노드들을 조작하는 작업은 `$` 함수로 시작된다. CSS 셀렉터 문자열을 가지고 호출된다. 결과적으로 0개 혹은 그 이상의 HTML 페이지 내의 요소를 참조하는 jQuery 오브젝트가 반환된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다. 예를 들면 다음과 같다:
```javascript
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
```
위 코드는 클래스에 `test`를 포함하는 모든 `div` 엘리먼트와 클래스에 `quote`를 포함하는 `p` 엘리먼트를 찾는다. 찾아낸 모든 요소에 `blue` 클래스를 추가하고 아래쪽으로 내려가는 애니메이션 효과를 준다. `$` 및 `add` 함수는 찾아낸(matched) 집합(set)에 영향을 주고, `addClass` 및 `slideDown` 함수는 참조된 노드들에 영향을 준다.
`$.`가 앞에 붙은 함수들은, 전역 프로퍼티나 행동에 영향을 주는 유틸리티 메소드들이다. 예를 들면 다음과 같다:
```javascript
$.each([1,2,3], function() {
document.write(this + 1);
});
```
위 코드는 `234`를 도큐먼트에 출력한다.
`$.ajax` 및 관련 메소드로 Ajax를 수행하여 원격 데이터를 로드하거나 조작할 수 있다.
```javascript
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
```
위 코드는 파라미터 `name=John&location=Boston`을 주면서 some.php에 요청을 보낸다. 요청이 성공적으로 수행되었으면, 그 응답이 `alert()`된다.
4.1. 설치 및 포함
jQuery는 하나의 자바스크립트 파일로 존재하며, 일반적인 DOM, 이벤트, 특수 효과, Ajax 함수를 포함한다. 웹 페이지에 jQuery를 포함시키려면 다음과 같은 코드를 사용한다.
```html
```
jQuery 라이브러리는 로컬 복사본에 연결하거나, 공개 서버에서 제공되는 여러 사본 중 하나에 연결하는 방식으로 웹 페이지에 포함할 수 있다. jQuery는 콘텐츠 전송 네트워크(CDN)를 가지고 있으며, MaxCDN에서 호스팅한다. 구글과 마이크로소프트 역시 이 라이브러리를 호스팅한다.
라이브러리 사본을 로컬로 연결하는 예시는 다음과 같다. (웹 페이지를 호스팅하는 동일한 서버에서):
```html
```
jQuery의 공개 CDN에서 라이브러리 사본을 연결하는 예시는 다음과 같다.
```html
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
```
jQuery는 단일 JavaScript 파일 외에도, 패키지 관리 시스템 (npm, Yarn) 및 콘텐츠 전송 네트워크(CDN) (구글, 마이크로소프트 등)을 통해 배포된다.
동일 호스트/서버에서 라이브러리에 링크하는 예:
```html
```
공식 퍼블릭 CDN을 사용하는 예:
```html
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
4.2. 기본 문법
`$` 기호를 이용해 jQuery 객체를 생성하고 메서드를 호출할 수 있다. `$` 함수는 jQuery 오브젝트의 팩토리 메소드로, 각각의 함수들은 jQuery 오브젝트를 반환하고 서로 연계할 수 있다.
일반적으로 여러 개의 DOM 노드들을 조작하는 작업은 `$` 함수로 시작된다. CSS 셀렉터 문자열을 이용해 호출하면, HTML 페이지 내의 0개 이상의 요소를 참조하는 jQuery 오브젝트가 반환된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다.
예를 들어
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
는 `test` 클래스를 포함하는 모든 `div` 엘리먼트와 `quote` 클래스를 포함하는 `p` 엘리먼트를 찾는다. 찾아낸 모든 요소에 `blue` 클래스를 추가하고 아래쪽으로 내려가는 애니메이션 효과를 준다. `$` 및 `add` 함수는 찾아낸(matched) 집합(set)에 영향을 주고, `addClass` 및 `slideDown` 함수는 참조된 노드들에 영향을 준다.
메서드 체이닝을 이용하면 여러 메서드를 연결하여 코드를 간결하게 작성할 수 있다.
$('div.test')
.on('click', handleTestClick)
.addClass('foo');
위 코드는 `class` 속성이 `test`인 모든 `div` HTML 요소를 찾은 다음, 각 요소에 "click" 이벤트에 대한 이벤트 핸들러를 등록하고, 각 요소에 `foo` 클래스 속성을 추가한다.
jQuery 객체 메서드는 일반적으로 jQuery 객체를 반환하므로, 메서드 체이닝을 사용할 수 있다.
4.3. $(document).ready() 대체
jQuery 3.0부터는 `$(document).ready(callback)` 대신 더 짧은 `$(handler)` 구문을 사용하는 것이 권장된다.
일반적으로 jQuery는 초기화 코드와 이벤트 처리 함수를 `$('handler')` 안에 넣어서 사용한다. 이것은 브라우저가 현재 웹 페이지의 DOM 구성을 완료했을 때 jQuery에 의해 트리거된다.
```javascript
$(function () {
// 이 익명 함수는 페이지 로딩이 완료되면 호출된다.
// 여기에서 jQuery 객체를 생성하고, 이벤트를 처리하는 등의 코드를 넣을 수 있다.
});
```
또는
```javascript
$(fn); // 다른 곳에서 정의된 함수인 fn이 페이지가 로드되면 호출된다.
```
jQuery를 시작하려면 다음 방법이 권장된다.
```javascript
function example() {
// 정의된 함수에 의한 임의의 코드
}
$(example);
// 또는
$(function () {
// 익명 함수에 의한 임의의 코드
});
```
HTML 분석이 완료되면, ` $() ` 메서드로 지정된 함수를 콜백하여 DOM 조작 등을 안전하게 시작한다. 같은 역할을 했던 레디 이벤트 `$(document).on('ready', callback)`는 고전적인 방법으로, jQuery 3.0 이후 삭제되어 동작하지 않는다.
4.4. 충돌 방지 (No-conflict 모드)
jQuery는 `$.noConflict()` 함수를 제공하며, 이 함수는 `$` 이름에 대한 제어권을 포기한다. 이는 jQuery가 `$` 기호를 식별자로 요구하는 다른 라이브러리와 함께 웹 페이지에서 사용될 때 유용하다. No-conflict 모드에서 개발자는 기능을 잃지 않고 `$` 대신 `jQuery`를 사용할 수 있다.
5. 브라우저 지원
jQuery 1.x와 2.x는 모두 최신 안정화 버전 및 그 이후 버전의 파이어폭스, 구글 크롬, 사파리, 오페라를 지원한다. 1.x 버전은 인터넷 익스플로러 6 및 그 이후 버전을 지원한다. 그러나 2.x 버전에서는 인터넷 익스플로러 6~8 버전이 지원되지 않으며 인터넷 익스플로러 9 또는 그 이후 버전을 지원한다.
jQuery 3.0 이상은 파이어폭스(ESR 포함), 크롬, 사파리, 엣지의 "현재-1 버전"(브라우저의 현재 안정 버전과 이전 버전)뿐만 아니라 인터넷 익스플로러 9 이상을 지원한다. 모바일에서는 iOS 7 이상, 안드로이드 4.0 이상을 지원한다.
6. 배포
jQuery 라이브러리는 보통 DOM, 이벤트, Ajax 함수를 포함한 모든 인터페이스를 정의하는 단일 JavaScript 파일 형태로 배포된다. 웹 페이지에 포함하려면 로컬 사본에 연결하거나, 공개 서버에서 제공되는 여러 사본 중 하나에 연결하면 된다. jQuery는 콘텐츠 전송 네트워크(CDN)를 가지고 있으며, MaxCDN에서 호스팅한다. 구글과 마이크로소프트도 구글 호스팅 라이브러리 서비스를 통해 이 라이브러리를 호스팅한다.
jQuery는 단일 JavaScript 파일 외에도 패키지 관리 시스템 (npm, Yarn) 및 콘텐츠 전송 네트워크(CDN) (구글, 마이크로소프트 등)을 통해 배포된다.
라이브러리 사본을 로컬로 연결하는 예시는 다음과 같다.
```html
```
jQuery 공개 CDN에서 라이브러리 사본을 연결하는 예시는 다음과 같다.
```html
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
```
공식 퍼블릭 CDN ()을 사용하는 예시는 다음과 같다.
```html
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
7. 인터페이스
jQuery는 기본적으로 문서 객체 모델(DOM) 조작 라이브러리다. DOM은 웹 페이지의 모든 요소를 트리 구조로 표현한 것이다. jQuery는 이러한 DOM 요소를 찾고, 선택하고, 조작하는 것을 단순하게 해준다. 예를 들어, jQuery를 사용하면 특정 속성을 가진 요소를 찾거나 (예:
태그를 가진 모든 요소), 하나 이상의 속성 (예: color, visibility)을 변경하거나, 이벤트 (예: 마우스 클릭)에 반응하도록 만들 수 있다.
jQuery는 기본적인 DOM 요소 선택 및 조작 외에도 이벤트 처리를 위한 패러다임을 제공한다. 이벤트 할당과 이벤트 콜백 함수 정의는 코드의 단일 위치에서 단일 단계로 수행된다. 또한 jQuery는 요소를 숨길 때 페이드 인 및 페이드 아웃, CSS 속성을 조작하여 애니메이션과 같은 자주 사용되는 JavaScript 기능을 통합하는 것을 목표로 한다.
jQuery는 함수를 두 종류로 제공하는데, 정적 유틸리티 함수와 jQuery 객체 메서드가 있다. 각각 고유한 사용 스타일이 있다.
두 함수 모두 jQuery의 주요 식별자인 `jQuery`를 통해 접근할 수 있으며, 이 식별자는 `$`라는 별칭을 가지고 있다. 모든 함수는 이 두 이름 중 하나를 통해 접근할 수 있다.
* `jQuery` - 메인 jQuery 객체
* `$` - `jQuery`의 별칭
jQuery에 의해 재할당된 `$` 변수는 `jQuery.noConflict()`를 기재한 행 이후에 포기된다. 이를 통해 다른 라이브러리 등에서 선언된 `$` 변수를 복귀시킬 수 있다.
정적 유틸리티 함수
이들은 유틸리티 함수이며 jQuery 객체에 직접적으로 작용하지 않는다. jQuery 또는 $ 식별자에 대한 정적 메서드로 접근한다. 예를 들어, `$.ajax()`는 정적 메서드이다.
jQuery 객체 메서드
jQuery 객체 메서드는 일반적으로 jQuery 객체를 반환하므로, 메서드 체이닝을 사용할 수 있다.
```javascript
$('div.test')
.on('click', handleTestClick)
.addClass('foo');
```
이 코드는 `class` 속성이 `test`인 모든 `div` HTML 요소를 찾은 다음, 각 요소에 "click" 이벤트에 대한 이벤트 핸들러를 등록하고, 각 요소에 `foo` 클래스 속성을 추가한다.
특정 jQuery 객체 메서드는 상태를 수정하는 대신 특정 값을 검색한다. 예를 들어 텍스트 상자 요소의 현재 값을 반환하는 `val()` 메서드가 있다. 이러한 경우 `$('#user-email').val()`과 같은 문은 반환 값이 jQuery 객체를 참조하지 않으므로 체이닝에 사용할 수 없다.
Ajax
Ajax 요청을 (크로스 브라우저 지원과 함께) `$.ajax()`를 사용하여 원격 데이터를 로드하고 조작하는 것이 가능합니다.
```javascript
$.ajax({
type: 'POST',
url: '/process/submit.php',
data: {
name : 'John',
location : 'Boston',
},
}).then(function(msg) {
alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
alert(
'Your form submission failed.\n\n'
+ 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
+ ',\nStatus Text: ' + statusText
+ ',\nError Thrown: ' + errorThrown);
});
```
이 예제는 `name=John`과 `location=Boston` 데이터를 서버의 `/process/submit.php`로 전송한다. 이 요청이 완료되면 성공 함수가 호출되어 사용자에게 알림을 표시한다. 요청이 실패하면 사용자에게 실패, 요청 상태 및 특정 오류를 알린다.
위 예제는 응답이 완료되었을 때 실행되는 콜백을 등록하기 위해 `.then()`과 `.catch()` 메서드를 사용한다. 이러한 프로미스 콜백은 Ajax 요청의 비동기적인 특성 때문에 사용해야 한다.
jQuery 플러그인
jQuery의 아키텍처를 통해 개발자는 기능을 확장하기 위한 플러그인 코드를 만들 수 있다. Ajax 헬퍼, 웹 서비스, 데이터 그리드, 동적 목록, XML 및 XSLT 도구, 드래그 앤 드롭, 이벤트, 쿠키 처리, 모달 창 등 다양한 기능을 다루는 수천 개의 jQuery 플러그인이 웹에서 제공된다.
jQuery 프로젝트 웹사이트의 플러그인 하위 도메인이 jQuery 플러그인의 중요한 소스였다. 하지만 이 하위 도메인의 플러그인은 사이트에서 스팸을 제거하려는 시도로 2011년 12월에 실수로 삭제되었다. 새로운 사이트는 깃허브에서 호스팅되는 저장소로, 개발자는 플러그인을 다시 제출하고 새로운 제출 요구 사항을 준수해야 했다. jQuery는 사용자가 자바스크립트를 이해하고 jQuery 플러그인 개발을 시작하는 데 도움이 되는 "학습 센터"를 제공한다.
8. 대안
HTML 문서 탐색, 애니메이션, 이벤트 처리를 단순화한 굳건한 jQuery JavaScript 라이브러리는 웹 개발의 모습을 바꾸었다. 2019년 5월 현재, 웹 기술 조사 기관 W3Techs에 따르면 알려진 웹사이트의 74%에서 jQuery가 여전히 사용되고 있다. 그럼에도 불구하고 2006년 8월에 처음 등장한 jQuery 라이브러리는 이제 일부 개발자들에게 시대가 지난 구식 기술로 여겨지고 있다.
최근 몇 년 동안 Cash 라이브러리나, 웹 브라우저가 모두 JavaScript를 동일하게 처리하고 호환성 문제를 해결하기 위해 더 이상 jQuery가 필요하지 않게 된 최신 바닐라 JavaScript와 같은 jQuery의 대안이 등장했다. Reddit의 논쟁과 YouTube의 비디오는 jQuery가 쓸모없게 되었거나, 적어도 한때만큼 필수적이지 않다는 주장을 제기한다.
교차 브라우저 호환성 문제가 더 이상 중요하지 않게 되면서, 오늘날 jQuery의 대부분은 편의성을 크게 잃지 않고도 현대 웹 표준으로 대체될 수 있다. 부분적으로 이러한 이유로 깃허브(GitHub)는 2018년에 자사 페이지에서 jQuery를 제거했다.