jQuery 기초

jQuery를 배우기 위한 사전지식

jQuery는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요하다.
또한, HTML 요소을 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은 연관이 있다.

따라서 jQuery를 배우기 전에 다음과 같은 기초 지식이 필요하다.

  • HTML
  • CSS
  • Javascript

jQuery(제이쿼리)란?

jQuery(제이쿼리)는 오픈 소스 기반의 자바스크립트 라이브러리이다.

jQuery는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해준다.
또한, jQuery를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.
그래서 jQuery는 많은 인기 있는 자바스크립트 라이브러리 중 하나이다.

jQuery의 역사

jQuery는 2006년 미국의 존 레식(John Resig)이 뉴욕시 바캠프(Barcamp)에서 처음으로 소개하였다.
현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.

jQuery의 장점

현재 많이 사용되고 있는 자바스크립트 라이브러리는 다음과 같다.

  • 프로토타입(Prototype)
  • 도조(Dojo)
  • GWT(Google Web Toolkit)
  • MochiKit

이렇게 수많은 자바스크립트 라이브러리 중에서도 jQuery가 특히 많이 사용되는 이유는 다음과 같다.

  1. jQuery는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다.
  2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다.
  3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 준다.
  4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다.
  5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재한다.
  6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있다.

jQuery 버전

jQuery는 jQuery Foundation을 통해 버전 개발 및 유지 보수가 진행되고 있다.

현재 각 jQuery 버전별 최신 버전은 다음과 같다.

  1. 버전 1 : jQuery 1.12.4
  2. 버전 2 : jQuery 2.2.4
  3. 버전 3 : jQuery 3.3.1

jQuery 버전 1은 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전이다.
jQuery 버전 2는 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전이다.

2014년 10월에 배포된 jQuery 버전 3은 jQuery의 차세대 표준이다.
jQuery 버전 3은 기존 버전과의 호환성을 유지한 채 더욱 간결하게 작성되고, 더욱 빠르게 동작하도록 변경되었다.
2016년 9월에는 jQuery 버전 3의 최신 버전인 3.1.1 버전이 발표되었다.

jQuery 최신 버전에 대한 더 자세한 사항은 다음 링크를 참고하면 된다.

http://blog.jquery.com

jQuery 버전 2와 버전 3는 모두 익스플로러 9 이상에서만 동작한다.
이 때문에 아직도 많은 웹 사이트에서는 jQuery 버전 1을 사용하고 있다.



jQuery 적용(다운로드, CDN)

jQuery 적용

jQuery는 자바스크립트 라이브러리이므로, jQuery 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다.
따라서 웹 페이지에서 jQuery를 사용하기 위해서는 jQuery 파일을 먼저 웹 페이지에 로드(load)해야 한다.

웹 페이지에 jQuery 파일을 로드하는 방법은 다음과 같다.

  1. jQuery 파일을 다운받아 로드하는 방법
  2. CDN(Content Delivery Network)을 이용하여 로드하는 방법

jQuery 파일을 다운로드 받아 로드하는 방법

최신 버전의 jQuery 파일은 다음 공식 사이트에서 다운로드 받을 수 있다.

http://jquery.com/download

파일은 아래와 같이 2가지 버전이 존재한다.

  • 실전 버전(Production version) : 라이브 웹 사이트용 (압축되어 읽을 수 없는 코드)
  • 개발 버전(Development version) : 테스트 및 개발용 (압축되지 않고 읽을 수 있는 코드)

다운받은 jQuery 파일을 서버에 저장하고, <script>태그를 웹 페이지의 <head>태그 내에 삽입하면 된다. 혹은 콘텐츠 로딩 속도 성능을 높이기 위해 맨 아래부분에 삽입하는 경우도 있다.

<head>
    <script src="/media/jquery-3.3.1.min.js"></script>
</head>

<script> 태그 안에 type="text/javascript"는 왜 없는가? HTML5에는 필요없다. 자바 스크립트는 HTML5와 모든 최신 브라우저에서 기본 스크립팅 언어이다!

CDN을 이용하여 로드하는 방법

CDN(Content Delivery Network)이란? 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다.
이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.

CDN을 이용하면 jQuery 파일을 서버에 따로 저장하지 않아도 jQuery를 사용할 수 있다.
현재 이용할 수 있는 jQuery 버전 3.x의 CDN은 다음과 같으며, 어떤 CDN을 이용하더라도 동일한 동작을 한다.

jQuery.com CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

구글 CDN

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

MS CDN

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

CDNJS CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

sDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>



jQuery 문법

jQuery 문법

jQuery를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다.

$(선택자).동작함수();

달러($) 기호는 jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

$() 함수

$() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.

$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.
이러한 $() 함수를 통해 생성된 요소를 jQuery 객체(jQuery object)라고 한다.
jQuery는 이렇게 생성된 jQuery 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.

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() 함수 뒤에 호출하면, 정상적으로 동작할 것이다.

웹 브라우저에서는 현재 HTML 문서에서 발생한 오류를 F12 버튼으로 확인할 수 있다.

그래서 자바스크립트에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

window.onload = function() {
    // 자바스크립트 코드
};

마찬가지로 jQuery에서는 Document 객체의 ready() 메소드를 이용하여 같은 결과를 보장한다.

$(document).ready(function() {
   // jQuery 코드
});

또한, jQuery에서는 같은 결과를 보장하는 더욱 짧은 문법도 다음과 같이 제공한다.

$(function() {
   // jQuery 코드
});

다음 예제는 문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를 보여주는 예제이다.

$(document).ready( function() {
  // 문서가 전부 로드되었을 때 실행된다.
});
$(window).load( function() {
  // 모든 창이 모드 로드되었을 때 실행된다.
});


+ Recent posts