| 양쪽 이전 판이전 판다음 판 | 이전 판 |
| tech:jquery [2014/03/19 02:37] – 바깥 편집 127.0.0.1 | tech:jquery [2016/07/12 09:26] (현재) – 바깥 편집 127.0.0.1 |
|---|
| | {{tag>jquery 자바스크립트 javascript}} |
| ======jQuery====== | ======jQuery====== |
| |
| [[tech:javascript|자바스크립트]] 라이브러리입니다. 라이브러리란 소프트웨어를 제작할 때 빈번히 쓰이는 기능들을 모아서 사용할 수 있도록 먼저 작업을 해 놓은 겁니다. 쉽게 말하면 자주 쓰는 함수들을 모아놓은 거죠. 라이브러리를 사용함으로써 얻을 수 있는 이점들이 상당히 많습니다. | [[tech:javascript|자바스크립트]] 라이브러리이다. 라이브러리란 소프트웨어를 제작할 때 빈번히 쓰이는 기능들을 모아서 사용할 수 있도록 먼저 작업을 해 놓은 것이다. 쉽게 말하면 자주 쓰는 함수들을 모아놓은 거죠. 라이브러리를 사용함으로써 얻을 수 있는 이점들이 상당히 많다. |
| |
| * [[http://findfun.tistory.com/category/jQuery|정리 잘 된 블로그]] | * [[http://findfun.tistory.com/category/jQuery|정리 잘 된 블로그]] |
| * [[http://blog.vaslor.net/attachment/[email protected]|jQuery 강좌 PDF 186쪽]] | * [[http://blog.vaslor.net/attachment/[email protected]|jQuery 강좌 PDF 186쪽]] |
| |
| |
| =====주요 기능===== | =====주요 기능===== |
| <code "html4strict"> | <code "html4strict"> |
| <script type="text/javascript" src="path/to/jQuery.js"></script> | <script type="text/javascript" src="path/to/jQuery.js"></script> |
| </code> | </code> |
| | |
| | 구글이 가지고 있는 jquery 라이브러리를 아래의 코드로 포함시키는 방법이 있다.((http: 나 https: 를 생략하고 지정을 해주면, 현재 문서가 지정된 프로토콜이 http 인지, https 인지에 따라, 적합한 리소스를 이용하게 된다고 한다.)) |
| | |
| | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
| | |
| | |
| | |
| |
| jQuery는 두 가지의 상호 작용 스타일을 갖고 있다: | jQuery는 두 가지의 상호 작용 스타일을 갖고 있다: |
| |
| <code javascript> | <code javascript> |
| $("div.test").add("p.quote").addClass("blue").slideDown("slow"); | jQuery("div.test").add("p.quote").addClass("blue").slideDown("slow"); |
| </code> | </code> |
| | |
| |
| …''div'' 태그가 달린 모든 엘리먼트를 찾되, 클래스 애트리뷰트가 ''test''인 것을 찾는다. ''p'' 태그를 찾되, 클래스 애트리뷰트가 ''quote''인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 ''blue''를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로 슬라이드(미끄러지게) 시킨다. ''$'' 및 ''add'' 함수는, 찾아낸(matched) 집합(set)에 영향을 준다. ''addClass'' 및 ''slideDown''는 리퍼런스된 노드들에 영향을 준다. | …''div'' 태그가 달린 모든 엘리먼트를 찾되, 클래스 애트리뷰트가 ''test''인 것을 찾는다. ''p'' 태그를 찾되, 클래스 애트리뷰트가 ''quote''인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 ''blue''를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로 슬라이드(미끄러지게) 시킨다. ''$'' 및 ''add'' 함수는, 찾아낸(matched) 집합(set)에 영향을 준다. ''addClass'' 및 ''slideDown''는 리퍼런스된 노드들에 영향을 준다. |
| | |
| ''$.''가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티) 메소드들이다. 예를 들면 다음과 같다: | ''$.''가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티) 메소드들이다. 예를 들면 다음과 같다: |
| |
| document.write(this + 1); | document.write(this + 1); |
| }); | }); |
| </code> | </code> |
| |
| … ''234'' 를 도큐먼트에 출력한다. | … ''234'' 를 도큐먼트에 출력한다. |
| } | } |
| }); | }); |
| </code> | </code> |
| … 파라미터 ''name=John&location=Boston''을 주면서 some.php에 요청을 보낸다. 요청이 성공적으로 수행되었으면, 그 응답이 ''alert()''된다. | … 파라미터 ''name=John&location=Boston''을 주면서 some.php에 요청을 보낸다. 요청이 성공적으로 수행되었으면, 그 응답이 ''alert()''된다. |
| ^ 누구나 수정하실 수 있습니다. [[http://vaslor.net/syntax|위키 사용법]] 참고하세요. ^ | ^ 누구나 수정하실 수 있다. [[http://openwiki.kr/syntax|위키 사용법]] 참고하라. ^ |
| |
| {{tag>jquery}} | |
