💲
jQuery 치트시트

선택자(Selectors), DOM 탐색/조작, attr vs prop, 이벤트 위임(.on), 슬라이드/페이드 애니메이션, Ajax 통신(serialize/Promise), 유틸리티 및 Vanilla JS 대체 비교 퀵 레퍼런스
#jquery#javascript#dom#frontend#ajax#selectors#events#effects#vanilla-js#web최종 업데이트: 2026-10-03
jQuery 치트시트 핵심 명령어 및 실전 가이드

## 1. jQuery 도입 & 시작 (CDN & Ready)
최신 jQuery 3.7.x 버전을 CDN 또는 모듈 번들러로 프로젝트에 포함하고 DOM 준비 완료 시점에 안전하게 코드를 실행합니다.
```html
<!-- 🌐 [1] 공식 CDN 포함 (HTML <head> 또는 <body> 하단에 추가) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 구글 CDN (안정적, 빠른 캐시 공유) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
```

```javascript
// ⚡ [2] DOM 준비 완료(Document Ready) 표준 문법
// DOM 트리가 완성되면 실행 (이미지 등 전체 리소스 로드를 기다리지 않음)
$(function() {
  console.log("DOM 로드 완료! jQuery 준비됨.");
});

// 전통적인 전체 문법 (동일 동작)
$(document).ready(function() {
  // 초기화 코드
});

// 🖼️ [3] 모든 이미지, 프레임 등 전체 리소스 로드 완료 감지
$(window).on('load', function() {
  console.log("모든 에셋(이미지 등) 로드 완료");
});

// 🛡️ [4] 다른 라이브러리와 $ 충돌 방지 (noConflict)
var $jq = jQuery.noConflict();
$jq(function() {
  $jq('#title').text("충돌 없이 실행!");
});
```

## 2. 선택자 완벽 정리 (Selectors)
CSS3 선택자 문법을 완벽히 지원하며, jQuery 전용 강력한 필터 선택자를 제공합니다.
```javascript
// 🎯 [1] 기본 선택자
$('div')              // 태그 선택
$('#userId')          // ID 선택 (단일)
$('.active-item')     // 클래스 선택
$('h1, h2, p.intro')  // 복수(다중) 선택
$('*')                // 문서 전체 엘리먼트

// 🌲 [2] 계층 선택자
$('ul li')            // 자손 선택자 (모든 하위 li)
$('ul > li')          // 자식 선택자 (직계 자식 li만)
$('label + input')    // 인접 형제 (label 바로 뒤에 오는 input 1개)
$('h2 ~ p')           // 일반 형제 (h2 뒤에 나타나는 모든 형제 p)

// 🏷️ [3] 속성(Attribute) 선택자
$('input[type="text"]')          // 속성 정확히 일치
$('a[href^="https://"]')         // 속성 시작값 일치 (^=)
$('img[src$=".png"]')            // 속성 종료값 일치 ($=)
$('a[href*="google"]')           // 속성 부분 포함 (*=)
$('input[type!="hidden"]')       // 속성 불일치 (!=)

// 🔍 [4] 위치 및 상태 필터 선택자
$('li:first')         // 첫 번째 요소 (.first()와 동일)
$('li:last')          // 마지막 요소 (.last()와 동일)
$('li:eq(2)')         // 인덱스 2번 요소 (0부터 시작, 즉 3번째)
$('li:gt(2)')         // 인덱스 2 초과 (3번째 이후)
$('li:lt(2)')         // 인덱스 2 미만 (0, 1번째)
$('tr:even')          // 짝수 인덱스 (0, 2, 4...)
$('tr:odd')           // 홀수 인덱스 (1, 3, 5...)
$(':header')          // 모든 헤딩(h1 ~ h6)

// 📋 [5] 폼(Form) 전용 선택자
$(':input')           // input, textarea, select, button 전체
$(':text')            // type="text"
$(':checkbox')        // type="checkbox"
$(':radio')           // type="radio"
$(':checked')         // 체크된 체크박스/라디오
$(':selected')        // select 드롭다운에서 선택된 <option>
$(':disabled')        // 비활성화된 입력창
$(':enabled')         // 활성화된 입력창
```

## 3. DOM 트리 탐색 (Traversing)
선택한 요소를 기준으로 부모, 자식, 형제 요소로 이동합니다.
```javascript
// ⬆️ [1] 부모 / 조상 탐색
$('#myInput').parent();              // 바로 위 직계 부모 1단계
$('#myInput').parents('div.form-group'); // 상위 조상 중 조건에 맞는 요소들
$('#myInput').closest('.card');      // ★ 가장 가까운 상위 조상 탐색 (이벤트 위임 필수)
$('#myInput').parentsUntil('body');  // body 전까지의 모든 조상

// ⬇️ [2] 자식 / 자손 탐색
$('#menuList').children();           // 직계 자식 엘리먼트들
$('#menuList').children('li.active');// 직계 자식 중 active 클래스만
$('#menuList').find('.sub-link');    // ★ 모든 하위 깊은 자손 검색 (대단히 빠름)

// ↔️ [3] 형제(Sibling) 탐색
$('.current').siblings();            // 나를 제외한 모든 형제 요소
$('.current').next();                // 바로 다음 형제 1개
$('.current').nextAll();             // 뒤에 나오는 모든 형제
$('.current').prev();                // 바로 이전 형제 1개
$('.current').prevAll();             // 앞에 위치한 모든 형제

// 🎯 [4] 필터링 & 체이닝
$('li').first();                     // 목록의 첫 번째 li
$('li').last();                      // 목록의 마지막 li
$('li').eq(3);                       // 4번째 li 선택
$('li').filter('.special');          // 조건에 맞는 것만 남기기
$('li').not('.disabled');            // 조건에 맞는 것 제외하기
$('div').has('p');                   // p 태그를 자식으로 가진 div만 필터
```

## 4. DOM 조작 및 요소 삽입/삭제 (Manipulation)
콘텐츠 텍스트, HTML, 속성 제어 및 요소를 동적으로 추가/삭제합니다.
```javascript
// 📝 [1] 텍스트, HTML, Input Value 제어
$('#msg').text();                    // 텍스트 조회
$('#msg').text('새로운 일반 텍스트');   // 텍스트 변경 (HTML 태그 이스케이프)
$('#box').html();                    // 내부 HTML 조회
$('#box').html('<strong>강조</strong>'); // HTML 렌더링 변경
$('#username').val();                // input/select 입력값 가져오기
$('#username').val('lucky');         // input 입력값 설정

// 🏷️ [2] 속성(Attribute) vs 프로퍼티(Property) ★ 주의!
// .attr() : HTML 소스에 작성된 원본 속성 문자열
// .prop() : 브라우저가 관리하는 실시간 불리언 상태 (checked, disabled, selected)
$('#chkAgree').prop('checked');      // true / false 반환 (권장!)
$('#chkAgree').prop('checked', true);// 체크 활성화
$('#btnSubmit').prop('disabled', true); // 버튼 비활성화

$('#myLink').attr('href', 'https://example.com');
$('#myLink').removeAttr('target');

// 💾 [3] HTML5 data-* 속성 다루기
$('#item').data('role', 'admin');    // 메모리 상에 data-role 바인딩
const role = $('#item').data('role');// 'admin' 조회

// ➕ [4] 요소 추가 (내부 / 외부 삽입)
// 내부(Inside) 추가
$('#list').append('<li>마지막 자식으로 추가</li>');
$('#list').prepend('<li>첫 번째 자식으로 추가</li>');
$('<li>새 항목</li>').appendTo('#list'); // 주어-목적어 반대 구문

// 외부(Outside) 추가
$('#target').after('<div class="note">타겟 바로 뒤(형제) 추가</div>');
$('#target').before('<div class="note">타겟 바로 앞(형제) 추가</div>');

// 🗑️ [5] 요소 삭제 및 비우기
$('#modal').empty();                 // 내부 자식 요소들만 전부 삭제 (박스는 유지)
$('#tempItem').remove();             // 요소 자체를 DOM에서 완전히 삭제
$('#cachedItem').detach();           // DOM에서는 빼지만 이벤트/데이터는 메모리에 유지
$('#item').clone(true);              // 이벤트 핸들러까지 복제 (true 옵션)
```

## 5. CSS 스타일 & 클래스 조작
스타일시트 클래스를 토글하거나 인라인 스타일, 요소의 좌표와 크기를 계산합니다.
```javascript
// 🎨 [1] 클래스(Class) 조작 (가장 권장되는 UI 변경 방식)
$('#btn').addClass('active');        // 클래스 추가 (공백 구분 다중 추가 가능)
$('#btn').removeClass('active');     // 클래스 제거
$('#btn').toggleClass('dark-mode');  // 없으면 추가, 있으면 제거
$('#btn').hasClass('active');        // 클래스 보유 여부 (true / false)

// 🖌️ [2] 인라인 CSS 스타일 조작
$('#alert').css('color', '#ff4d4f'); // 단일 스타일 변경
$('#alert').css({                    // 객체로 다중 스타일 일괄 변경
  backgroundColor: '#fff1f0',
  border: '1px solid #ffa39e',
  fontSize: '14px',
  display: 'block'
});

// 📏 [3] 크기(Width & Height) 계산
const w1 = $('#box').width();        // 순수 컨텐츠 너비
const w2 = $('#box').innerWidth();   // 컨텐츠 + padding 너비
const w3 = $('#box').outerWidth();   // 컨텐츠 + padding + border 너비
const w4 = $('#box').outerWidth(true); // 컨텐츠 + padding + border + margin 너비

// 📍 [4] 스크롤 및 위치 좌표
const offset = $('#box').offset();   // document(문서 전체) 기준 { top, left } 좌표
const pos = $('#box').position();    // 부모 컨테이너 기준 { top, left } 상대 좌표
$(window).scrollTop();               // 현재 수직 스크롤 바 위치
$('html, body').animate({ scrollTop: 0 }, 300); // 부드럽게 페이지 맨 위로 스크롤
```

## 6. 이벤트 핸들링 & 이벤트 위임 (.on)
모던 웹 개발에서 동적으로 생성되는 엘리먼트까지 처리하기 위해 `.on()`을 사용합니다.
```javascript
// ⚡ [1] 표준 이벤트 리스너 (.on)
$('#myBtn').on('click', function(e) {
  e.preventDefault(); // 기본 폼 제출 또는 링크 이동 취소
  e.stopPropagation(); // 부모 요소로의 이벤트 버블링 차단
  alert('버튼 클릭됨!');
});

// 🎯 [2] 이벤트 위임(Event Delegation) ★ 대단히 중요!
// 페이지 로드 후 동적으로 append된 .dynamic-btn도 정상 작동하도록 상위 부모에 바인딩
$(document).on('click', '.dynamic-btn', function() {
  const itemId = $(this).data('id');
  console.log('동적 버튼 클릭! ID:', itemId);
});

// 🔄 [3] 여러 이벤트 동시 바인딩
$('#search').on({
  focus: function() { $(this).addClass('focused'); },
  blur: function() { $(this).removeClass('focused'); },
  keydown: function(e) {
    if (e.key === 'Enter') {
      console.log('엔터키 감지:', $(this).val());
    }
  }
});

// 1️⃣ [4] 단 1회만 실행되는 이벤트 (.one)
$('#buyBtn').one('click', function() {
  console.log('결제 요청은 단 1번만 발송됩니다.');
});

// 🚫 [5] 이벤트 해제 (.off)
$('#myBtn').off('click');            // click 이벤트 리스너 해제

// 📢 [6] 수동 이벤트 트리거 (.trigger)
$('form#login').trigger('submit');   // 강제로 submit 이벤트 발생
$('#btnRefresh').trigger('click');   // 프로그래밍 방식으로 클릭 실행
```

## 7. 효과 & 애니메이션 (Effects & Animation)
간단한 애니메이션으로 모달 창, 드롭다운 아코디언 메뉴를 구현합니다.
```javascript
// 👁️ [1] 기본 표시/숨김 (Display None <-> Block)
$('#menu').show(300);                // 0.3초 동안 펼쳐지며 표시
$('#menu').hide('fast');             // 빠르게 숨김 ('slow', 'fast', 밀리초)
$('#menu').toggle();                 // 상태 반전

// 🌫️ [2] 페이드(Fade) 효과 (투명도 opacity 조절)
$('#popup').fadeIn(400);             // 서서히 나타남
$('#popup').fadeOut(400);            // 서서히 사라짐
$('#popup').fadeToggle();            // 페이드 토글
$('#banner').fadeTo('slow', 0.5);    // 특정 투명도(0.5)로 변경

// 📜 [3] 슬라이드(Slide) 효과 (아코디언, 드롭다운 필수)
$('#accordion-body').slideDown();    // 아래로 펼치기
$('#accordion-body').slideUp();      // 위로 접기
$('#faq-answer').slideToggle(200);   // 슬라이드 열림/닫힘 토글

// 🎬 [4] 커스텀 애니메이션 (.animate)
$('#box').animate({
  left: '+=200px',
  opacity: 0.8,
  height: '250px'
}, 500, function() {
  console.log('애니메이션 종료 콜백 실행');
});

// 🛑 [5] 애니메이션 큐 제어 (버튼 연타 버그 방지 ★)
// .stop(clearQueue, jumpToEnd)
$('#dropdown').stop(true, true).slideToggle(200); // 큐를 비우고 즉시 최신 상태로 토글
```

## 8. Ajax 비동기 HTTP 통신 (jQuery.ajax)
REST API 서버와 JSON 통신을 처리하는 표준 방식입니다.
```javascript
// 🚀 [1] 표준 $.ajax() 전체 옵션 구조 (Promise 스타일)
$.ajax({
  url: '/api/users',
  type: 'POST',                       // HTTP 메서드 (GET, POST, PUT, DELETE)
  dataType: 'json',                   // 서버로부터 받을 데이터 형식 (json, text, html)
  contentType: 'application/json; charset=utf-8', // 요청 헤더
  data: JSON.stringify({ name: 'Lucky', email: 'lucky@example.com' }),
  timeout: 5000,                      // 5초 타임아웃
})
.done(function(response, textStatus, jqXHR) {
  console.log('요청 성공:', response);
})
.fail(function(jqXHR, textStatus, errorThrown) {
  console.error('에러 발생 코드:', jqXHR.status, '메시지:', errorThrown);
})
.always(function() {
  console.log('성공/실패 여부와 관계없이 완료 후 항상 실행 (로딩 스피너 종료)');
});

// ⚡ [2] 간편 단축 메서드 (GET & POST)
$.get('/api/users?page=1', function(data) {
  console.log('사용자 목록:', data);
});

$.post('/api/logout', { userId: 10 }, function(res) {
  console.log('로그아웃 완료');
});

// 📋 [3] Form 데이터 직렬화 (Serialization)
// 쿼리스트링 형태 직렬화: "name=Lucky&email=test%40test.com"
const queryString = $('#registerForm').serialize();

// 객체 배열 직렬화: [{ name: 'username', value: 'Lucky' }, ...]
const formArray = $('#registerForm').serializeArray();

// 📁 [4] 파일 업로드(FormData) Ajax 전송 시 필수 옵션
const formData = new FormData($('#uploadForm')[0]);
$.ajax({
  url: '/api/upload',
  type: 'POST',
  data: formData,
  processData: false, // ★ jQuery가 데이터를 쿼리스트링으로 변환하지 않도록 설정
  contentType: false, // ★ multipart/form-data 헤더 자동 설정 허용
  success: function(res) { alert('업로드 성공!'); }
});

// 🌐 [5] 전역 Ajax 로딩 인디케이터
$(document).ajaxStart(function() { $('#globalSpinner').show(); });
$(document).ajaxStop(function() { $('#globalSpinner').hide(); });
```

## 9. 유틸리티 함수 (Utility Functions)
배열/객체 가공 및 타입 검증을 위한 헬퍼 함수들입니다.
```javascript
// 🔁 [1] $.each: 배열 및 객체 반복 순회
const users = ['Alice', 'Bob', 'Charlie'];
$.each(users, function(index, name) {
  console.log(`인덱스: ${index}, 이름: ${name}`);
});

const config = { host: 'localhost', port: 8080 };
$.each(config, function(key, value) {
  console.log(`${key} => ${value}`);
});

// 🗺️ [2] $.map & $.grep (배열 변환 & 필터링)
const numbers = [1, 2, 3, 4, 5];
const doubled = $.map(numbers, (num) => num * 2);       // [2, 4, 6, 8, 10]
const evens = $.grep(numbers, (num) => num % 2 === 0);   // [2, 4]

// 🔍 [3] $.inArray: 배열 내부 검색 (indexOf 대체, 없으면 -1)
const idx = $.inArray('Bob', users); // 1

// 🧩 [4] $.extend: 객체 병합 (Object.assign 및 딥카피 대체)
const defaults = { theme: 'light', debug: false };
const options = { debug: true, lang: 'ko' };
// 첫 번째 인자에 true를 전달하면 딥 카피(Deep Copy) 수행
const merged = $.extend(true, {}, defaults, options);

// 🏷️ [5] 타입 검사 함수들
$.isArray([1, 2, 3]);       // true
$.isEmptyObject({});        // true
$.isNumeric('123.45');      // true
$.trim('  hello world  ');  // "hello world"
```

## 10. 바닐라 자바스크립트(Native JS) 1:1 대체 가이드
모던 브라우저 환경에서 jQuery 없이 순수 Vanilla JS로 작성할 때의 1:1 대응표입니다.
```javascript
// 🔍 [1] 요소 선택
// jQuery:  const el = $('#myId');
// Vanilla: const el = document.getElementById('myId'); (또는 document.querySelector('#myId'))

// jQuery:  const list = $('.item');
// Vanilla: const list = document.querySelectorAll('.item');

// 🎨 [2] 클래스 조작
// jQuery:  $el.addClass('active');
// Vanilla: el.classList.add('active');

// jQuery:  $el.removeClass('active');
// Vanilla: el.classList.remove('active');

// jQuery:  $el.toggleClass('active');
// Vanilla: el.classList.toggle('active');

// 📝 [3] 텍스트 & 값 조작
// jQuery:  $el.text('Hello');          -> Vanilla: el.textContent = 'Hello';
// jQuery:  $el.html('<b>Hi</b>');      -> Vanilla: el.innerHTML = '<b>Hi</b>';
// jQuery:  $input.val('Lucky');        -> Vanilla: input.value = 'Lucky';

// ➕ [4] 요소 추가 및 삭제
// jQuery:  $parent.append($child);
// Vanilla: parent.append(child); (또는 parent.insertAdjacentHTML('beforeend', '<div>내용</div>');)

// jQuery:  $el.remove();
// Vanilla: el.remove();

// ⚡ [5] 이벤트 리스너
// jQuery:  $btn.on('click', handler);
// Vanilla: btn.addEventListener('click', handler);

// 🚀 [6] Ajax 통신
// jQuery:  $.getJSON('/api/data').done(callback);
// Vanilla: fetch('/api/data').then(res => res.json()).then(callback);
```
💬
jQuery 치트시트

의견 및 질문

댓글 수정

댓글 삭제
