jQuery 효과 · 이벤트 · jqPlot 차트 완전 정리

 

 

Web Development · jQuery Effect & Chart

jQuery 효과 · 이벤트 · jqPlot 차트
한 번에 정리

show/hide/toggle · fadeIn/Out · focus/blur · 막대/선 그래프

시작 jQuery로 인터랙션과 시각화까지

이번 폴더는 jQuery의 두 가지 영역을 다룬다 — 애니메이션 효과(show, fade, toggle)와 이벤트 처리(focus, click, toggle), 그리고 jqPlot 라이브러리로 그래프 그리기. 모두 $().함수() 한 줄 패턴이다.

---

용어 핵심 키워드

.show(ms)요소를 나타나게

.hide(ms)요소를 사라지게

.toggle(ms)show/hide 번갈아

.fadeIn / .fadeOut투명도 페이드

.fadeToggle페이드 토글

.focus / .blur포커스 진입/이탈

.bind('click', fn)이벤트 등록 (구문법)

.width() / .height()크기 가져오기/설정

jqPlotjQuery 기반 차트 라이브러리

BarRenderer막대 그래프 렌더러

CategoryAxisRendererx축 카테고리(분기 등)

callback애니메이션 끝나고 실행할 함수

---

1 show · hide · toggle — 보이기/숨기기

$('#hide').click(function() { $('input[name="text1"]').hide(600); // 600ms 동안 사라짐 }); $('#show').click(function() { $('input[name="text1"]').show(1000); // 1초 동안 나타남 }); $('#toggle').click(function() { $('input[name="text1"]').toggle(2000); // 현재 상태 반대로 });

함수	동작	인자
.hide(ms)	요소를 점점 줄여서 숨김	지속시간 (ms)
.show(ms)	요소를 점점 펼쳐서 표시	지속시간 (ms)
.toggle(ms)	현재 상태와 반대로	지속시간 (ms)
.hide('slow' / 'fast')	각각 600ms / 200ms	문자열도 가능

📌 'input[name="text1"]'은 속성 선택자. name 속성이 text1인 input을 찾는다.

show / hide / toggle 효과

---

2 fadeIn · fadeOut · fadeToggle — 페이드 효과

show/hide는 크기까지 줄어든다(레이아웃 변형). fadeIn/Out은 크기는 그대로 두고 투명도만 변한다. 이미지 전환 같은 부드러운 효과에 적합.

$('#fadeOut').click(function() { $('#img1').fadeOut(2000, function() { // 2초 페이드 아웃 $('#img2').fadeIn(100); // 끝나면 콜백 — img2 등장 }); });

💡 콜백(callback) — 두 번째 인자로 함수를 넘기면, 애니메이션이 끝난 뒤 실행된다. 위 코드는 "img1이 사라지고 나서 img2를 보여라"는 의미. 두 동작이 겹치지 않게 순차로.

img1 fadeOut → 끝나면 img2 fadeIn (이미지 교체)

img1.jpg

img2.jpg

---

3 focus · blur · click 이벤트

// input에 포커스 들어오면 배경 오렌지 $('input').focus(function() { $(this).css('background-color', 'orange'); }); // 포커스 벗어나면 흰색 $('input').blur(function() { $(this).css('background-color', 'white'); }); // div를 클릭하면 1.5배로 커짐 $('div').bind('click', function() { $(this).width($(this).width() * 1.5); $(this).height($(this).height() * 1.5); }); // 이미지 클릭 토글 — 흐리게 / 진하게 $('img').toggle( function() { $(this).css('opacity', '0.5'); }, function() { $(this).css('opacity', '1.0'); } );

focus 시 오렌지 배경 div 클릭 → 1.5배로 커짐

▢

이미지 클릭 → 투명도 토글

CLICK ME

※ .toggle()의 두 얼굴

• .toggle(2000) — show/hide 번갈아 (애니메이션)
• .toggle(fn1, fn2) — 클릭마다 두 함수 번갈아 실행 (jQuery 1.9+에서 deprecated)
• 요즘은 .on('click', fn)과 상태 변수로 처리하는 게 권장

---

4 bind() vs on() — 이벤트 등록

.bind('click', fn) — 구문법

• jQuery 1.x 시절 표준
• 1.7부터 deprecated
• 지금도 동작은 함

.on('click', fn) — 권장

• jQuery 1.7+ 권장 방식
• 위임(delegation) 지원
• 여러 이벤트 한 번에 등록

// 같은 일을 하는 4가지 방식 $('#btn').click(handler); // 단축 $('#btn').bind('click', handler); // 구문법 $('#btn').on('click', handler); // 권장 $('#parent').on('click', '#btn', handler); // 위임 — 동적 추가 요소도 캐치

---

반응형

5 jqPlot — jQuery 기반 차트 라이브러리

jqPlot은 jQuery 위에서 작동하는 차트 라이브러리다. 막대·선·파이·버블 차트 등 다양한 종류를 한두 줄로 그릴 수 있다. 데이터만 넘기면 캔버스에 그래프가 그려진다.

필수 라이브러리 로드

<!-- 1. jQuery (전제) --> <script src="jquery-1.11.1.min.js"></script> <!-- 2. jqPlot 본체 --> <link rel="stylesheet" href="jqplot/jquery.jqplot.min.css"/> <script src="jqplot/jquery.jqplot.min.js"></script> <!-- 3. 차트 종류별 플러그인 --> <script src="jqplot.barRenderer.min.js"></script> <!-- 막대 --> <script src="jqplot.categoryAxisRenderer.min.js"></script> <!-- 카테고리 축 --> <script src="jqplot.canvasTextRenderer.min.js"></script> <!-- 축 라벨 --> <script src="jqplot.canvasAxisLabelRenderer.min.js"></script> <script src="jqplot.pointLabels.min.js"></script> <!-- 막대 위 숫자 -->

📌 플러그인 방식 — jqPlot은 코어가 가볍고, 필요한 차트 타입만 플러그인으로 추가한다. 막대만 쓸 거면 BarRenderer만 로드.

---

6 막대 그래프 (Bar Chart)

var s1 = [631, 217, 754, 1008]; // 데이터 (각 분기 매출) var ticks = ['1분기', '2분기', '3분기', '4분기']; // x축 라벨 $.jqplot('chartdiv', [s1], { title: '막대 그래프 예제1', seriesDefaults: { renderer: $.jqplot.BarRenderer, // 막대로 그려라 pointLabels: { show: true } // 막대 위에 숫자 표시 }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks, // 분기 라벨 label: '분기' }, yaxis: { label: '매출액' } } });

막대 그래프 — 1분기~4분기 매출

막대 그래프 예제1

6311분기

2172분기

7543분기

10084분기

분기

옵션	역할
title	차트 제목 (위쪽)
seriesDefaults.renderer	차트 종류 — BarRenderer/LineRenderer 등
pointLabels.show: true	각 데이터 위에 숫자 표시
axes.xaxis.ticks	x축 라벨 배열
axes.xaxis.label	x축 전체 이름
axes.yaxis.label	y축 전체 이름

---

7 선 그래프 (Line Chart)

선 그래프는 가장 단순하다. 플러그인 없이도 기본으로 그려진다. 데이터를 배열로 넘기면 끝.

$.jqplot('chartdiv', [[3,7,9,1,5,3,8,2,5]], { title: '선 그래프 예제', axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, axes: { xaxis: { label: "X 축" }, yaxis: { label: "Y 축" } } });

데이터 [3,7,9,1,5,3,8,2,5] — 9개 점을 잇는 선

선 그래프 예제

Y 축

X 축

---

8 jqPlot 데이터 형식

jqPlot은 2차원 배열을 받는다. $.jqplot('id', [[데이터]], 옵션) — 바깥 배열은 여러 시리즈, 안쪽 배열은 각 시리즈의 데이터.

// 시리즈 1개 — 1차원 배열을 한 번 더 감쌈 $.jqplot('div1', [[3, 7, 9, 1, 5]]); // 시리즈 여러 개 — 한 차트에 두 줄 $.jqplot('div1', [ [3, 7, 9, 1, 5], // 시리즈 1 [2, 4, 6, 8, 10] // 시리즈 2 ]); // 좌표 형식 — [x, y] 쌍의 배열 $.jqplot('div1', [[ [1, 5], [2, 8], [3, 3] ]]);

---

9 자주 하는 실수

증상	원인	해결
fadeOut 후 콜백이 안 실행됨	콜백을 두 번째 인자로 안 줌	.fadeOut(2000, fn) 형태로
focus가 안 먹힘	input이 readonly나 disabled	속성 제거
jqPlot이 빈 화면	chartdiv에 width/height 없음	div에 명시적 크기 지정
막대 그래프인데 선으로 나옴	BarRenderer 플러그인 미로드	jqplot.barRenderer.min.js 로드
x축 라벨이 1,2,3...로 나옴	CategoryAxisRenderer 미설정	renderer + ticks 둘 다 설정
데이터가 안 보임	1차원 배열만 넘김	2차원으로 — [[데이터]]

---

10 핵심 한 줄 요약

JQUERY EFFECT · EVENT · jqPLOT

크기 변화 효과.show / .hide / .toggle (ms)

투명도 효과.fadeIn / .fadeOut / .fadeToggle

콜백함수 두 번째 인자 = 애니메이션 끝나고 실행

포커스 이벤트.focus(fn) / .blur(fn)

현재 요소$(this)

크기 조작.width() / .height() — 인자 있으면 설정

차트 호출$.jqplot('id', [[데이터]], 옵션)

막대 그래프BarRenderer + CategoryAxisRenderer

선 그래프기본 — 추가 플러그인 없이 동작

Tags

#jQuery #showHide #fadeInOut #fadeToggle #focus #blur #clickEvent #jqPlot #barChart #lineChart #callback #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery, showHide, fadeInOut, fadeToggle, focus, blur, clickEvent, jqPlot, barChart, lineChart, callback, 티스토리