[Do it!] 06. 제이쿼리 문서 객체 선택자와 조작법 [1.제이쿼리 기본 다지기]
자바스크립트의 문서 객체 모델(DOM, Document Object Model)은 브라우저 간 호환성이 떨어져 크로스 브라우징이 힘들다는 단점
이러한 문제를 해결하기 위해 제이쿼리를 사용
제이쿼리란?
제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 자바스크립트를 이용해 만든 라이브러리 언어
라이브러리 언어란, 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킴
제이쿼리는 다양한 함수들을 사용자에게 제공함으로써 자바스크립트에서 사용할 때 불편했던 몇 가지 점들을 간편하게 사용할 수 있도록 개선함
호환성 문제 해결
자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어진다는 단점
이러한 문서 객체 선택자의 호환성 문제가 제이쿼리에서 모두 해결됨
쉽고 편리한 애니메이션 효과 기능 구현
자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 하기 때문에 개발이 많은 시간 필요
제이쿼리는 애니메이션과 다양한 효과를 지원하는 메서드를 제공하여 개발 시간 많이 단축
제이쿼리 라이브러리 연동하기
1. 다운로드 방식
제이쿼리 라이브러리를 제공하는 사이트에서 제이쿼리 라이브러리 파일을 직접 내려받아 HTML에 불러오는 방식
2. 네트워크 전송 방식
온라인에서 제공하는 제이쿼리 라이브러리 파일을 네트워크를 통해 HTML에 불러오는 방식
두 방식의 차이점
다운로드 방식은 네트워크 상태와 관계없이 언제든 개발할 수 있다는 장점 But 컴퓨터에 파일 내려받아야함
간단히 테스트할 목적이라면 간편하게 연동할 수 있는 네트워크 전송 방식을 추천
IE 9 이상의 브라우저 -> v1.12.4
IE 8 이하의 브라우저 -> v1.12.X 이하 버전
다운로드 방식으로 연동
[jquery.js]와 [jquery.min.js]의 차이
| jquery.js | 소스에 들여쓰기, 줄 바꿈, 주석까지 정리된 비압출 파일 제이쿼리 자체를 개발할 때 유용함 |
| jquery.min.js | 소스에 들여쓰기, 줄 바꿈, 주석이 무시된 압축 파일 소스가 압축되어 있어 제이쿼리 자체를 개발하는 용도로 적합X 용량이 작아 로딩 속도가 빠름 |
제이쿼리 최신 버전에서 삭제된 이전 버전의 메서드 사용하기
제이쿼리는 최신 버전으로 자주 업그레이드 되기 때문에, 이전 버전에서 자주 사용했던 기능(메서드)이 삭제되어 사용할 수 없는 경우가 종종 있음. 이런 경우 최신 버전에서 삭제된 이전 버전(1.9 미만)의 기능을 사용하려면 'Migrate plugin'을 설치하면 됨
http://jquery.com/download => [Download the compressed, production JQuery Migrate 3.4.0]
네트워크 전송 방식으로 연동하기
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>