Jquery
1) 제이쿼리 개요
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다.
또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할수 있습니다.
사용 방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery Intro</title>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(function() {
$("p").on("click", function() {
$("p").css("color", "red");
});
});
</script>
</head>
<body>
<p>이제부터 제이쿼리를 다 같이 공부해보죠!!<br>
마우스로 글씨를 클릭해보세요!!</p>
</body>
</html>
2) 제이쿼리 기초
제이쿼리란?
제이쿼리는 여러분의 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다.
또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.
이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다.
제이 쿼리의 장점
현재 많이 사용되고 있는 자바스크립트 라이브러리는 다음과 같습니다.
- 프로토타입(prototype)
- 도조(Dojo)
- GWT(Google Web Toolkit)
- Mochikit
이렇게 수 많은 자바스크립트 라이브러리 중에서도 제이쿼리가 특히 많이 사용되는 이유는 다음과 같습니다.
-
제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.
-
HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.
-
애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.
-
같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.
-
다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.
-
오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.
3) 제이쿼리 적용
제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js파일) 형태로 존재합니다.
따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야합니다.
적용법
사용하는 방법 : 공식홈페이지에서 js 파일을 다운로드
공식 홈페이지 : https://jquery.com/
해당파일 : 폴더에 넣기
Html head 태그 안에 경로 추가
<script src="./jquery-3.4.1.min.js"></script>CDN 으로 적용하는 방법
1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
2. 구글 CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3. MS CDN : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4. CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5. jsDelivr CDN : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
