jQuery(제이쿼리) 정리

 

jQuery는 자바스크립트 라이브러리 일종이다. "write less, do more"를 통해 알 수 있듯이 기존 자바스크립트 문장을 더 적은 라인으로 줄일 수 있다. 또한 라이브러리 자체도 가볍고 설치도 필요없이 사용할 수 있다.

[개요]

• jQuery 는 빠르고 간결한 자바스크립트 라이브러리이다.

• HTML DOM 횡단(HTML Document traversing, HTML 요소들을 넘나드는 것), 이벤트 처리, 애니메이션, AJAX 를 단순화 하여 빠른 웹 개발을 가능하게 해준다.

• 다양한 브라우저에 지원된다.

• 라이브러리 자체가 매우 경량 파일이다. (약 90kb 수준의 파일 크기)

• 존 레식(John Resig)에 의해 개발되었다.

[장점]

• HTML 과 DOM, CSS 의 변경이 매우 간편하다.

• 이벤트 처리가 간편하다.

• 애니메이션 같은 각종 효과를 적용하기 쉽다.

• AJAX, JSON 과 같은 처리가 간편하다.

• 브라우저 호환성을 해결할 수 있다.

[다운로드 및 라이브러리 포함 방법]

- 다운로드

다운로드를 원한다면 http://jquery.com/ 에서 라이브러리 파일을 다운 받을 수 있다.

 

- jQuery 를 사용하기 위한 라이브러리 포함

1. 로컬 PC 저장소에 물리적으로 존재하는 경우(다운로드 받은 경우)에는 저장된 파일의 경로까지 직접 지정해 주어야 한다.

<script type="text/javascript" src="juery-x.x.x.js"></script> // x.x.x 는 버전

2. CDN(Content Delivery Network) 으로 직접 경로 지정

<script type="text/javascript" src="http://code.jquery.com/jquery.x.x.x.js"></script> // x.x.x는 버전

3. jQuery UI를 사용하기 위한 CSS 및 라이브러리 포함

<link rel="stylesheet" href="jquery-ui.css"></link>
<script type="text/javascript" src="jquery-x.x.x.js"></script>
<script type="text/javascript" src="jquery-ui-x.x.x.js"></script>
// 또는
<link rel="stylesheet" herf="http://code.jquery.com/ui/x.x.x/temes/ba...css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery...js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/...-ui.js"></script>

[사용 방법]

1. http://jquery.com 에서 파일을 다운로드하여 사용하는 방법

 

※ 다운로드 받을 수 있는 종류

- production 버전
 : 소스를 압축해서(불필요한 공백 및 개행 제거) 웹 서버에서 빠르게 실행할 수 있도록 경량화/최소화 한 버전

- development 버전
 : 테스트나 디버깅 또는 코드에 대한 분석을 위해 압축을 하지 않고 가독성을 높여 놓은 버전
   (공백 및 개행 처리가 되어 있음)

production 버전

development 버전

 

2. CDB(Content Delivery Network)을 통해 사용하는 방법

 

웹 페이지를 실행할 때 마다 공객 서버에서 네트워크를 이용해 jQuery를 다운로드 받을 수 있도록 해 주는 개념이다. 별도의 파일을 다운도르 받을 필요 없이 다음과 같은 구문을 통해 포함시킨다.

<script type="text/javascript" src="http://code.jquery.com/jquery.x.x.x.min.js"></script> 
// x.x.x는 버전
// min은 production 버전

[참조 및 학습 사이트]

jQuery

 

jQuery Learning Center

 

jQuery Tutorial

[선택자 구성 방법]

jQuery(선택자).동작()

                 ↓

$(선택자).동작();
                   --------
                   선택 요소의 함수를 호출

[대표적인 선택자 3가지]

1. 타입 선택자 (요소 선택자, 엘리먼트 선택자)

페이지 상의 모든 <p> 요소를 선택하고자 할 경우

$("p")

 

2. 클래스 선택자

<p class="test"> 와 같이 클래스가 test인 요소를 선택하고자 할 경우

#(".test")

 

3. 아이디 선택자

<p id="text> 와 같이 아이디가 test인 요소를 선택하고자 할 경우

$("#test")

[그 외 선택자]

   - $("*") : 모든 요소를 선택한다.
   - $(this) : 현재 요소를 선택한다. (따옴표 없음에 유의)
   - $("div span") : <div> 요소 안에 있는 (하위의) <span> 요소를 선택한다.
   - $("p.test") : <p> 요소 중 test 클래스인 요소를 선택한다. 
   - $("p:first") : 첫 번째 <p> 요소를 선택한다.
   - $("ul li:first") : 첫 번째 <ul> 에서 첫 번째 <li> 요소를 선택한다.
   - $("ul li:first-child") : 모든 <ul> 에서 첫 번째 <li> 요소를 선택한다.
   - $("[href]") : href 속성을 가진 모든 요소들을 선택한다.
   - $("a[target='_blank']") : 모든 <a> 요소들 중 target 속성에 _blank 값을 가진 것들을 선택
   - $(":button") : 모든 <button> 요소와 모든 <input type="button"> 을 선택한다.
   - $("tr:even") : 모든 짝수 <tr> 요소를 선택한다.
   - $("tr:odd") : 모든 홀수 <tr> 요소를 선택한다.
   - $("ul > li") : <ul> 요소에서 직계 자손인 <li> 요소만 선택한다.
                    (다중 리스트 구조로 되어 있을 때...)
                                                                                 :
                                                                                 :