[jQuery] jQuery 사용
jQuery 설치
☞ jQuery란?
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.
jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.
[출처] 위키백과, 우리 모두의 백과사전.
Site : https://jquery.com/
jQuery CDN Site : https://code.jquery.com/
01. jQuery CDN 링크사용
A) code.jquery.com 에 접속 후 minified를 클릭합니다.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
B) 위의 코드를 <head></head> 사이에 삽입합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> </body> </html>
02. jQuery 저장 후 사용
A) https://jquery.com/ 에 접속 후 오른쪽 상단의 Download Jquery 버튼을 클릭합니다.
Download the compressed, production jQuery 3.3.1 에 대고 오르쪽 마우스를 클릭해 폴더에 저장합니다. ( ex: js/jquery-3.3.1.min.js )
B) 위의 코드를 <head></head> 사이에 삽입합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> </body> </html>
홈페이지 접속시 자동으로 모바일 홈페이지로 이동 스크립트
모바일 디바이스 기기로 웹사이트 접속시 자동으로 모바일 사이트로 접속하게 만들기
example 01) PC용 홈페이지 index페이지 <head></head> 사이에 삽입
<script type="text/javascript">
var UserAgent = navigator.userAgent;
if (UserAgent.match(/iPhone|ipad|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
{
location.href = "/m/"; /* 모바일 홈페이지 경로 */
}
</script>
<?php
$connect = '0';
extract(array_merge($HTTP_GET_VARS, $HTTP_POST_VARS));
?>
<script-x language='JavaScript-x'>
//모바일 페이지로 이동.
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++){
if(uAgent.indexOf(mobilePhones[i]) != -1){
if(<?=$connect;?> == '0'){
document.location='모바일용 홈페이지 경로';
<? $connect = '0'; ?>
}
}
}
</script-x>
'JavaScript' 카테고리의 다른 글
| 자바스크립트(JavaScript)란? (0) | 2018.05.04 |
|---|
