• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)

목차
  1. jQuery 버전
  2. jQuery 이용법 2가지
  3. jQuery 다운로드/설치
  4. jQuery CDN 이용
  5. jQuery 최신버전 CDN

 

jQuery 버전 

 

1.
그누보드54 경우, 1.12.4 버전 사용 중. (210803 현재)

그누보드53 경우, 1.8.3 버전 사용 중.

2.
현재, 3.X.X 버전대까지 나옴.

3.
버전 1.X.X 와 버전 3.X.X 차이: 구 버전 브라우저 지원여부

https://sir.kr/qa/285752

 

 

jQuery 이용법 2가지

 

방법1 - jQuery 다운로드 / 설치.

Query.com 사이트에서 jQuery 파일 다운받아 서버에 올린 후 링크거는 법


방법2 - jQuery CDN 끌어와 이용.

구글 같은 CDN (Content Delivery Network 콘텐츠 전송 네트워크) 이용.

 

 

jQuery 다운로드/설치

1. jQuery 버전 2가지


① Production 버전 : 압축 버전, 일반 유저용. (※ 파일명에 min 붙어 있음.)

② Development 버전 : ※ 무압축 버전, 개발자용.

 


2. 다운로드 가능 주소

 

https://jquery.com/download/

 


3. script 태그 추가

서버에 업로드 후, <head>와 </head> 태그 사이에 아래 코드 추가.


<script src="업로드경로/jquery-1.12.4.min.js"></script>



 

PS1.

HTML5에서는 <script> 태그 안에 type="text/javascript" 속성 넣을 필요 없음.


PS2. 

그누보드5 경우, /js 폴더에 업로드 되어 있으며,

/head.sub.php 파일의 <head>와 </head> 태그 사이에 아래 코드 존재.

add_javascript('<script src="'.G5_JS_URL.'/jquery-1.12.4.min.js"></script>', 0);

 

PS3.

jQuery 외부링크를 다른 jQuery 라이브러리 밑에 배치 시 아래 에러 발생.

Uncaught ReferenceError: $ is not defined

 

PS4.

최근엔, HTML/CSS 빠른 로드 위해 </body> 앞에 넣기도 함.

 

PS. script 태그의 async, defer 속성 참고 !!
 

jQuery CDN 이용

 

1.

「jQuery CDN」 키워드로 구글링해 아래 주소에 접속.

https://releases.jquery.com/ (구: https://code.jquery.com)

 

2.

원하는 버전의 「minified (최소화버전)」 클릭해, 소스 복사.

  • uncompressed 버전 - 원 버전
  • minified 버전 - 원 버전을 압축한 버전
  • slim 버전 - 일부 기능(예: ajax 등) 누락된 버전
  • slim minified 버전 - slim 버전을 압축한 버전

 


PS1. jQuery 구글 CDN 이용


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 


PS2. jQuery MS(마이크로소프트) CDN 이용


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

 


PS3. CDN 이용하면 로딩 더 빠름. 

 

왜냐면, 많은 사이트가 CDN 방식 이용해, 방문자가 다른 사이트 방문하면서 캐시 생성되었을 가능성 크므로.

또한, CDN 방식은 접속자에게 가장 가까운 서버에서 콘텐츠가 전송되는 방식으로 이루어지므로 속도에 좋음.

 

 

jQuery 최신버전 CDN

[압축버전]


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

 


[원본버전]


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

 



분류 제목
Effect JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과…
Effect JQ - stop() 메서드 ★ - 멈추게 하기 (= 슬라이드/애니 중단 = 움직임 멈추기/멈춤 = stop…
Effect JQ - Callback (콜백함수) ★ - 추가 호출 실행 함수
Effect JQ - Chaining 기법 ★ - 여러 메서드 연쇄 실행. (= 메서드 이어서 실행시키기. = 체이닝)
HTML_CSS JQ - text(), html(), val() , attr() 메서드 - (내용얻기/값얻기/속성얻기) (내… 2
HTML_CSS JQ - append(), prepend(), after(), before() 메서드 - (요소추가 / 내용…
HTML_CSS JQ - remove() / empty() 메서드 - (요소제거 / 내용삭제 / 내용비우기) ※ 리무브, 엠…
HTML_CSS JQ - addClass() , removeClass() , toggleClass() , css() 메서드 …
HTML_CSS JQ - css() 메서드 ★★★ - CSS 설정/반환 (= CSS메서드 = 스타일메서드) ※ 스타일 주기
HTML_CSS JQ - width() , height() , innerWidth() , innerHeight() , out…
Traversing JQ - Traversing - 특정요소찾기 (= 특정요소선택 = 트래버싱)
Traversing JQ - parent() , parents() , parentsUntil() 메서드 - 부모요소찾기 (= 부…
Traversing JQ - children() 메서드 - 자식요소찾기 / find() 메서드 - 자손요소찾기
Traversing JQ - 형제찾기 메서드 - siblings() , next() , nextAll() , nextUntil(…
Traversing JQ - 검색필터링 메서드 - first() , last() , eq() , filter() , not() …
AJAX JQ - AJAX (아작스) 소개 - 정의 / 기본예제 / 메서드종류
AJAX JQ - load() 메서드 ★ - 파일 내용 가져오기 (= load메서드 = 아작스 로드메서드)
AJAX JQ - get()/post() 메서드 - 서버에 정보요청 (= get메서드 = 겟메서드 / post메서드 …
Misc JQ - noConflict() 메서드 ★★★ - javascript (JS) 기반의 다른 프레임워크와의 충…
Examples jQuery Examples - 제이쿼리 예제 복습
2/15
목록
찾아주셔서 감사합니다. Since 2012