jQuery 최종 수정일 2026-06-19 01:52 조회수 8
홈 대시보드

jQuery

#it#javascript#jquery#프론트엔드#웹개발#frontend#ajax#dom#title#name#box#btn#menu#list#img

기본 정보

  • 이름: jQuery
  • 분류: JavaScript 라이브러리
  • 개발자: John Resig
  • 최초 공개: 2006년
  • 개발 언어: JavaScript
  • 주요 용도: DOM 조작, 이벤트 처리, AJAX 통신
  • 관련 주제: #jQuery #JavaScript #Frontend #AJAX #DOM

개요

jQuery는 JavaScript를 더 쉽고 간결하게 사용할 수 있도록 만들어진 오픈소스 라이브러리이다.

과거에는 브라우저 호환성 문제를 해결하고 DOM 조작을 간편하게 하기 위해 매우 널리 사용되었으며, 현재도 그누보드, 워드프레스, 레거시 PHP 프로젝트, 관리자 페이지 등에서 많이 사용되고 있다.

최근 신규 프로젝트에서는 React, Vue.js 등의 프레임워크 사용이 증가했지만, 기존 웹 시스템 유지보수에서는 여전히 중요한 기술이다.

주요 특징

  • 간결한 문법
  • 쉬운 DOM 조작
  • 이벤트 처리 간소화
  • AJAX 지원
  • 애니메이션 지원
  • 브라우저 호환성 우수
  • 풍부한 플러그인 생태계

동작 구조

Browser

↓

HTML

↓

jQuery

↓

DOM 조작

↓

화면 변경

jQuery 포함

CDN 방식

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

또는 프로젝트에 직접 다운로드하여 사용할 수 있다.

기본 문법

$(selector).action();

$() 함수는 jQuery의 핵심 함수이다.

문서 준비 이벤트

$(document).ready(function(){

  console.log("로드 완료");

});

축약형

$(function(){

  console.log("로드 완료");

});

요소 선택

ID 선택

$("#title")

Class 선택

$(".item")

태그 선택

$("div")

속성 선택

$("input[type=text]")

내용 변경

$("#title").html("안녕하세요");

텍스트 변경

$("#title").text("안녕하세요");

값 가져오기

$("#name").val();

값 설정

$("#name").val("구름");

CSS 변경

$("#box").css(

"color",

"red"

);

여러 속성

$("#box").css({

color:"red",

fontSize:"20px"

});

클래스 추가

$("#box").addClass(

"active"

);

클래스 제거

$("#box").removeClass(

"active"

);

클래스 토글

$("#box").toggleClass(

"active"

);

클릭 이벤트

$("#btn").click(function(){

  alert("클릭");

});

이벤트 등록

$("#btn").on(

"click",

function(){

}
);

실무에서는 .on() 사용이 권장된다.

숨기기

$("#box").hide();

보이기

$("#box").show();

토글

$("#box").toggle();

Fade 효과

$("#box").fadeIn();

$("#box").fadeOut();

Slide 효과

$("#menu").slideDown();

$("#menu").slideUp();

AJAX

GET 요청

$.get(

"/api/user",

function(data){

}

);

POST 요청

$.post(

"/api/login",

{

id:"admin"

}

);

AJAX

$.ajax({

url:"/api/user",

method:"GET",

success:function(data){

}

});

each()

$(".item").each(

function(){

}

);

반복문 처리에 사용된다.

append()

$("#list").append(

"<li>추가</li>"

);

remove()

$("#box").remove();

attr()

속성 조회

$("#img").attr(

"src"

);

속성 변경

$("#img").attr(

"src",

"logo.png"

);

실무 활용 분야

  • 그누보드
  • 워드프레스
  • 영카트
  • 관리자 페이지
  • ERP
  • 쇼핑몰
  • 레거시 PHP 프로젝트
  • CMS

장점

  • 배우기 쉬움
  • 코드가 간결함
  • 브라우저 호환성 우수
  • DOM 조작이 쉬움
  • AJAX 구현이 간편함
  • 플러그인이 풍부함

단점

  • 최신 프레임워크 대비 구조화가 부족
  • 대규모 프로젝트에는 부적합
  • Virtual DOM 미지원
  • 컴포넌트 개념 없음
  • 신규 프로젝트에서는 사용 비중 감소

JavaScript와 비교

기존 JavaScript

document.getElementById(

"title"

).innerHTML="Hello";

jQuery

$("#title").html(

"Hello"

);

더 간결한 문법을 제공한다.

jQuery와 React 비교

jQueryReact
DOM 직접 조작Virtual DOM
함수 중심컴포넌트 기반
구조화 부족구조화 우수
유지보수 어려움대규모 프로젝트 적합
레거시 프로젝트 활용최신 SPA 개발 표준

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

  • 이벤트는 .on() 사용
  • Ajax는 Promise 기반 fetch() 또는 Axios도 고려
  • DOM 탐색 최소화
  • 선택자 캐싱 활용
  • 플러그인 의존성 최소화
  • ES6 코드와 혼용 시 주의
  • XSS 방지를 위해 .text() 사용 고려
  • 레거시 프로젝트 유지보수에 적극 활용
  • 신규 프로젝트는 React·Vue와 비교 검토
  • jQuery 버전은 최신 안정 버전 유지

jQuery와 함께 사용하는 기술

대표 활용 사례

  • 게시판 댓글 기능
  • 회원가입 유효성 검사
  • AJAX 게시글 로딩
  • 관리자 페이지
  • 쇼핑몰 옵션 선택
  • 이미지 슬라이더
  • 팝업 관리
  • 실시간 검색 기능

관련 문서

출처

  • jQuery 공식 홈페이지
  • jQuery API Documentation
  • MDN Web Docs

백링크

AJAX그누보드