제이쿼리(JQuery)를 사용하는 이유와 사용법

제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다.

 

라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프로그램의 모음이다. 혼자서 동작하는 완전한 프로그램이 아니라 특정한 부분의 기능만을 수행하도록 제작되었으며 컴파일 기계어의 형태로 존재한다.

 

1. javascript , JQuery의 차이점

자바스크립트 : 선택자의 설정, 스타일 등 기존 명령이나 코드 작성이 달라 초반 진입장벽이 높다는 단점이 있으며
내장형 스크립트를 사용한다.

제이쿼리 : 자바스크립트의 진입장벽을 낮추기 위해 만들어졌으며 cdn방식이나 외부 연결방식으로 파일을 연결해 사용한다. (호환성 부분은 1.12.4 버전이 가장 안전함)

[사용하는 이유]
*자바스크립트 언어를 간편하게 사용할 수 있음(치트키 같은 역할)*

1. 대부분의 웹 브라우저에서 지원된다
2. HTML의 DOM부분을 손쉽게 조작할 수 있으며 간단한 CSS스타일도 적용이 가능하다.
3. 애니메이션 효과나 대화형 처리를 간단하게 적용할 수 있다.
4. 같은 동작을 하는 프로그램을 더 짧은 코드로 구현할 수 있다.
5. 오픈 라이선스를 적용해 누구든지 자유롭게 사용할 수 있다.
6. 참고할 수 있는 문서가 많다.

▶ 적용하는 방법 2가지

1)  제이쿼리 파일을 다운받아 저장하고 script태그를 웹페이지 head 태그 내에 삽입

2) CDN이용 (Content Delivery Network)

- 웹사이트 접속자가 콘텐츠를 다운로드할 경우 자동으로 가까운 서버에서 다운로드하도록 하는 기술임

- 트래픽이 분산되며 콘텐츠 전송 시간이 빨라진다는 장점이 있다.

$(선택자).동작함수();

* $달러 기호는 제이쿼리를 의미하며 이를 사용함으로써 제이쿼리에 접근할 수 있게 해 준다.

 

$() 함수

선택된 html요소를 제이쿼리에서 이용할 수 있는 형태로 생성해준다.

html의 태그와 css선택자를 선택할 수 있으며 이런 $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 한다.

 

Document 객체의 ready() 메소드

자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.