jQuery 간단한 설명

출처 : http://ko.wikipedia.org/wiki/JQuery#.EC.82.AC.EC.9A.A9.EB.B2.95

jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

목차

[숨기기]

• 1 기능
• 2 사용법
• 3 주석
• 4 더 읽어보기
• 5 바깥 고리

[편집] 기능

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

• DOM 엘리먼트 선택
• DOM 트래버설 및 수정 (CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원)
• 이벤트
• CSS 조작.
• 특수효과 및 애니메이션
• Ajax
• 확장성
• 유틸리티 - 브라우저 버전, "each" 함수
• 자바스크립트 플러그인

[편집] 사용법

jQuery는 한 개의 JavaScript 파일로 존재한다. 공통의 DOM, 이벤트, 특수 효과, Ajax 함수를 포함한다. 다음 코드를 쓰면, 웹 페이지로 포함시킬 수 있다:

<script type="text/javascript" src="path/to/jQuery.js"></script>

jQuery는 두 가지의 상호 작용 스타일을 갖고 있다:

• $ 함수 이용. jQuery 오브젝트의 팩토리 메소드이다. 이 함수들은 "chainable"하다: 각각은 jQuery 오브젝트를 리턴한다.
• $. -가 앞에 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다.

일반적으로 여러 개의 DOM 노드들을 조작하는 웍플로우는 $ 함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로 0개 혹은 그 이상의 HTML 페이지 내의 엘리먼트를 리퍼런스하는 jQuery 오브젝트가 리턴된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다. 예를 들면 다음과 같다:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

…div 태그가 달린 모든 엘리먼트를 찾되, 클래스 애트리뷰트가 test인 것을 찾는다. p 태그를 찾되, 클래스 애트리뷰트가 quote인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 blue를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로 슬라이드(미끄러지게) 시킨다. $ 및 add 함수는, 찾아낸(matched) 집합(set)에 영향을 준다. addClass 및 slideDown는 리퍼런스된 노드들에 영향을 준다.

$.가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티) 메소드들이다. 예를 들면 다음과 같다:

$.each([1,2,3], function() {
  document.write(this + 1);
});

… 234 를 도큐먼트에 출력한다.

Ajax 루틴들은 $.ajax 및 관련 코드를 이용하여 수행할 수 있다. 이를 사용하여, 원격 데이터(remote data)를 로드하거나 조작할 수 있다.

$.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()된다.

 

 

Tutorials:How jQuery Works

http://docs.jquery.com/Tutorials:How_jQuery_Works#jQuery:_The_Basics