문서의 임의 삭제는 제재 대상으로, 문서를 삭제하려면 삭제 토론을 진행해야 합니다. 문서 보기문서 삭제토론 jQuery (문단 편집) == 특징 == jQuery는 다음과 같은 기능을 갖고 있다. * DOM 엘리먼트 선택 * DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원) * 이벤트 * CSS 조작[* 어디까지나 '''브라우저가 지원하는 것까지만.''' IE8 이하에서는 죽어라 border-radius 등을 줘도 안먹는다.] * 특수효과 및 애니메이션[* 간단한 것만 가능하며 복잡한 애니메이션이 필요하다면 jQuery UI라는 확장기능을 사용해야 한다.] * [[AJAX]] 및 [[JSON]], [[XML]] 파싱 * JavaScript 플러그인을 통한 확장성 * 유틸리티 - 브라우저 종류와 버전,[* [[Internet Explorer|IE]], [[모질라 파이어폭스]], [[오페라(웹 브라우저)|오페라]], [[WebKit]] 등을 판별할 수 있다. 다만 1.9 버전 이후부터 삭제되었다. 굳이 사용하고 싶다면 jQuery Migrate라는 플러그인을 사용해야 한다. 이 플러그인은 구형 버전에서 지원되었으나 최신 버전에서 삭제된 함수를 사용 가능하게 해 준다.][* 삭제되었다기 보다는 플러그인으로 분리되어 나갔다고 보는게 더 옳다. migrate는 말 그대로 삭제된 기능을 되살리는 플러그인이고, 브라우저를 구분해주는 플러그인은 따로 있다. 플러그인으로 분리해 두지 않으면, 메인 jQuery자체가 버전업 되기 전까지는 새로 출시된 브라우저들을 지원할 수 없고, 역으로 브라우저 정보만 업데이트 되고 기능상 변경이 거의 없는데도 메인 버전이 올라가는 사태를 방지하기 위해서 분리되었다고 보는게 옳다.] "each" 함수[* 배열이나 객체 등의 집합에서 요소를 차례로 훑는다. native JS에서는 "forEach" 함수가 비슷한 역할을 한다.] 기능적으로야 더 좋은 라이브러리들도 많지만, jQuery가 순식간에 업계를 장악한 특장점은 바로 무지하게 쉽고 간편하다는 점이다. 'write less, do more.'가 모토로서 비프로그래머인 웹디자이너들도 어렵지 않게 이해할 수 있을 만큼 쉬운 편이다. [[JavaScript#s-5|DOM]] 구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할 정도다. 실제로 저자인 존 레식은 프로그래머들의 칭찬보다 순수 웹디자이너들의 감사 인사가 더 특별한 기쁨이라고 한다. 출시되었을 당시 좀 더 근본적인 목표는 모든 웹 브라우저에서 동일한 방법으로 자바스크립트를 구현하는 것이었다. 이것은 동시기에 나온 다른 자바스크립트 라이브러리도 마찬가지였다. jQuery가 나왔던 2000년대 중반은 웹 브라우저들간의 자바스크립트 호환성이 낮아서 개발자들이 골치를 썩던 시절이었다[* 특히 표준과 따로 노는 IE가 가장 악명높았다. 이쪽은 아예 명칭부터가 JScript였다. IE가 하도 따로 노는 데다 점유율도 높다 보니 파이어폭스에서도 document.all 같이 IE 전용 문법을 도입할 지경이었다.]. 따라서 라이브러리에서 제공하는 별도의 API를 통해 자바스크립트 코드를 작성하고, 라이브러리에서 이 코드를 사용자들이 접속한 웹 브라우저에 맞게 변환하여 실행하는 여러 라이브러리가 나왔고, 그 중 가장 쉽고 간편한 API 문법을 제공했던 jQuery가 살아남은 것이다. jQuery는 Behavioral model(행동 모델)에 기초한 아키텍처를 따른다. 특히 jQuery는 메서드 체이닝을 통해 DOM 엘리먼트를 조작한다. 예를 들어 기존에 이렇게 했다면[* 사실 jQuery가 각광을 받았던 2000년대 말~2010년대 초중반 때는 이렇게 쓸 수 없었다. const 는 크롬21(2012년), IE11(2013년) 이상 등에서 지원하며 querySelector 는 IE 8이상에서만 실행됐기 때문에 하위호환성을 위해 쓰기 어려운 getElementsByID 같은 구문을 써야 했다.], {{{#!syntax javascript const textNode = document.querySelector("#textNode"); textNode.style.color = "red"; document.querySelector("#someDiv").appendChild(textNode); }}} jQuery에선 이렇게 한다. 대신에 속도가 좀 더 느리다. 속도가 느린 이유는 jQuery 라이브러리를 거치면서 브라우저에 맞는 네이티브 자바스크립트로 변환된 뒤 실행되기 때문이다. {{{#!syntax javascript $("#textNode").css("color","red").appendTo("#someDiv"); }}} * '''$("#textNode")''' $라는 함수에 인자로 "#textNode"[* [[CSS]] 선택자와 동치이다. 해당 선택자는 HTML 태그 중 id="textNode"라는 값이 있는 맨 첫번째 요소를 가리킨다(id는 HTML 문서 내에서 '''유일'''한 값이어야 한다).]를 넘겨주겠다는 JavaScript 구문이다. jQuery는 기본적으로 $를 함수 이름으로 사용한다.[* 기적의 호이스팅(변수나 함수를 먼저 사용하고 후에 선언문을 추가해도 제대로 돌아간다)이 생겨서 쥐도 새도 모르게 $를 재선언한다면 jQuery.noConflict()를 호출해서 $대신 jQuery()라는 함수를 사용해도 된다. 또한 제이쿼리로 쓰는 모듈을 (function($){○○○○○○})(jQuery)로 감싸기도 한다.] $() 함수에 인자로 DOM selector를 넣어주면 해당하는 DOM 요소를 찾아 리턴해준다. (정확히는 DOM요소를 0번째로 가진 특정한 배열을 반환하는데, id는 특정한 상황이 아니라면 무리 없이 쓸 수 있지만 여러 개의 class를 한 번에 셀렉팅 할 경우 javascript의 document.getElementsByClassName()를 생각 없이 쓸 때와 같은 상황이 발생한다.) * '''$("...").css("color","red") / $("...").css({"color":"red"})''' jQuery의 메소드들은 기본적으로 리턴하는 데이터의 자료형이 jQuery이고, 메소드를 사용할 때는 자료형이 jQuery인 값에 붙여서 호출하도록 설계되어 있다. 즉, $("...")를 호출하여 찾고자 하는 DOM 요소를(여기서는 id가 textNode인 요소) jQuery형으로 리턴받고 .css() 메소드를 호출하여 작업을 수행하는 것. 메소드 이름을 보면 알겠지만 .css("color","red") 메소드는 대상의 css를 변경한다[* 해당 DOM 요소에 style = "color:red;"를 적용]. 그리고 변경한 DOM 요소를 jQuery형으로 리턴한다. 후자의 경우는 [[JSON]] 문법으로 여러 속성을 한꺼번에 지정할 때 사용한다. * '''$("...").css("...","...").appendTo("#someDiv") / $("...").css({"...":"..."...}).appendTo("#someDiv")''' 앞서 .css() 메소드로 색을 바꾸고 리턴한 요소에 .appendTo() 메소드를 적용하는 구문이다. 이게 가능한 이유는 플루언트(Fluent) 인터페이스 때문이다. 메서드의 반환값이 자기 자신의 참조가 되어 무한히 메서드를 이어붙일 수 있는 게 특징. jQuery는 [[MIT 허가서]]와 [[GNU 일반 공중 사용 허가서|GPL]] v2의 듀얼 라이선스를 가진 [[자유 소프트웨어]]이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, [[AJAX]] 개발이 쉽도록 디자인 되었다. 또한, jQuery는 개발자가 [[플러그인]]을 개발할 수 있는 기능을 제공한다. 덕분에 수많은 jQuery 플러그인들이 개발되어 있다! [[마이크로소프트]]와 [[노키아]]는 자사 [[플랫폼]]에 jQuery를 포함하는 계획을 발표한 바 있다. [[마이크로소프트]]는 [[Visual Studio]]의 ASP.NET AJAX [[프레임워크]]와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 웹 위젯 개발 플랫폼에 통합하였다. jQuery를 기반으로 하는 라이브러리가 많은데, [[HTML5]] Boilerplate나 [[트위터]] [[Bootstrap(프레임워크)|Bootstrap]] 버전 4 이하[* 버전 5부터는 jQuery가 제외되었다.]도 jQuery 기반으로 작동한다. jQuery Mobile도 있었는데, 모바일 웹페이지나 HTML5 웹앱 등의 제작에 사용하는 웹 개발 프레임워크다.[* 즉, 모바일 웹페이지에서 jQuery를 사용하려면 그냥 jQuery를 사용하는 것이지 jQuery Mobile를 사용하는 것이 아니다.] HTML5 웹앱 프레임워크들이 대개 그렇듯 [[iOS]], [[안드로이드(운영체제)|안드로이드]]는 당연히 지원하고, [[Windows Phone]], [[블랙베리(기업)|블랙베리]], [[심비안]] 등 웬만한 기기는 다 지원했다. 2014년 이후 업데이트 없었고 2018년에 중단되었다. 현재로써는 거의 사양세.저장 버튼을 클릭하면 당신이 기여한 내용을 CC-BY-NC-SA 2.0 KR으로 배포하고,기여한 문서에 대한 하이퍼링크나 URL을 이용하여 저작자 표시를 하는 것으로 충분하다는 데 동의하는 것입니다.이 동의는 철회할 수 없습니다.캡챠저장미리보기