Home » 웹 표준 -5. jQuery

웹 표준 -5. jQuery

5.1. JQuery 개요

  • JQuery는 브라우저 호환성이 있는 HTML 속 자바 스크립트 라이브러리이며, 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었다.
  • 즉 자바 스크립트를 쉽게 다룰 수 있도록 만든 모듈이며, 모든 브라우저에 호환성이 뛰어나고 단순화 시킬 수 있는 능력이 뛰어나서 많은 개발자들이게 인기가 있고, 가장 보편화 된 라이브러리이다.

JQuery 특징

  • 셀렉터(selector)
    • JQuery의 가장 큰 강점은 셀렉터(selector)에 있다.
    • 셀렉터는 HTML 문서의 DOM element를 선택, 접근하는 역할인데, 이 라이브러리를 이용하면 매우 쉽게 접근이 가능하다.
    • 트리 구조의 복잡하고 긴 HTML 문서 형태에서도 빠르고 쉽게 해당 요소들을 찾을 수 있다.
    • 예를 들어 HTML 문서 내의 id가 “A”인 것을 찾을 수 있고, 클래스가 “C”인 요소들을 가져올 수 있다.
    • 뿐만 아니라 특정 element나 element의 첫 번째, 두 번째, … 마지막 순 번째를 가져오고, 짝수, 홀수 번째도 단순히 1~2문장으로 접근 가능하다.
  • 메소드 체인(method chain)
    • JQuery가 자바 스크립트 라이브러리로 많은 메소드를 사용할 수 있는데 메소드 하나만 사용하는 것이 아닌 메소드 체인 형태로 사용 가능해서 코드의 반복을 피할 수 있고 가독성도 뛰어나다.
    • ex) $(‘#id’).메소드1().메소드2(‘size’, ‘10’).메소드3(); // 좌(메소드1)부터 실행 된다.
  • Ajax(Asyncronous Javascript And XML)
    • 비동기 통신이라는 것이 있는데 서버에 요청을 내가 기다리는 것이 아닌 요청을 해놓고 결과가 오면 알아서 반응하는 것이다.
    • JQuery는 Ajax를 단순화 시켜 편리하게 사용할 수 있도록 제공한다.
    • Ajax를 구현하기 위해서는 복잡한 자바 스크립트가 필요했는데 이 것을 이용하면 매우 단순화시켜서 누구나 사용 가능할 수 있게 해준다.
  • 플러그인(plugin)
    • 세계 많은 사람들이 사용하기 때문에 그에 맞는 플러그인이 계속 제공되고 있다.
    • 홈페이지에 원하는 기능을 구현하려고 할 때 원하는 것들을 플러그인 형태로 제공하고 있다.
    • 아래는 JQuery의 플러그인을 모아 놓은 홈페이지 주소이다.
    • Plugin

5.2. JQuery 다운로드 및 등록

JQuery 라이브러리 등록

  • jquery 라이브러리를 다운 받아 등록
    • http://jquery.com/ 접속 -> Download


그림 5. jquery 다운로드 1


그림 6. jquery 다운로드 2

  • 다운로드 받은 후 에 등록 해 준다.
    [php]
    <script type="text/javascript" src="../js/jquery-2-1.1.min.js"></script>
    [/php]

  • 또는 직접 주소를 입력해서 등록할 수도 있다.
    [php]
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    [/php]

5.3. JQuery 기본 문법

번호 설명
(1) document가 준비 완료 되었을 때 실행
(2) selector는 element가 들어가고 action부분에 동작을 지정 해 준다.

Element Selector

<js/week3/jqueryBasic.js>

<week3/jqueryBasic.html>

번호 설명
(1) 모든 button element를 클릭했을 때
(2) 모든 span element를 hide 시킨다.
(3) jquery 등록
(4) 버튼을 누르면 button.click 이 실행 되고 문서내의 p element의 내용들은 모두 감춰진다.

id Selector

<js/week3/jqueryBasic.js>

<week3/jqueryBasic.html>

번호 설명
(1) id가 hideButton인 항목이 클릭 되었을 때
(2) id가 test로 지정 된 항목들을 감춘다.
(3) id를 test로 지정
(4) id를 hideButton으로 지정

class Selector

<js/week3/jqueryBasic.js>

<week3/jqueryBasic.html>

번호 설명
(1) class가 hideButton2인 항목이 클릭 되었을 때
(2) class가 test2로 지정 된 항목들을 감춘다.
(3) class를 test2로 지정
(4) class를 hideButton2으로 지정

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week3메뉴 -> JQuery 기본 문법

selectors 목록

문법 설명
$(“*”) 모든 element 선택
$(this) 선택 된 element만 선택
$(“p.intro”) p element 안에 class가 intro인 항목 선택
$(“p:first”) 첫 번째 p element 선택
$(ul li:first) 첫 번째ul element의 첫 번째li element 선택
$(ul li:first-child) 모든 ul element의 첫 번째 li element 선택
$(“[href]”) href 속성이 적용 된 element 선택
$(“a[target=’_blank’]”) target=’_blank’ 속성이 적용 된 element 선택
$(“a[target!=’_blank’]”) target=’_blank’ 속성이 적용 되지 않은 element 선택
$(“:button”) type이 button인 element 선택
  • 위는 자주 사용되는 것들이며 더 많은 사항은 아래 주소를 참고할 것.
    • http://www.w3schools.com/jquery/jquery_ref_selectors.asp

5.4. JQuery 이벤트 핸들러

  • JQuery의 이벤트 처리의 기본은 아래와 같다.
    [php]
    $(element).action();
    [/php]

  • action 부분이 실제 이벤트 처리를 위한 부분이다.
    [php]
    $("p").click(function(){
    // action goes here!!
    });
    [/php]

  • 위와 같은 경우 button element의 click 이벤트가 발생했을 때 호출된다

자주 사용되는 이벤트 목록

  • Mouse Events

    이벤트 설명
    click 클릭 했을 때
    dblclick 더블 클릭 했을 때
    mouseenter 마우스가 해당 element 위에 있을 때
    mouseleave 마우스가 해당 element에서 떨어졌을 때

  • Keyboard Events

이벤트 설명
keypress 키를 눌렀을 때
keydown 키를 눌렀을 때
keyup 키를 눌렀다 떼었을 때
  • Form Events
이벤트 설명
submit submit 버튼을 눌렀을 때
change 개체 혹은 선택 영역의 내용이 바뀔 때 발생
focus 포커스를 받았을 때
blur 포커스를 잃었을 때
  • Document / Window Events
    이벤트 설명
    load 개체가 로드 되었을 때
    resize 화면의 사이즈가 바뀔 때
    scroll 스크롤 될 때
    unload 개체가 언로드 되기 직전
  • 이 외에 이벤트는 아래 홈페이지를 참고할 것.
    • http://www.w3schools.com/jquery/jquery_ref_events.asp

<week3/jqueryEvent.html>

<js/week3/jqueryEvent.js>

번호 설명
(1) click 이벤트
(2) dblclick 이벤트
(3) mouseenter 이벤트
(4) mouseleave 이벤트
(5) mousedown 이벤트
(6) mouseup 이벤트
(7) hover 이벤트
(8) keypress 이벤트
(9) css를 변경해 준다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week3메뉴 -> JQuery 이벤트 핸들러

5.5. JQuery UI 플러그인

  • http://jqueryui.com/
    • 위 사이트에 접속하면 jquery를 이용하여 미리 구현 해 둔 UI를 가져다 쓸 수 있다.

<week3/jqueryUI.html>

번호 설명
(1) jquery ui 라이브러리 등록
(2) jquery ui 스타일 시트 등록
(3) id를 datepicker로 지정
(4) datepicker element일 경우 datepicker() 액션 호출(jquery-ui 안에 들어있다)

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week3메뉴 -> JQuery UI