제이쿼리 라이브러리(jQuery Library)

재이·2022년 2월 8일
4

jQuery

목록 보기
1/1

※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 바탕으로 작성되었음

제이쿼리 라이브러리(jQuery Library)

본격적으로 jQuery를 학습하기 전에 jQuery(이하 제이쿼리)의 개념에 대하여 잠깐 언급하겠다. 제이쿼리는 자바스크립트의 가장 대표적인 라이브러리 언어라고 할 수 있다.

라이브러리(Library)란?
제이쿼리에는 일반 자바스크립트에서 볼 수 없는 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다. 이렇게, 그대로 불러와 사용할 수 있도록 구성된 기능적인 함수나 작은 프로그램의 집합을 라이브러리(Library)라고 한다.

따라서, 그 다양한 기능을 사용하려면 우선 jQuery.com에 접속하여 '제이쿼리 라이브러리' 파일을 다운로드해야 한다.

제이쿼리의 연동 방식에는 두 가지가 있다.

첫 번째는 직접 제이쿼리 파일을 '다운로드' 받아서 연결하는 방식이며, 두 번째는 직접 링크 주소를 입력하여 불러오는(import) 'CDN 호스트 링크 방식'이다.

다운로드 방식

[Download] 버튼의 위를 보면 'minifield(축소)'와 'uncompressed(원본)' 버전 중 한 가지를 체크할 수 있따. 우선 minified 방식을 체크하고 [Download] 버튼을 클릭한다.

'minified' 방식은 코드의 줄바꿈이나 개발을 위한 주석(설명) 등이 생략된 버전이다.
'uncompressed' 파일은 그에 비해 큰 용량을 차지하지만 줄바꿈과 코드 내에 주석이 달려있어 제이쿼리를 개발할 때 편리하게 사용된다.

현재 우리는 새로운 제이쿼리 라이브러리를 개발하는 것이 아닌, 구현되어 있는 기능을 불러와 사용할 목적이므로 용량이 가벼운 'minified' 방식으로 다운로드한다. 다운로드한 *.js 파일을 HTML 파일의 하나위에 임의로 만든 [js] 폴더에 저장한다.

이렇게 다운로드한 js 파일은 다음과 같이 HTML의 <head> 요소 안에서 불러올 수 있다.

<head>
  <script type"text/javascript" src="js/jquery-1.8.1.min.js"></script>
</head>

CDN 호스트 링크 방식

제이쿼리를 제공하는 기업별 주소들이다. 그 중 http://code.jquery.com/jquery-latest.js를 사용하면 가장 최신의 버전으로 자동 연동된다.

google --- http://ajax.googlrapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
microsoft --- http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js
jquery --- http://code.jquery.com/jquery-1.8.1.min.js / http://code.jquery.com/jquery-latest.js

참고로, 위 다운로드 방식 등 설명에 등장한 '1.8.1' 버전은 참고하고 있는 도서가 집필된 2012년 9월 기준이다. 더욱 최신의 버전이 새롭게 공개되었을 수 있으니 기본적으로 가장 최신의 라이브러리도 연동시키는 마지막 링크(~latest.js)를 권장한다고 한다.

앞의 링크 중 하나를 골라 다음과 같이 링크 방식으로 삽입할 수 있다.

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

선택자 및 속성(Selector & Attribute)

앞 장 '자바스크립트 기본 다지기'에서 살펴 본 바로는 DOM(문서 객체)을 불러오는 선택자에 따라 '표준방식 브라우저(크롬, 파이어폭스, 사파리 등)'와 '비표준 방식 브라우저(IE8 이하 버전)' 간의 호환성에 문제가 있었지만 제이쿼리에는 그러한 문제점들이 없다.

자바스크립트는 기본적으로 인터프리터 언어이므로, 실행문을 윗줄부터 순서대로 수행한다. 제이쿼리에서 선택자를 사용할 경우, '$(document).ready(function(){실행문})'의 형식으로 실행 함수를 작성해야 한다.

이유는 제이쿼리가 <body>요소보다 위에서 import(삽입)되기 때문에 문서의 모든 요소들이 로딩된 이후에야 요소 선택자를 사용할 수 있기 때문이다.

$(document).ready(function(){
  실행문;
});

다음과 같이 $를 사용하여 간단히 줄여 써도 결과는 같다.

$(function(){
  실행문;
});

※ 선택자
HTML 문서의 특정 요소를 선택하고자 할 때 사용하며, 그 종류는 다음과 같다.

$("*") --- 전체 요소 선택
$("태그명") --- 태그명으로 요소 선택
$("#아이디명") --- 아이디명으로 요소 선택
$(".클래스명") --- 클래스명으로 요소 선택
("태그명1 태그명2") --- 태그명1의 하위 요소 중 태그명2의 요소들 선택
("태그명1>태그명2") --- 태그명1의 자식 요소 중 태그명2의 요소들 선택
$("선택 요소").parent() --- 선택 요소를 기준으로 부모 요소를 선택
$("선택 요소").children("태그명") --- 선택 요소를 기준으로 자식 요소들 선택
$("선택 요소").prev() --- 선택 요소들 기준으로 형제 요소 중 이전 요소 선택
$("선택 요소").next() --- 선택 요소를 기준으로 형제 요소 둥 다음 요소 선택
$("선택 요소").siblings("태그명") --- 선택 요소를 기준으로 형제 요소들 모두 선택
$(":종류"); --- 폼의 input 요소 중 종류(type)가 일치하는 요소들 선택

예를 들어, 표에 정리된 선택자를 사용하여 특정 css 스타일을 적용하려면 '선택자.css("속성", "속성값")'의 형태로 쓸 수 있다. 즉, $("h1").css("color","red") 형식이 되겠다.

문서 객체 조작(DOM Control)

탐색 선택자

탐색 선택자는 좀 더 정확히 요소 선택을 가능하게 하는데, 그 종류는 다음과 같다.

$("ul li:odd") --- <ul>의 <li>요소 중 홀수 인덱스 요소만 선택
$("ul li:even") --- <ul>의 <li>요소 중 짝수 인덱스 요소만 선택
$("ul li:first") --- <ul>의 <li>요소 중 첫 번째 요소만 선택
$("ul li:last") --- <ul>의 <li>요소 중 마지막 요소만 선택
$("ul li:eq(1)"), $("ul li").eq(1) --- <ul>의 <li>요소 중 두 번쨰 요소만 선택(인덱스 0부터 시작)
$("ul li:lt(2)") --- <ul>의 <li>요소 중 세 번째 이전 요소만 선택
$("ul li:gt(2)") --- <ul>의 <li>요소 중 세 번째 이후 요소만 선택
$("ul li:nth-child(2n)") --- <ul>의 <li>요소 중 2의 배수 번째 요소만 선택
$('ul li:contains('문자')") --- <ul>의 <li>요소 중 "문자"가 포함된 요소만 선택
$("ul li:has('span')") --- <ul>의 <li>요소 중 span 태그를 포함하는 요소만 선택
$("ul li")fitter(".theObj") --- <ul>의 <li>요소 중 class='theObj"인 요소만 선택
$("ul li").find("a") --- <ul>의 <li>요소가 포함되는 <a>요소만 선택
$("ul li:visible") --- <ul>의 <li>요소 중 보이는 요소만 선택
$("ul li:hidden") --- <ul>의 <li>요소 중 숨겨져 있는 요소만 선택
$("h1, h2") --- h1, h2 요소들만 선택
$("ul li").not(:emoty) --- <ul>의 <li>요소 중 내용을 가진 요소만 선택

문서 객체 조작 메서드

문서 객체의 생성, 복제, 추가, 삭제 및 속성에 대한 변경, 삭제할 때 사용한다.

$("선택 요소").html() --- 선택한 요소의 하위 요소들을 반환
$("선택 요소").html("새 요소") --- 선택한 요소의 하위 요소들을 새 요소들로 변경
$("선택 요소").text("새 텍스트") --- 선택한 요소의 텍스트를 새 텍스트로 변경
$("새 요소") --- 새 요소를 생성
$("선택 요소").append("새 요소") --- 선택 요소의 마지막 자식요소로 새 요소를 추가
$("선택 요소").prepend("새 요소") --- 선택 요소의 첫 자식 요소로 새 요소를 추가
$("새 요소").appendTo("요소 선택") --- 선택 요소의 마지막 자식 요소로 새 요소를 추가
$("새 요소").prependTo("요소 선택") --- 선택 요소의 첫 자식 요소로 새 요소를 추가
$("새 요소").insertBefore(요소 선택) --- 선택 요소 이전 위치에 형제요소로 새 요소를 추가
$("새 요소").insertAfter(요소 선택) --- 선택 요소 다음 위치에 형제요소로 새 요소를 추가
$("선택 요소").clone(true / false) --- 선택 요소를 복제 (true:하위요소 포함 복제)
$("선택 요소").remove() --- 선택 요소를 삭제
$("선택 요소").empty() --- 선택 요소의 하위 요소들 모두 삭제
$("선택 요소").attr("속성") --- 선택 요소의 특정 속성을 지정
$("선택 요소").attr("속성", "값") --- 선택 요소의 지정한 속성을 새 값으로 변경
$("선택 요소").addClass("클래스명") --- 선택 요소에 새 클래스명을 부여
$("선택 요소").removeClass("클래스명") --- 선택 요소에 지정된 클래스명을 삭제
$("선택 요소").toggleClass("클래스명") --- 선택 요소에 클래스명이 없으면 추가, 있으면 삭제
$("선택 요소").hasClass("클래스명") --- 선택 요소에 클래스명이 있으면 true를 반환
$("선택 요소").wrap("<div></div>") --- 선택 요소를 <div>요소로 둘러 쌈
$("선택 요소").wrapAll("<div></div>") --- 선택 요소들 전체를 <div>요소가 한 번에 둘러 쌈

이벤트(Event)

앞서 자바스크립트 영역에서 설명한 바와 같이, 웹 브라우저 내에서 벌어지는 버튼 클릭이나 마우스의 움직임 등 모든 행위를 '이벤트'라고 한다. 그리고 이벤트가 발생했을 때 함수 또는 실행문이 수행되도록 해당 이벤트를 지정해두는 요소를 이벤트 핸들러라 하는데, 이벤트의 종류는 다음과 같다.

click() --- 선택 요소를 클릭했을 때 발생
dblclick() --- 이벤트 대상에 더블클릭했을 때 발생
mouseover() --- 마우스를 이벤트 대상에 올려놓았을 때 발생
mouseout() --- 마우스가 이벤트 대상에서 벗어났을 때 발생
focus() --- 이벤트 대상에 포커스가 생겼을 대 발생
blur() --- 이벤트 대상에 포커스가 잃었을 때 발생
focusin() --- 이벤트 대상에 포함된 input 요소에 포커스가 있으면 발생
focusout() --- 이벤트 대상에 포함된 input 요소에 포커스를 잃었을 때 발생
keydown() --- 키를 눌렀을 때 발생
keypress() --- 키를 눌렀을 때 발생
mouseenter() --- 마우스가 선택 요소 내로 들어오면 발생
mouseleave() --- 마우스가 선택 요소 밖으로 나가면 발생
mousemove() --- 마우스가 움직일 때마다 발생
resize() --- 윈도우 창에 사이즈를 조절할 때마다 발생
submit() --- 양식(form)에서 전송 버튼을 누를 때 발생
reset() --- 양식(form)에서 취소 버튼을 누를 때 발생
toggle() --- 클릭할 때마다 순차적으로 함수를 번갈아가면서 실행
hover() --- 마우스 올렸을 때와 마우스가 벗어났을 때 각각의 함수를 실행
unload() --- 문서를 종료했을 때 실행
change() --- 값이 바뀌고, 포커스가 옮겨졌을 때 실행
bind() --- 여러 개의 이벤트를 적용 시 사용

이벤트 함수는 아래의 [기본형식] 과 같이 작성한다. 자바스크립트에서는 이벤트 핸들러에 'on'을 붙였지만 제이쿼리에서는 붙이지 않는다. 단, 이때에도 제이쿼리 실행문을 잊으면 안된다!

[기본형식]

$("선택 요소").click(function() {
  실행문;
});

효과(Effects)

효과 메서드를 사용하면, 선택 요소를 숨기거나 노출할 때 다양한 효과를 적용할 수 있으며, 이러한 효과들로 인해 보다 다이내믹하고 인터랙티브한 사이트의 제작이 가능하다. 효과 메서드에는 다음과 같은 종류가 있다.

$("요소선택").hide() --- 선택 요소를 숨김
$("요소선택").show() --- 선택 요소를 노출
$("요소선택").toggle() --- 선택 요소가 보이면 숨기고, 숨겨져 있으면 노출
$("요소선택").slideUp() --- 선택 요소를 말아 올라가듯 숨김
$("요소선택").slideDown() --- 선택 요소를 말아 내리듯 노출
$("요소선택").slideToggle() --- 위의 slideUp/slideDown 효과를 번갈아 적용
$("요소선택").fadeOut() --- 선택 요소를 서서히 사라지게 함
$("요소선택").fadeIn() --- 선택 요소를 서서히 나타나게 함
$("요소선택").fadeToggle() --- 위의 fadeIn/fadeOut 효과를 번갈아 적용
$("요소선택").fadeTo() --- 선택 요소를 원하는 만큼 투명화시킴

효과 메서드에는 속도와 콜백함수를 입력하는데, 입력값에 따라 효과의 진행 속도가 달라진다. 속도는 slow, normal, fast 등의 문자형식이나 시간(milliseconds)을 표시하는 숫자형식을 사용할 수 있다. 콜백함수란, 효과의 진행이 끝난 뒤에 실행되는 함수이다.

[기본형식]

$("선택 요소").hide("속도", 콜백함수);

※속도 : slow, normal, fast 또는 milliseconds(천분의 1초, <예> 1000 = 1초)
※콜백함수 : 메소드가 모두 완료된 후에 실행될 함수(생략 가능)

애니메이션(Animation)

선택 요소를 움직이거나 크기를 변형시킬 때에는 애니메이션 효과를 적용한다.

다음 [기본형식] 과 같이 반응 속도에 따라 애니메이션 진행 속도는 달라진다. 콜백함수는 애니메이션 효과의 진행이 끝난 후 실행되는 함수이며, 역시 생략할 수 있다.

[기본형식]

$(선택요소).animatee({애니메이션 속성}, 반응속도, 콜백함수);

※반응속도 : slow, normal, fast 또는 millisecond(천분의 1초, <예. 1000 = 1초0
※콜백함수 : 메소드가 모두 완료된 훙에 실행될 함수(생략 가능)

애니메이션의 구현을 위해서는 '방향(top, left, bottom, right)'이나 '크기(width, height)', '위치(position)'에 대한 옵션이 필요하며 경우에 따라 투명도(opaacity)를 조정하기도 한다.

Tip
버튼을 여러 번 클릭하면 요소가 혼자서 움직인다. 이런 현상을 어떻게 막을 수 있을까?
요소를 클릭한 수만큼의 '실행 명령'이 메모리의 대기열(queue, 큐)에 쌓여서 다시 버튼을 누르지 않아도 대기 중이던 효과들이 모두 진행되는 현상이다. 이를 막으려면 clearQueue 메서드로 큐를 비우거나 stop 메서드로 강제 종료해야 한다.
※clearQueue() : 큐에 쌓인 효과들을 삭제한다.
※stop() : 현재 진행 중인 효과를 정지시킨다.

제이쿼리 모바일(jQuery Mobile)

제이쿼리(jQuery)는 데스크탑 PC 환경의 웹 브라우저에 최적화된 기능을 제공한다. 그래서 최근 급성장하는 스마트폰이나 태블릿 등의 모바일 기기에서는 구현할 수 없는 기능들이 존재한다. 예를 들어, 우리가 앞에서 학습한 이벤트 중에는 스마트폰이나 태블릿에서의 기본적인 입력 방식인 '스크린 터치'와 관련된 이벤트가 없었다.

하지만 '제이쿼리 모바일(jQuery Mobile)'을 사용하면 스마트폰이나 태블릿 등 모바일 기기에 최적화된 췝 프레임워크를 제공받을 수 있다.

제이쿼리 모바일 준비과정

  • 우선 제이쿼리 모바일 홈페이지 www.jquerymobile.com 에 접속한다.
  • 제이쿼리 라이브러리를 다운로드 했듯 이제 '제이쿼리 모바일 라이브러리(library)'를 설치해야 하는데, 이 또한 제이쿼리와 비슷하게 링크를 사용하여 라이브러리 파일을 연동하는 CDN 호스트 링크 방식과 직접 다운로드하여 연동하는 방식 등 2가지를 제공한다.
  • 다음과 같이 <head>요소 안에 css와 js파일을 연동시키면 되는데, 주의할 점은 제이쿼리 라이브러리 연동이 제이쿼리 모바일에 대한 것보다 상위에 위치해야 한다는 것이다.
<head>
  <title>Page Title</title>
  <meta http-equiv="content-type" content="text/html ; charset = utf-8" />
  <script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

제이쿼리 모바일 기본 구조

제이쿼리 모바일 기본 구조는 다음과 같이 각 영역에 data-role 속성으로 역할 표시를 한다. data-role값으로는 한 페이지의 전체 영역을 의미하는 'page'와 페이지 내부에서의 영역 구분을 위한 'header', 'content', 'footer' 등이 있으며, 모두 <div>로 둘러싸게 된다.

[기본 구조]

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>메인 타이틀</h1>
    </div>
    <!-- /header -->
    
    <div data-role="content">
      <p>컨텐츠 내용 영역</p>
    </div>
    <!-- /content -->
    
    <div data-role="footer">
      <h4>푸터 영역</h4>
    </div>
    <!-- /footer -->
  </div>
  <!-- /page -->
</body>

다음은 페이지를 2개로 나누어 작성한 예이다. 각각 'mainPage'와 'subPage1'라는 id를 부여한 <div>를 작성하고 'data-role'을 'page'로 작성함으로써 서로 다른 페이지가 된다.

<!DOCTYPE html> 
<html> 
<head> 
<title>jquery mobile</title> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* { margin:0; padding:0; }
</style> 
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme="b" id="mainPage">
	<div data-role="header">
		<h1>메인 타이틀</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p><a href="#sub1" data-transition="slidedown">서브 페이지1</a></p>		
	</div><!-- /content -->
	<div data-role="footer">
		<h4>풋터영역</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="sub1"  id="sub1" data-add-back-btn="true" data-theme="a">
	<div data-role="header">
		<h1>sub1 타이틀</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p>컨텐츠 내용 영역</p>		
	</div><!-- /content -->
	<div data-role="footer">
		<h4>풋터영역</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

이제, 첫 페이지의 컨텐츠 영역에 있는 '서브페이지1'이라는 링크를 터치하면 slidedown 효과가 자동으로 적용되어 다음 페이지가 위에서 미끄러지듯이 내려오고, 서브페이지가 열리면 상단에는 [뒤로 가기]버튼이 배치된다. 또한, 'data-theme'은 디자인에 관련된 '테마' 기능으로, a~z까지 제공하므로 연습 시 활용해 볼 수 있다.

제이쿼리 모바일 이벤트

제이쿼리 모바일은 스마트폰, 태블릿 등 모바일 환경에 특화된 이벤트를 제공한다.

tap --- 스크린에서 선택 요소를 터치할 때 발생
taphold --- 스크린에서 선택 요소를 오래 터치할 때 발생
swipe --- 스크린에서 선택 요소를 좌/우로 문지를 때 발생
swipeleft --- 스크린에서 선택 요소를 좌측으로 문지를 때 발생
swiperight --- 스크린에서 선택 요소를 우측으로 문지를 때 발생
orientation --- 모바일, 태블릿 기기의 방향을 전환할 때 발생
가로가 긴 방향인 경우 'Landscape' 반환 / 세로가 긴 방향인 경우 'Potrait' 반환
vmouseover --- 선택 요소를 터치하거나 마우스가 오버될 때 발생
vmouseout --- 선택 요소를 터치하거나 마우스가 아웃될 때 발생

profile
재이
그림쟁이 개발자

0개의 댓글