JQuery

[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>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인