본문 바로가기

IT/JQuery

Jquery 사이트 / 구문 문법 정리

// ********** 제이쿼리 다운로드

http://jquery.com에 접속한 후 메인 페이지에서 [Download jQuery] 버튼을 클릭하여 최신 버전의 파일을 다운로드합니다. 이렇게 다운로드한 라이브러리는 네트워크를 사용할 수 없는 상황에서도 jQuery를 테스트할 수 있습니다.

"사용자가 다운받은 파일의 경로"
"네크워크 상의 jQuery 라이브러리의 경로"
jQuery에서 제공하는 CDN : http://code.jquery.com/jquery-1.8.3.min.js
jQuery에서 제공하는 최신 jQuery CDN : http://code.jquery.com/jquery.min.js
MS에서 제공하는 CDN : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js
Google에서 제공하는 CDN : https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

사용방법 : 기존 jQuery 로드 부분을 제거하고 <script type="text/javascript" src="위 3개 중 하나"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

참고로 CDN이란 "contents delivery network"로서 제공하는 콘텐츠를 이 서버에 미리 옮겨놓고 필요할 경우 그 콘텐츠를 사용자에게 전달해 주는 것을 의미합니다.

 

// ********** 제이쿼리 사이트

http://jquery.com/ : 자바스크립트 라이브러리, 출간도서 소개 및 프로그램, 플러그인 다운로드 등 안내
http://www.jquerykorea.pe.kr/ : jQuery, Core, CSS, Events, 조작함수 등 정보 수록
http://www.jquery.kr/ : jQuery 강좌
http://apycom.com/ : jQuery 드롭다운 메뉴를 만들어주는 사이트
http://tympanus.net/codrops/category/tutorials/ : 현 시점에서 가장 많이 참고하고 있는 사이트로 템플릿을 제공

 

// ********** 구문 문법 정리

1) 명칭 정의
   태그(tag) : HTML 구성
   요소(element) : HTML 구성 태그와 id와 클래스
   노드(node) : HTML 구성 구조로서 태그, 요소와 같은 의미
   DOM : Document Object Model로서 HTML 요소 간의 긴밀한 노드 트리를 의미

2) $()의 의미
   jQuery() = $()

3) $(function(){ code })의 의미
   jQuery(document).ready(function(){ code });
   jQuery(function(){ code });
   $(function(){ code });

4) 기본 선택자
   태그 선택자 / 클래스 선택자 / id 선택자 / 그룹 선택자 / 전체 선택자

5) 계층 선택자
   descendant 선택자 / child 선택자 / sibling 선택자 / siblings 선택자

6) 속성 선택자
   attribute 선택자

7) 기본 필터 선택자
   eq 선택자 / gt 선택자 / lt 선택자 / first last 선택자 / even odd 선택자 / not 선택자

8) 내용 필터 선택자
   contains 선택자 / has 선택자 / empty 선택자

9) 보임 필터 선택자
   hidden 선택자 / visible 선택자

10) 자식 요소 필터 선택자
     first-child 선택자 / last-child 선택자 / nth-child 선택자

11) 탐색
     children() / find() / prev() / next() / siblings() / parent()

12) 필터링
     first() / last() / eq() / filter() / not() / has()

13) DOM 변경
     append() / prepand() / html() / text() / remove() / empty()