# jQuery

# jQuery란?

기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문들을 간소화하기 위해 '존 레식'에 의해 개발된 JavaScript 기반 라이브러리
즉, JavaScript 언어로 유용한 함수나 내용들이 이미 만들어져 있는 모음집

• 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발 가능하다.
  (적은 양의 코드로 빠르고 풍부한 기능 제공)

# jQuery 장점

• DOM 요소와 관련된 스크립트를 보다 쉽게 구현 가능하다.
• AJAX, 이벤트 처리 등을 폭넓게 지원한다.
• jQuery와 관련된 확장형 플러그인, 오픈 API 등을 지원한다.(차트, 슬라이드, 애니메이션 등)

# jQuery 라이브러리 연결 방법

head 태그 내부에 script 태그 jquery 관련 .js 파일 가져오기
(온/오프라인 방식이 있다.)

• 공식 사이트 : https://jquery.com

1. 오프라인 방식 : jQuery 라이브러리 직접 다운 받은 후 경로 지정

• .js 파일을 직접 다운 받아 저장한 후 해당 저장경로를 작성
• UnCompressed : 개발자 전용
  - 일반 js파일은 개발자가 볼 수 있도록 주석이나 코드 정렬등을 활용해 가시성을 유지시킨 파일
• Compressed : 배포 전용
  - min js 파일은 주석, 들여쓰기, 띄어쓰기 등 최소화시켜 파일의 용량을 줄여 간소화시켜 제공하는 파일

2. 온라인 방식 : CDN(Content Delivery Network)를 통한 연결

# jQuery 구문 작성

jQuery 구문으로 DOM 요소를 다루는 구문을 작성할 것이라서 jQuery 명령은 문서 상 요소들이 다 생성된 후 실행되어야 한다.

# 순수 자바스크립트와 jQuery구문과 비교 :

• 자바스크립트 :

window.onload = function(){
	실행 내용;
}

• jQuery 구문 세가지

// 첫 번째
jQuery(document).ready(function(){
	실행 내용;
});

// 두 번째
$(document).ready(function(){
	실행 내용;
});

// 세 번째
$(function(){
	실행 내용;
});

jQuery에서 해당 function은 DOM 요소들만 다 로드되면 바로 실행된다.
(여러 번 기술도 가능하다.)

• 테스트 코드 :

//자바스크립트 언어 
window.onload = function(){
	console.log("window.onload 문서 읽기 완료");
}

//jQuery 방식 1
jQuery(document).ready(function(){
    console.log("jquery 1 로 문서 읽기 완료");
});

//jQuery 방식 2
$(document).ready(function(){
    console.log("jquery 2 로 문서 읽기 완료");
});

//jQuery 방식 3
$(function(){
    console.log("jquery 3 로 문서 읽기 완료");
});

• 콘솔 출력 결과 :
  

window.onload가 가장 늦게 실행된 것을 확인할 수 있다.

---