-
728x90반응형
제이쿼리 시작
제이쿼리(jQuery)
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있다.
또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다.
제이쿼리를 배우기 위한 사전지식
제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요하다.
또한, HTML 요소를 선택하고, CSS 스타일을 변경하는 등 HTML 과 CSS와도 많은 연관이 있다.
따라서 제이쿼리를 배우기 전에 다음과 같은 기초 지식이 필요하다.
- HTML
- CSS
- 자바스크립트
제이쿼리의 역사
제이쿼리는 2006년 미국의 존 레식(John Resig)이 뉴욕시 바캠프(Barcamp)에서 처음으로 소개하였다.
현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.
제이쿼리의 장점
현재 많이 사용되고 있는 자바스크립트 라이브러리는 다음과 같다.
- 프로토타입(Prototype)
- 도조(Dojo)
- GWT(Google Web Toolkit)
- MochiKit
이렇게 수많은 자바스크립트 라이브러리 중에서도 제이쿼리가 특히 많이 사용되는 이유는 다음과 같다.
- 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다.
- HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다.
- 애니메이션 효과나 대화형 처리를 간단하게 적용해 준다.
- 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다.
- 다양한 플러그인과 참고할 수 있는 문서가 많이 존재한다.
- 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있다.
제이쿼리 버전
제이쿼리는 jQuery Foundation을 통해 버전 개발 및 유지 보수가 진행되고 있다.
현재 각 제이쿼리 버전별 최신 버전은 다음과 같다.
- 버전 1 : jQuery 1.12.4
- 버전 2 : jQuery 2.2.4
- 버전 3 : jQuery 3.2.1
제이쿼리 버전 1은 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전이다.제이쿼리 버전 2는 버전 1에서 지원하는 익스플로러 6, 7, 8버전에 대한 지원을 중단한 버전이다.2014년 10월에 배포된 제이쿼리 버전 3은 제이쿼리의 차세대 표준이다.제이쿼리 버전 3은 기존 버전과의 호환성을 유지한 채 더욱 간결하게 작성되고, 더욱 빠르게 동작하도록 변경되었다.2017년 3월에는 제이쿼리 버전 3의 최신 버전은 3.2.1 버전이 발표되었다.제이쿼리 최신 버전에 대한 자세한 사항은 아래 링크를 참고.
TIP : 제이쿼리 버전 2와 버전 3는 모두 익스플로러 9 이상에서만 동작한다.
이 때문에 아직도 많은 웹 사이트에서는 제이쿼리 버전 1을 사용하고 있다.
제이쿼리 적용
제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다.
따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 한다.
웹 페이지에 제이쿼리 파일을 로드하는 방법은 다음과 같다.
- 제이쿼리 파일을 다운받아 로드하는 방법
- CDN(Content Delivery Network)을 이용하여 로드하는 방법
제이쿼리 파일을 다운받아 로드하는 방법
최신 버전의 제이쿼리 파일은 다음 공식 사이트에서 다운받을 수 있다.
이렇게 다운받은 제이쿼리 파일을 서버에 저장하고, 다음 <script> 태그를 웹 페이지의 <head> 태그 내에 삽입하면 된다.
문법
<head>
<script src = "/파일경로/제이쿼리파일명.js"></script>
</head>
예제
<head>
<script src = "/media/jquery-1.12.4.min.js"></script>
</head>
CDN을 이용하여 로드하는 방법
CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야할 때, 자동으로 가장 가까운 서버에서 다운 받도록 하는 기술이다.
이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.
이러한 CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있다.
현재 이용할 수 있는 제이쿼리 버전 1의 CDN은 다음과 같으며, 어떤 CDN을 이용하더라도 같은 동작을 한다.
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>
예제
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery.min.js"></script>
</head>
제이쿼리 문법
제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다.
제이쿼리의 기본 문법은 다음과 같다.
문법
$(선택자).동작함수( );
달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.
$( ) 함수
$( ) 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.
$( ) 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
이러한 $( ) 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 한다.
제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.
Document 객체의 ready( ) 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다.
보통은 별다른 문제가 발생하지 않지만, 다음과 같은 경우에는 오류가 발생한다.
- 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
- 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
다음 예제는 아직 생성되지 않은 HTML 요소에 속성을 추가하는 예제이다.예제
function func() {
addAttribute(); // 아이디가 "para"인 HTML 요소에 속성을 추가함.
createElement(); // 아이디가 "para"인 HTML 요소를 생성함.
}
function createElement() {
var criteriaNode = document.getElementById("text");
var newNode = document.createElement("p") newNode.innerHTML = "새로운 단락입니다.";
newNode.setAttribute("id", "para");
document.body.insertBefore(newNode, criteriaNode);
}
function addAttribute() {
document.getElementById("para").setAttribute("style", "color: red");
}
위의 예제에서 addAttribute( ) 함수는 아이디가 "para"인 HTML 요소에 새로운 속성을 추가하는 함수이다.
또한, createElement( ) 함수는 아이디가 "para"인 HTML 요소를 생성하여 추가해 주는 함수이다.
위의 예제에서는 아이디가 "para"인 HTML 요소가 생성되기 전에 해당 요소에 속성을 추가해 주는 addAttribute( ) 함수가 호출되므로, Uncaught TypeError 가 발생하여 실행중이던 스크립트는 중지될 것이다.
만약 먼저 호출되는 addAttribute( ) 함수를 createElement( ) 함수 뒤에 호출하면, 정상적으로 동작할 것이다.
TIP : 웹 브라우저에서는 현재 HTML 문서에서 발생한 오류를 F12 버튼으로 확인할 수 있다.
그래서 자바스크립트에서는 Window 객체의 onload( ) 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
문법
window.onload = function( ) {
자바스크립트 코드;
}
마찬가지로 제이쿼리에서는 Document 객체의 ready( ) 메소드를 이용하여 같은 결과를 보장하고 있다.
문법
$(document).ready(function() {
제이쿼리 코드;
});
또한, jQuery Team 에서는 같은 결과를 보장하는 더욱 짧은 문법을 다음과 같이 제공하고 있다.
문법
$(function() {
제이쿼리 코드;
});
다음 예제는 문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를 보여주는 예제이다.
예제
1234567891011121314151617181920212223242526272829<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Syntax</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(document).ready( function() {$("#doc").text("문서가 전부 로드됐어요!");});$(window).load( function() {$("#win").text("창이 모두 로드됐어요!");});</script></head><body><h1>문서와 창이 모두 로드되는 시점</h1><p>결과보기를 다시 눌러보면서 두 시점의 차이를 살펴보세요!</p><iframe src="/jquery/intro" width="100%" height="230px"></iframe><p id="doc">잠시만 기다려 주세요!</p><p id="win">잠시만 기다려 주세요!</p></body></html>cs 728x90반응형'Library > jQuery' 카테고리의 다른 글
요소의 영역(크기/위치) (0) 2018.10.24 필터링 메소드 (0) 2018.10.24 요소의 탐색 (0) 2018.10.24 요소의 추가 / 복사 및 삭제 (0) 2018.10.24 요소의 선택 (CSS/제이쿼리 선택자) (0) 2018.10.23
