| 다음 판 | 이전 판 |
| tech:jquery [2013/09/29 12:45] – 새로 만듦 V_L | tech:jquery [2016/07/12 00:56] (현재) – 바깥 편집 127.0.0.1 |
|---|
| | {{tag>jquery 자바스크립트 javascript}} |
| | ======jQuery====== |
| | |
| | [[tech:javascript|자바스크립트]] 라이브러리이다. 라이브러리란 소프트웨어를 제작할 때 빈번히 쓰이는 기능들을 모아서 사용할 수 있도록 먼저 작업을 해 놓은 것이다. 쉽게 말하면 자주 쓰는 함수들을 모아놓은 거죠. 라이브러리를 사용함으로써 얻을 수 있는 이점들이 상당히 많다. |
| | |
| | * [[http://findfun.tistory.com/category/jQuery|정리 잘 된 블로그]] |
| | * [[http://blog.vaslor.net/attachment/[email protected]|jQuery 강좌 PDF 186쪽]] |
| | |
| | =====주요 기능===== |
| | jQuery는 다음과 같은 기능을 갖고 있다: |
| | |
| | * DOM 엘리먼트 선택 |
| | * DOM 트래버설 및 수정 (CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원) |
| | * 이벤트 |
| | * CSS 조작. |
| | * 특수효과 및 애니메이션 |
| | * Ajax |
| | * 확장성 |
| | * 유틸리티 - 브라우저 버전, "each" 함수 |
| | * 자바스크립트 플러그인 |
| | |
| | ===== 사용법 ===== |
| | |
| | jQuery는 한 개의 JavaScript 파일로 존재한다. 공통의 DOM, 이벤트, 특수 효과, Ajax 함수를 포함한다. 다음 코드를 쓰면, 웹 페이지로 포함시킬 수 있다: |
| | <code "html4strict"> |
| | <script type="text/javascript" src="path/to/jQuery.js"></script> |
| | </code> |
| | |
| | 구글이 가지고 있는 jquery 라이브러리를 아래의 코드로 포함시키는 방법이 있다.((http: 나 https: 를 생략하고 지정을 해주면, 현재 문서가 지정된 프로토콜이 http 인지, https 인지에 따라, 적합한 리소스를 이용하게 된다고 한다.)) |
| | |
| | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
| | |
| | |
| | |
| | |
| | |
| | jQuery는 두 가지의 상호 작용 스타일을 갖고 있다: |
| | * ''$'' 함수 이용. jQuery 오브젝트의 팩토리 메소드이다. 이 함수들은 "chainable"하다: 각각은 jQuery 오브젝트를 반환한다. |
| | * ''$.'' -가 앞에 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다. |
| | |
| | 일반적으로 여러 개의 DOM 노드들을 조작하는 웍플로우는 ''$'' 함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로 0개 혹은 그 이상의 HTML 페이지 내의 엘리먼트를 리퍼런스하는 jQuery 오브젝트가 반환된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다. 예를 들면 다음과 같다: |
| | |
| | <code javascript> |
| | jQuery("div.test").add("p.quote").addClass("blue").slideDown("slow"); |
| | </code> |
| | |
| | |
| | |
| | …''div'' 태그가 달린 모든 엘리먼트를 찾되, 클래스 애트리뷰트가 ''test''인 것을 찾는다. ''p'' 태그를 찾되, 클래스 애트리뷰트가 ''quote''인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 ''blue''를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로 슬라이드(미끄러지게) 시킨다. ''$'' 및 ''add'' 함수는, 찾아낸(matched) 집합(set)에 영향을 준다. ''addClass'' 및 ''slideDown''는 리퍼런스된 노드들에 영향을 준다. |
| | |
| | ''$.''가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티) 메소드들이다. 예를 들면 다음과 같다: |
| | |
| | <code javascript> |
| | $.each([1,2,3], function() { |
| | document.write(this + 1); |
| | }); |
| | </code> |
| | |
| | … ''234'' 를 도큐먼트에 출력한다. |
| | |
| | Ajax 루틴들은 ''$.ajax'' 및 관련 코드를 이용하여 수행할 수 있다. 이를 사용하여, 원격 데이터(remote data)를 로드하거나 조작할 수 있다. |
| | |
| | <code javascript> |
| | $.ajax({ |
| | type: "POST", |
| | url: "some.php", |
| | data: "name=John&location=Boston", |
| | success: function(msg){ |
| | alert( "Data Saved: " + msg ); |
| | } |
| | }); |
| | </code> |
| | … 파라미터 ''name=John&location=Boston''을 주면서 some.php에 요청을 보낸다. 요청이 성공적으로 수행되었으면, 그 응답이 ''alert()''된다. |
| | ^ 누구나 수정하실 수 있다. [[http://openwiki.kr/syntax|위키 사용법]] 참고하라. ^ |
| | |
| |
