JQuery
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
jQuery는 존 레시그가 2006년 1월에 처음 개발한 자바스크립트 라이브러리이다. HTML 문서 탐색, 이벤트 처리, 애니메이션, AJAX 기능 등을 제공하며, CSS 선택자를 기반으로 DOM을 조작한다. 다양한 버전이 출시되었으며, 2010년대 초반 한국 웹 개발 생태계에서 널리 사용되었으나, React, Vue.js, Angular 등 새로운 프레임워크의 등장으로 사용 빈도가 감소하는 추세이다. jQuery는 `$` 함수와 `$.`로 시작하는 유틸리티 함수를 통해 인터페이스를 제공하며, 플러그인을 통한 확장성을 지원한다. 웹 페이지에 자바스크립트 파일로 포함하여 사용하며, CDN을 통해서도 배포된다. jQuery는 QUnit을 사용하여 테스트된다.
더 읽어볼만한 페이지
- 자바스크립트로 작성된 자유 소프트웨어 - Node.js
Node.js는 라이언 달이 2009년에 개발한 자바스크립트 런타임 환경으로, 구글 크롬 V8 엔진을 기반으로 구축되었으며 이벤트 기반의 논블로킹 I/O 모델을 사용하여 확장성 있는 네트워크 애플리케이션 개발에 용이하고 웹 서버 및 네트워킹 도구 제작을 위한 다양한 코어 모듈과 npm을 통한 오픈 소스 라이브러리 활용을 제공한다. - 자바스크립트로 작성된 자유 소프트웨어 - D3.js
D3.js는 웹 브라우저에서 데이터를 기반으로 동적인 시각화를 구현하기 위해 사용되는 자바스크립트 라이브러리로, SVG 요소 조작, 데이터-DOM 연결, 다양한 시각화 기능 및 API를 제공하여 복잡한 데이터 시각화를 효율적으로 구현하도록 돕는다. - Ajax - 구글 문서도구
구글 문서도구는 구글에서 제공하는 웹 기반 워드 프로세서로, 문서 작성, 편집, 공유 기능을 제공하며, 다양한 문서 형식 지원, 실시간 공동 작업, 머신러닝 기반 기능을 제공하고, 구글 드라이브를 통해 문서 및 파일을 함께 이용할 수 있다. - Ajax - AngularJS
AngularJS는 동적 웹 애플리케이션 개발을 용이하게 하기 위해 설계된 오픈 소스 자바스크립트 프레임워크로, MVC 패턴 적용, 의존성 주입, HTML 확장 디렉티브 제공, 양방향 데이터 바인딩 등의 특징을 가지며, 장기 지원은 종료되었지만 웹 개발에 중요한 영향을 미쳤다. - 웹 개발 - Ajax
Ajax는 웹 페이지 전체를 새로고침하지 않고 비동기적으로 서버와 통신하여 웹 애플리케이션의 일부를 업데이트하는 웹 개발 기술로, XMLHttpRequest 객체의 등장으로 가능해졌으며 HTML, CSS, DOM, JavaScript, JSON 등의 기술을 통합하여 동적인 사용자 인터페이스를 구현한다. - 웹 개발 - WebXR
WebXR은 웹 브라우저에서 가상 현실 및 증강 현실 콘텐츠를 구현하기 위한 API로, 다양한 장치 및 플랫폼에서 몰입형 웹 경험을 제공하며, 구글, 메타, 모질라 등 여러 기업과 단체가 개발에 참여하여 지속적인 업데이트를 통해 기능 향상을 목표로 한다.
| JQuery - [IT 관련 정보]에 관한 문서 | |
|---|---|
| 기본 정보 | |
 | |
| 종류 | 자바스크립트 라이브러리 |
| 라이선스 | MIT 허가서 |
| 웹사이트 | jQuery 공식 웹사이트 |
| 개발 | |
| 원저자 | 존 레식 |
| 개발자 | jQuery 팀 |
| 프로그래밍 언어 | 자바스크립트 |
| 릴리스 | |
| 첫 번째 릴리스 | 2006년 8월 26일 |
| 최신 버전 | 3.7.1 |
| 최신 버전 릴리스 날짜 | 2023년 8월 28일 |
| 최신 미리보기 버전 | 4.0.0-beta.2 |
| 최신 미리보기 버전 릴리스 날짜 | 2024년 7월 17일 |
| 기타 | |
| 크기 | 27–274 KB |
| 플랫폼 | 브라우저 지원 섹션 참고 |
2. 역사
jQuery는 2006년 1월 존 레시그가 바캠프 뉴욕에서 처음 만들었으며, 딘 에드워드의 이전 cssQuery 라이브러리의 영향을 받았다.[12][13] 현재 jQuery는 팀미 윌리슨을 중심으로 한 개발자 팀이 유지 관리하고 있으며, jQuery 선택자 엔진인 Sizzle은 리처드 깁슨이 이끌고 있다.[14]
jQuery는 처음에는 CC BY-SA 2.5 라이선스로 배포되었으나, 2006년에 MIT 라이선스로 변경되었다.[15] 2006년 말에는 GPL 및 MIT 라이선스의 이중 라이선스로 배포되면서 혼란이 발생하여,[16] 2012년에 GPL이 삭제되고 현재는 MIT 라이선스만으로 배포되고 있다.[17]
2. 1. 개발 배경
존 레시그는 2006년 1월 바캠프 뉴욕에서 딘 에드워드의 cssQuery 라이브러리에 영향을 받아 jQuery를 처음 만들었다.[12][13] 현재 jQuery는 팀미 윌리슨을 중심으로 한 개발자 팀이 유지 관리하고 있으며, jQuery 선택자 엔진인 Sizzle은 리처드 깁슨이 이끌고 있다.[14]2. 2. 주요 버전별 특징
| 버전 | 최초 릴리스 | 최신 업데이트 | 최소화 크기 (KB) | 추가 노트 |
|---|---|---|---|---|
| 1.0 | 2006년 8월 26일 | 최초의 안정 버전[12][13] | ||
| 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일)[33] | 89.5 | `attr()` 및 `val()` 함수 성능 대폭 개선, 애니메이션 처리 개선 |
| 1.7 | 2011년 11월 3일 | 1.7.2 (2012년 3월 21일)[34] | 92.6 | 새로운 이벤트 API: `.on()` 및 `.off()`, 이전 API도 계속 지원, 일부 API 연계 개선, 인터넷 익스플로러에서의 문제점/사양 대응 |
| 1.8 | 2012년 8월 9일 | 1.8.3 (2012년 11월 13일)[35] | 91.4 | 시즐 셀렉터 엔진 재작성, 애니메이션 개선 및 `$(html, props)` 유연성 향상, CSS 벤더 프리픽스 자동 추가, 5개의 모듈로 분할, XSS 대책 강화, 소프트웨어 라이센스 단일화 |
| 1.9 | 2013년 1월 15일 | 1.9.1 (2013년 2월 4일)[36] | 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일)[37] | 90.9 | 1.9 및 2.0 베타 주기의 버그 수정 사항 및 차이점 통합 |
| 1.11 | 2014년 1월 24일 | 1.11.3 (2015년 4월 28일)[38] | 93.7 | |
| 1.12 | 2016년 1월 8일 | 1.12.4 (2016년 5월 20일)[39] | 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일[40] | 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일[41] | 3.2.1 (2017년 3월 20일) | 84.6 | |
| 3.3 | 2018년 1월 19일[42] | 3.3.1 (2018년 1월 20일)[43] | 84.9 | 이전 함수의 폐지, 클래스를 수용하는 함수는 이제 배열 형태로 지원. |
| 3.4 | 2019년 4월 10일[44] | 3.4.1 (2019년 5월 1일)[45] | 86.1 | 성능 개선, `nonce` 및 `nomodule` 지원, 라디오 요소 수정, 사소한 보안 수정. |
| 3.5 | 2020년 4월 10일[46] | 3.5.1 (2020년 5월 4일)[47] | 87.4 | 보안 수정 사항, .even() & .odd() 메서드, jQuery.trim 사용 중단 |
| 3.6 | 2021년 3월 2일[48] | 3.6.4 (2023년 3월 8일)[49] | 88.2[50] | 버그 수정, JSONP 오류 발생 시 JSON 반환, 새로운 Chrome 선택자 처리 |
| 3.7 | 2023년 5월 11일[51] | 3.7.1 (2023년 8월 28일)[52] | 85.4[53] | .uniqueSort() 메서드, 성능 개선, .outerWidth(true) & .outerHeight(true) 음수 여백 처리, 포커스 수정 |
| 4.0 | 2024년 2월 6일[54] | 4.0.0-beta.2 | 78.8 | IE11 지원 중단, 사용 중단된 API 제거, 배열 메서드 제거, 포커스 이벤트 순서 변경, FormData 지원, ES 모듈로 마이그레이션 |
jQuery는 다음과 같은 다양한 기능을 제공하여 웹 개발을 편리하게 해준다.
3. 기능
inArray(), each() 함수 등)
jQuery는 JavaScript와 HTML을 분리하고, 간결하고 명확한 코드 작성을 돕는다. 또한, 브라우저 간 비호환성 문제를 해결하고, 확장성을 제공하여 웹 개발 생산성을 향상시킨다.
3. 1. DOM 조작
jQuery는 웹 페이지의 모든 요소를 트리 구조로 표현한 DOM을 조작하는 라이브러리이다.[76] DOM 요소를 찾고, 선택하고, 조작하는 구문을 단순화하여 사용자가 쉽게 웹 페이지를 제어할 수 있도록 돕는다.
jQuery는 CSS 선택자를 기반으로 DOM을 조작한다.[21] ID 및 클래스와 같은 요소의 이름과 속성을 DOM에서 노드를 선택하기 위한 기준으로 사용한다. 예를 들어, `$("div.test")`는 `test` 클래스를 가진 모든 `div` 요소를 가진 jQuery 객체를 반환한다.
jQuery는 기본적인 DOM 요소 선택 및 조작 외에도 이벤트 처리, 특수효과, 애니메이션, AJAX, JSON 파싱 등 다양한 기능을 제공한다. 이러한 기능들은 플러그인을 통해 확장할 수 있으며, `jQuery.inArray()`와 `jQuery.each()`와 같은 호환성 메서드를 통해 구형 브라우저에서도 일관된 동작을 보장한다.
3. 2. 이벤트 처리
jQuery는 이벤트 할당 및 이벤트 콜백 함수 정의를 코드의 한 위치에서 한 번에 처리할 수 있게 해준다. 또한, jQuery는 요소를 숨길 때 페이드 인/아웃 효과를 주거나, CSS 속성을 조작하여 애니메이션을 만드는 등 자주 사용되는 JavaScript 기능을 통합하는 것을 목표로 한다.
jQuery 개발 원칙은 다음과 같다.
jQuery는 다음과 같은 기능을 포함한다.3. 3. 애니메이션 및 효과
jQuery는 다양한 시각적 효과와 애니메이션 기능을 제공하여 웹 페이지를 동적으로 만들 수 있도록 돕는다. 이러한 기능들은 사용자와의 상호작용을 향상시키고, 정보를 보다 효과적으로 전달하는 데 사용된다.
jQuery에서 제공하는 몇 가지 주요 애니메이션 메서드는 다음과 같다:
jQuery는 CSS 속성을 조작하여 애니메이션 효과를 만드는 기능도 제공한다. 예를 들어, 요소의 크기, 위치, 투명도 등을 시간에 따라 변경하여 움직이는 듯한 효과를 낼 수 있다. 이러한 애니메이션 기능들은 웹 페이지를 더욱 풍부하고 흥미롭게 만들어 준다.[76]
3. 4. Ajax
jQuery는 `$.ajax()` 메서드를 사용하여 Ajax 요청을 통해 서버와 비동기적으로 데이터를 주고받을 수 있도록 지원한다. 이 메서드는 크로스 브라우저를 지원하여 다양한 브라우저 환경에서도 일관된 방식으로 Ajax를 사용할 수 있게 해준다.[76]
다음은 `$.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 방식으로 전송한다.[66] 요청이 성공하면 `then()` 메서드에 정의된 콜백 함수가 실행되어 사용자에게 성공 메시지를 보여준다. 요청이 실패하면 `catch()` 메서드에 정의된 콜백 함수가 실행되어 실패 이유를 알려준다.
`$.ajax()` 메서드는 프로미스(Promise) 인터페이스[66]를 구현한 `Deferred` 객체를 반환한다. 따라서, `then()` 메서드를 사용하여 비동기 요청의 결과를 처리해야 한다. Ajax 요청은 비동기적으로 동작하기 때문에, 응답이 완료될 때까지 기다리지 않고 다음 코드가 실행될 수 있다. `then()` 과 `catch()` 메서드를 사용하여 응답 완료 후 실행될 콜백 함수를 등록하면, 이러한 비동기 처리를 효율적으로 제어할 수 있다.
jQuery 3.0 이전에는 `success`, `error`, `complete` 와 같은 콜백 함수를 사용했지만, 이후 버전에서는 삭제되어 더 이상 동작하지 않는다.[67]
jQuery는 Fetch API와 유사한 문법을 제공하지만, 내부적으로 XMLHttpRequest 객체를 사용한다.[68] 따라서 반환되는 객체의 형태나 HTTP 상태 코드가 `404`일 때의 오류 처리 방식 등에서 약간의 차이가 있다.[68]
3. 5. 유틸리티
jQuery는 유용한 유틸리티 함수들을 제공한다. 이러한 함수들은 jQuery 객체에 직접 작용하지 않고, `jQuery` 또는 `$` 식별자를 통해 접근하는 정적 메서드이다.
몇 가지 유용한 유틸리티 함수는 다음과 같다.
이러한 유틸리티 함수들은 jQuery를 사용하여 개발할 때 유용하게 활용될 수 있다.
3. 6. 확장성 (플러그인)
jQuery는 플러그인을 통해 기능을 쉽게 확장할 수 있다. 새로운 이벤트, 요소, 메서드를 추가하고 플러그인으로 재사용할 수 있다.[29]
웹에는 Ajax 헬퍼, 웹 서비스, 데이터 그리드, 동적 목록, XML 및 XSLT 도구, 드래그 앤 드롭, 이벤트, 쿠키 처리, 모달 창 등 다양한 기능을 다루는 수천 개의 jQuery 플러그인이 존재한다.[29]
jQuery 프로젝트 웹사이트의 플러그인 하위 도메인은 jQuery 플러그인의 중요한 소스였다.[29] 그러나 2011년 12월 스팸 제거 시도 중 실수로 삭제되었다.[30] 이후 깃허브에서 호스팅되는 저장소로 새로운 사이트가 만들어졌으며, 개발자는 플러그인을 다시 제출하고 새로운 제출 요구 사항을 준수해야 했다.[31]
jQuery는 사용자가 자바스크립트를 이해하고 jQuery 플러그인 개발을 시작하는 데 도움을 주는 "학습 센터"를 제공한다.[32]
4. 사용법
jQuery는 두 가지 상호 작용 스타일을 제공한다.[26]
- `$` 함수 이용: 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를 포함시키려면 다음과 같은 코드를 사용한다.[23][24][25]```html
```
jQuery 라이브러리는 로컬 복사본에 연결하거나, 공개 서버에서 제공되는 여러 사본 중 하나에 연결하는 방식으로 웹 페이지에 포함할 수 있다. jQuery는 콘텐츠 전송 네트워크(CDN)를 가지고 있으며, MaxCDN에서 호스팅한다. 구글과 마이크로소프트 역시 이 라이브러리를 호스팅한다.
라이브러리 사본을 로컬로 연결하는 예시는 다음과 같다. (웹 페이지를 호스팅하는 동일한 서버에서):
```html
```
jQuery의 공개 CDN에서 라이브러리 사본을 연결하는 예시는 다음과 같다.
```html
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
```
jQuery는 단일 JavaScript 파일 외에도, 패키지 관리 시스템 (npm, Yarn) 및 콘텐츠 전송 네트워크(CDN) (구글, 마이크로소프트 등)을 통해 배포된다.[63]
동일 호스트/서버에서 라이브러리에 링크하는 예:
```html
```
공식 퍼블릭 CDN을 사용하는 예:
```html
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
4. 2. 기본 문법
`$` 기호를 이용해 jQuery 객체를 생성하고 메서드를 호출할 수 있다. `$` 함수는 jQuery 오브젝트의 팩토리 메소드로, 각각의 함수들은 jQuery 오브젝트를 반환하고 서로 연계할 수 있다.[26]일반적으로 여러 개의 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 객체를 반환하므로, 메서드 체이닝을 사용할 수 있다.[26]
4. 3. $(document).ready() 대체
jQuery 3.0부터는 `$(document).ready(callback)` 대신 더 짧은 `$(handler)` 구문을 사용하는 것이 권장된다.[28]일반적으로 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 이후 삭제되어 동작하지 않는다.[65]
4. 4. 충돌 방지 (No-conflict 모드)
jQuery는 `$.noConflict()` 함수를 제공하며, 이 함수는 `$` 이름에 대한 제어권을 포기한다. 이는 jQuery가 `$` 기호를 식별자로 요구하는 다른 라이브러리와 함께 웹 페이지에서 사용될 때 유용하다. No-conflict 모드에서 개발자는 기능을 잃지 않고 `$` 대신 `jQuery`를 사용할 수 있다.[27]5. 브라우저 지원
jQuery 1.x와 2.x는 모두 최신 안정화 버전 및 그 이후 버전의 파이어폭스, 구글 크롬, 사파리, 오페라를 지원한다. 1.x 버전은 인터넷 익스플로러 6 및 그 이후 버전을 지원한다. 그러나 2.x 버전에서는 인터넷 익스플로러 6~8 버전이 지원되지 않으며 인터넷 익스플로러 9 또는 그 이후 버전을 지원한다.[77]
jQuery 3.0 이상은 파이어폭스(ESR 포함), 크롬, 사파리, 엣지의 "현재-1 버전"(브라우저의 현재 안정 버전과 이전 버전)뿐만 아니라 인터넷 익스플로러 9 이상을 지원한다. 모바일에서는 iOS 7 이상, 안드로이드 4.0 이상을 지원한다.[22]
6. 배포
jQuery 라이브러리는 보통 DOM, 이벤트, Ajax 함수를 포함한 모든 인터페이스를 정의하는 단일 JavaScript 파일 형태로 배포된다. 웹 페이지에 포함하려면 로컬 사본에 연결하거나, 공개 서버에서 제공되는 여러 사본 중 하나에 연결하면 된다. jQuery는 콘텐츠 전송 네트워크(CDN)를 가지고 있으며, MaxCDN에서 호스팅한다.[23] 구글과 마이크로소프트도 구글 호스팅 라이브러리 서비스를 통해 이 라이브러리를 호스팅한다.[24][25]
jQuery는 단일 JavaScript 파일 외에도 패키지 관리 시스템 (npm, Yarn) 및 콘텐츠 전송 네트워크(CDN) (구글, 마이크로소프트 등)을 통해 배포된다.[63]
라이브러리 사본을 로컬로 연결하는 예시는 다음과 같다.
```html
```
jQuery 공개 CDN에서 라이브러리 사본을 연결하는 예시는 다음과 같다.
```html
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
```
공식 퍼블릭 CDN ()을 사용하는 예시는 다음과 같다.
```html
src="https://code.jquery.com/jquery-3.7.1.min.js"
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`를 통해 접근할 수 있으며, 이 식별자는 `$`라는 별칭을 가지고 있다.[26] 모든 함수는 이 두 이름 중 하나를 통해 접근할 수 있다.
- `jQuery` - 메인 jQuery 객체
- `$` - `jQuery`의 별칭
jQuery에 의해 재할당된 `$` 변수는 `jQuery.noConflict()`를 기재한 행 이후에 포기된다. 이를 통해 다른 라이브러리 등에서 선언된 `$` 변수를 복귀시킬 수 있다.[64]
정적 유틸리티 함수이들은 유틸리티 함수이며 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 객체를 참조하지 않으므로 체이닝에 사용할 수 없다.
AjaxAjax 요청을 (크로스 브라우저 지원과 함께) `$.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 플러그인이 웹에서 제공된다.[29]
jQuery 프로젝트 웹사이트의 플러그인 하위 도메인이 jQuery 플러그인의 중요한 소스였다.[29] 하지만 이 하위 도메인의 플러그인은 사이트에서 스팸을 제거하려는 시도로 2011년 12월에 실수로 삭제되었다.[30] 새로운 사이트는 깃허브에서 호스팅되는 저장소로, 개발자는 플러그인을 다시 제출하고 새로운 제출 요구 사항을 준수해야 했다.[31] jQuery는 사용자가 자바스크립트를 이해하고 jQuery 플러그인 개발을 시작하는 데 도움이 되는 "학습 센터"를 제공한다.[32]
8. 대안
HTML 문서 탐색, 애니메이션, 이벤트 처리를 단순화한 굳건한 jQuery JavaScript 라이브러리는 웹 개발의 모습을 바꾸었다. 2019년 5월 현재, 웹 기술 조사 기관 W3Techs에 따르면 알려진 웹사이트의 74%에서 jQuery가 여전히 사용되고 있다.[57] 그럼에도 불구하고 2006년 8월에 처음 등장한 jQuery 라이브러리는 이제 일부 개발자들에게 시대가 지난 구식 기술로 여겨지고 있다.
최근 몇 년 동안 Cash 라이브러리나, 웹 브라우저가 모두 JavaScript를 동일하게 처리하고 호환성 문제를 해결하기 위해 더 이상 jQuery가 필요하지 않게 된 최신 바닐라 JavaScript와 같은 jQuery의 대안이 등장했다.[57] Reddit의 논쟁과 YouTube의 비디오는 jQuery가 쓸모없게 되었거나, 적어도 한때만큼 필수적이지 않다는 주장을 제기한다.[57]
교차 브라우저 호환성 문제가 더 이상 중요하지 않게 되면서, 오늘날 jQuery의 대부분은 편의성을 크게 잃지 않고도 현대 웹 표준으로 대체될 수 있다.[58] 부분적으로 이러한 이유로 깃허브(GitHub)는 2018년에 자사 페이지에서 jQuery를 제거했다.[59]
9. 테스팅 프레임워크
QUnit는 jQuery 프로젝트를 테스트하는 데 사용되는 테스트 자동화 프레임워크이다. jQuery 팀은 내부 단위 테스트 라이브러리로 개발했다.[55] jQuery 팀은 자체 코드와 플러그인을 테스트하는 데 사용하지만, 서버 측 JavaScript 코드를 포함한 모든 일반적인 JavaScript 코드를 테스트할 수 있다.[55]
jQuery 테스팅 팀은 각 jQuery 코드베이스 릴리스를 테스트하기 위해 QUnit과 TestSwarm을 사용한다.[56]
참조
[1]
웹사이트
'jQuery 3.7.1 Released: Reliable Table Row Dimensions | Official jQuery Blog'
https://blog.jquery.[...]
2023-08-28
[2]
웹사이트
'Second Beta of jQuery 4.0.0 | Official jQuery Blog'
https://blog.jquery.[...]
2024-07-17
[3]
웹사이트
Open-source Libraries and File Sizes - PageCDN
https://pagecdn.com/[...]
2020-07-21
[4]
웹사이트
jQuery: The write less, do more, JavaScript library
http://jquery.com/
The jQuery Project
2010-04-29
[5]
웹사이트
jQuery Project License
https://github.com/j[...]
jQuery Foundation
2017-03-11
[6]
웹사이트
Usage of JavaScript libraries for websites
https://w3techs.com/[...]
2019-11-15
[7]
웹사이트
Libscore
https://libscore.com[...]
2017-02-11
[8]
문서
Selectors API Level 1, W3C Recommendation
2013-02-21
[9]
웹사이트
jQuery, Microsoft, and Nokia
http://jquery.com/bl[...]
jQuery
2009-01-29
[10]
웹사이트
jQuery and Microsoft
https://weblogs.asp.[...]
2019-04-15
[11]
웹사이트
Guarana UI: A jQuery Based UI Library for Nokia WRT
http://wiki.forum.no[...]
2010-03-30
[12]
서적
Beginning JavaScript and CSS Development with jQuery
https://books.google[...]
Wiley
[13]
웹사이트
History of jQuery
https://www.slidesha[...]
2019-04-15
[14]
웹사이트
The jQuery Team
https://jquery.org/t[...]
JS Foundation
2019-05-22
[15]
문서
jquery-under-the-mit-license
https://blog.jquery.[...]
[16]
문서
license
https://web.archive.[...]
[17]
웹사이트
jQuery Licensing Changes
https://blog.jquery.[...]
2012-09-10
[18]
웹사이트
Handling 15,000 requests per second: The Growth Behind jQuery
https://www.maxcdn.c[...]
MaxCDN
2018-07-02
[19]
웹사이트
jQuery Usage Statistics (Dec 2019)
https://trends.built[...]
2020-02-21
[20]
웹사이트
Usage Statistics and Market Share of JavaScript Libraries (February 2020)
https://w3techs.com/[...]
2020-02-21
[21]
웹사이트
jQuery 1.3 and the jQuery Foundation
https://blog.jquery.[...]
2009-05-04
[22]
문서
Browser Support | jQuery
[23]
웹사이트
jQuery CDN
https://code.jquery.[...]
[24]
웹사이트
Google Libraries API - Developer's Guide
https://code.google.[...]
2012-03-11
[25]
웹사이트
Microsoft Ajax Content Delivery Network
https://docs.microso[...]
Microsoft Corporation
2019-04-15
[26]
웹사이트
jQuery() {{!}} jQuery API Documentation
https://api.jquery.c[...]
2018-07-02
[27]
웹사이트
jQuery.noConflict() jQuery API Documentation
http://api.jquery.co[...]
[28]
웹사이트
jQuery Core 3.0 Upgrade Guide - jQuery
https://jquery.com/u[...]
[29]
웹사이트
Plugins
https://plugins.jque[...]
The jQuery Project
2019-04-15
[30]
웹사이트
What Is Happening To The jQuery Plugins Site?
https://blog.jquery.[...]
2015-04-22
[31]
웹사이트
jquery/plugins.jquery.com
https://github.com/j[...]
2015-04-22
[32]
웹사이트
jQuery Learning Center
http://learn.jquery.[...]
jQuery Foundation
2014-07-02
[33]
웹사이트
jQuery 1.6.4 Released
https://blog.jquery.[...]
2011-09-12
[34]
웹사이트
jQuery 1.7.2 Released
https://blog.jquery.[...]
2012-03-21
[35]
웹사이트
jQuery 1.8.3 Released
https://blog.jquery.[...]
2012-11-13
[36]
웹사이트
jQuery 1.9.1 Released
https://blog.jquery.[...]
2013-02-04
[37]
웹사이트
jQuery 1.10.2 and 2.0.3 Released
https://blog.jquery.[...]
2013-07-03
[38]
웹사이트
jQuery 1.11.3 and 2.1.4 Released – iOS Fail-Safe Edition
https://blog.jquery.[...]
2015-04-28
[39]
웹사이트
jQuery 1.12.4 and 2.2.4 Released
https://blog.jquery.[...]
2016-05-20
[40]
웹사이트
Long-awaited jQuery 3.0 Brings Slim Build
https://www.infoq.co[...]
infoq.com
2016-06-15
[41]
웹사이트
jQuery 3.2.0 Is Out!
https://blog.jquery.[...]
2017-03-16
[42]
웹사이트
jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?
https://blog.jquery.[...]
2018-01-19
[43]
웹사이트
jQuery 3.3.1 – fixed dependencies in release tag
https://blog.jquery.[...]
2018-01-20
[44]
웹사이트
jQuery 3.4.0 Released
https://blog.jquery.[...]
2018-04-10
[45]
웹사이트
jQuery 3.4.1: triggering focus events in IE and finding root elements in iOS 10
https://blog.jquery.[...]
jQuery Foundation
[46]
웹사이트
jQuery 3.5.0 Released!
https://blog.jquery.[...]
2020-04-10
[47]
웹사이트
jQuery 3.5.1 Released: Fixing a Regression
https://blog.jquery.[...]
jQuery Foundation
[48]
웹사이트
jQuery 3.6.0 Released! {{!}} Official jQuery Blog
https://blog.jquery.[...]
2021-03-27
[49]
웹사이트
jQuery 3.6.4 Released: Selector Forgiveness
https://blog.jquery.[...]
2023-03-08
[50]
웹사이트
jquery v3.6.4
https://bundlephobia[...]
2023-03-08
[51]
웹사이트
jQuery 3.7.0 Released: Staying in Order {{!}} Official jQuery Blog
https://blog.jquery.[...]
[52]
웹사이트
jQuery 3.7.1 Released: Reliable Table Row Dimensions
https://blog.jquery.[...]
2023-09-14
[53]
웹사이트
jquery v3.7.0
https://bundlephobia[...]
2023-05-11
[54]
웹사이트
jQuery 4.0.0 BETA!
https://blog.jquery.[...]
[55]
웹사이트
History
https://qunitjs.com/[...]
2019-04-15
[56]
웹사이트
jquerytesting [licensed for non-commercial use only] / FrontPage
http://jquerytesting[...]
[57]
웹사이트
3 JavaScript libraries to replace jQuery
https://www.infoworl[...]
2019-05-08
[58]
웹사이트
You Might Not Need jQuery
https://youmightnotn[...]
2022-04-23
[59]
웹사이트
Removing jQuery from GitHub.com frontend
https://github.blog/[...]
2021-07-21
[60]
문서
バージョン1.8以降から[http://blog.jquery.com/2012/09/10/jquery-licensing-changes/ シングルライセンス化]。1.7.2までは[[MIT License]]と[[GNU GPL]]バージョン2の[[デュアルライセンス]]。
[61]
웹사이트
jQuery Mobileページの基本構造を理解しよう
https://atmarkit.itm[...]
＠IT
2012-10-05
[62]
웹사이트
jQuery 1.3 and the jQuery Foundation
http://blog.jquery.c[...]
2009-01-14
[63]
웹사이트
Downloading jQuery
https://jquery.com/d[...]
2024-08-19
[64]
웹사이트
jQuery.noConflict()
https://api.jquery.c[...]
2021-04-26
[65]
웹사이트
jQuery Core 3.0 Upgrade Guide #Deprecated: document-ready handlers other than jQuery(function)
https://jquery.com/u[...]
2021-04-26
[66]
웹사이트
Promise
https://developer.mo[...]
Mozilla
2021-04-26
[67]
웹사이트
jQuery Core 3.0 Upgrade Guide #Ajax
https://jquery.com/u[...]
2021-04-26
[68]
웹사이트
Fetch API #jQueryとの違い
https://developer.mo[...]
Mozilla
2021-04-26
[69]
웹사이트
jQuery, Microsoft, and Nokia
http://jquery.com/bl[...]
jQuery
2008-09-28
[70]
웹사이트
jQuery and Microsoft
http://weblogs.asp.n[...]
2008-09-28
[71]
웹인용
"jQuery 3.7.0 Released: Staying in Order ! Official jQuery Blog"
https://blog.jquery.[...]
[72]
웹인용
jQuery Project License
https://github.com/j[...]
jQuery Foundation
2017-03-11
[73]
웹인용
jQuery, Microsoft, and Nokia
http://jquery.com/bl[...]
jQuery
2009-01-29
[74]
웹인용
jQuery and Microsoft
https://weblogs.asp.[...]
2019-04-15
[75]
웹인용
Guarana UI: A jQuery Based UI Library for Nokia WRT
http://wiki.forum.no[...]
2010-03-30
[76]
웹인용
jQuery 1.3 and the jQuery Foundation
http://blog.jquery.c[...]
2014-03-26
[77]
웹사이트
Browser Support | jQuery
http://jquery.com/br[...]
[78]
웹인용
Long-awaited jQuery 3.0 Brings Slim Build
https://www.infoq.co[...]
infoq.com
2017-01-28
[79]
웹인용
jQuery 3.2.0 Is Out!
https://blog.jquery.[...]
2017-03-16
[80]
웹인용
jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?
https://blog.jquery.[...]
2018-01-19
[81]
웹인용
jQuery 3.3.1 – fixed dependencies in release tag
https://blog.jquery.[...]
2018-01-20
[82]
웹인용
jQuery 3.4.0 Released
https://blog.jquery.[...]
2018-04-10
[83]
웹인용
jQuery 3.4.1: triggering focus events in IE and finding root elements in iOS 10
https://blog.jquery.[...]
jQuery Foundation
[84]
웹인용
jQuery 3.5.0 Released!
https://blog.jquery.[...]
2020-04-10
[85]
웹인용
jQuery 3.5.1 Released: Fixing a Regression
https://blog.jquery.[...]
jQuery Foundation
[86]
웹인용
"jQuery 3.6.0 Released! ! Official jQuery Blog"
https://blog.jquery.[...]
2021-03-27
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com