상위 질문
타임라인
채팅
관점
JQuery
크로스 플랫폼의 자바스크립트 라이브러리 위키백과, 무료 백과사전
Remove ads
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 거의 모든 웹 브라우저에 대응할 정도로 브라우저 호환성이 있으며, 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다.
jQuery는 MIT 라이선스를 가진 자유 오픈 소프트웨어이다.[2] jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.
마이크로소프트와 노키아는 자사 플랫폼에 jQuery를 포함하는 계획을 발표한 바 있다.[3] 마이크로소프트는 비주얼스튜디오[4]의 ASP.NET AJAX 프레임워크와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 웹 위젯 개발 플랫폼에 통합하였다.[5]
Remove ads
기능
- DOM 요소 선택 기의 파생 프로젝트이다.[6]
- DOM 탐색 및 수정 (CSS 1-3 지원)
- CSS 셀렉터에 기반한 DOM 조작
- 이벤트
- 특수효과 및 애니메이션
- AJAX
- JSON 파싱
- 플러그인을 통한 확장성
- 유틸리티
- 호환성 메소드 (
inArray(),each()함수 등) - 멀티브라우저 지원 (크로스브라우저와는 다름)
브라우저 지원
jQuery 1.x와 2.x는 모두 최신 안정화 버전 및 그 이후 버전의 파이어폭스, 구글 크롬, 사파리, 그리고 오페라를 지원한다. 1.x 버전은 인터넷 익스플로러 6 및 그 이후 버전을 지원한다. 그러나 2.x 버전에서는 인터넷 익스플로러 6-8 버전이 지원되지 않으며 인터넷 익스플로러 9 또는 그 이후 버전을 지원한다.[7]
사용법
요약
관점
jQuery는 한 개의 자바스크립트 파일로 존재한다. 공통의 DOM, 이벤트, 특수 효과, Ajax 함수를 포함한다. 다음 코드를 쓰면 웹 페이지에 포함시킬 수 있다.
<script type="text/javascript" src="path/to/jQuery.js"></script>
jQuery는 두 가지의 상호 작용 스타일을 갖고 있다:
$함수 이용. jQuery 오브젝트의 팩토리 메소드이다. 각각의 함수들은 jQuery 오브젝트를 반환하고 서로 연계할 수 있다.$.-가 앞에 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다.
일반적으로 여러 개의 DOM 노드들을 조작하는 작업은 $ 함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로 0개 혹은 그 이상의 HTML 페이지 내의 요소를 레퍼런스하는 jQuery 오브젝트가 반환된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다. 예를 들면 다음과 같다:
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
클래스에 test를 포함하는 모든 div 엘리먼트와 클래스에 quote를 포함하는 p 엘리먼트를 찾는다. 찾아낸 모든 요소에 blue 클래스를 추가한다. 그 뒤 아래쪽으로 내려가는되는 애니메이션 효과를 준다. $ 및 add 함수는 찾아낸(matched) 집합(set)에 영향을 준다. addClass 및 slideDown 함수는 레퍼런스된 노드들에 영향을 준다.
$.가 앞에 붙은 함수들은, 전역 프로퍼티나 행동에 영향을 주는, 유틸리티 메소드들이다. 예를 들면 다음과 같다:
$.each([1,2,3], function() {
document.write(this + 1);
});
234를 도큐먼트에 출력한다.
$.ajax 및 관련 메소드로 Ajax를 수행하여 원격 데이터를 로드하거나 조작할 수 있다.
$.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()된다.
배포 내역
Remove ads
같이 보기
각주
참고 문헌
외부 링크
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads