jQuery 란?

  • jQuery는 경량의, “적게 코딩하고, 더 많은 일을 하는”, JavaScript 라이브러리다.
  • jQuery의 목적은 웹사이트에 더 쉬운 방법으로 JavaScript를 사용하기 위함이다.
  • jQuery는 AJAX 호출이나 DOM manipluation 같은 주요 기능을 간략화하여 사용할 수 있는 장점이 있다.
  • jQuery는 JavaScript 사이사이에 껴 있는 구조다. 한 페이지의 모든 JavaScript를 jQuery로 대체할 필요는 없다.

jQuery 추가하기

jQuery 라이브러리를 직접 서버에 업로드 하는 방법과 타 서버가 제공하는 CDN(Content Delivery Network)를 통해 jQuery 라이브러리를 include 하는 방법이 있다.

방법 1. 직접 다운로드

  • http://jquery.com/download/ 다운로드
  • js 파일 삽입
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>

방법 2. CDN 사용(Google CDN)

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

jQuery 문법

jQuery 기본 문법

$(selector).action();

  • $ 는 define/access 를 나타냄
  • (selector) 는 대상이 되는 HTML elements 를 나타냄
  • action(); 은 elements 에 대한 행동(메소드, 명령)임

jQuery 기본 구조

$(document).ready(function(){
   // jQuery methods go here...
});

모든 jQuery는 해당 구문 안에 정의 되어야 한다. 해당 구문은 document, 즉 웹 페이지가 로딩된 후에 실행되는 명령으로, 해당 구문의 밖에서 정의된 jQuery는 오작동을 일으킬 확률이 높기 때문이다.

jQuery Selector

대상이 되는 HTML elements 를 기술해야 하며, elements 를 찾는 방법에는 태그 이름, id, class 등 무궁무진 하다. (보통은 id 로 하는거 같다)

  • 태그 이름 : $(“p”)
  • id : $(“#myid”)
  • class : $(“.myclass”)

jQuery Event

jQuery는 HTML 페이지에서 일어나는 이벤트를 처리하는데 적격인 문법이다. 이벤트가 실행되는 것을 “fires/fired” 라는 용어로 나타낸다.

단계 1. select와 그에 대한 이벤트 액션을 작성한다.

$("p").click();

단계 2. 해당 이벤트가 호출될 때, 실행될 메소드를 작성한다.

$("p").click(function(){
    // action goes here!!
    $(this).hide();
});