[JavaScript] jQuery

프론트엔드 개발에서 한 번쯤은 들어봤을 jQuery.
"이제는 잘 안 쓴다"는 말도 많지만, 여전히 많은 프로젝트와 레거시 시스템에서 사용되고 있고, 배우면 JavaScript의 기본도 함께 익힐 수 있다.

🧾 jQuery

jQuery는 JavaScript를 더 쉽게 다룰 수 있도록 만든 경량 자바스크립트 라이브러리다.

• 복잡한 DOM 조작을 짧은 코드로 가능하게 해준다.
• 이벤트 처리, Ajax, 애니메이션 등을 간단하게 사용할 수 있다.
• 다양한 브라우저에 대한 호환성 문제를 자동으로 처리해준다.

🎯 jQuery의 주요 특징

기능	설명
DOM 조작	$('#id'), $('.class')로 요소를 손쉽게 선택 및 수정
이벤트 처리	클릭, 입력, 포커스 등 이벤트를 간단하게 연결 가능
Ajax 지원	백엔드와 비동기 통신을 쉽게 구현 가능
애니메이션	fadeIn, slideDown 등의 간단한 애니메이션 지원
크로스 브라우징	브라우저마다 다른 DOM API를 일관되게 처리

🔍 기본 문법

✅ DOM 요소 선택

$('#title')        // id가 title인 요소
$('.item')         // class가 item인 모든 요소
$('div > p')       // div의 자식 p 태그

✅ 이벤트 바인딩

$('#btn').click(function() {
    alert('버튼이 클릭되었습니다!');
});

✅ DOM 조작

$('#text').text('새로운 텍스트');       // 텍스트 변경
$('#input').val('입력값');              // 입력값 변경
$('#box').addClass('active');           // 클래스 추가

✅ Ajax 호출

$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.error(error);
    }
});

🛠 실전 예시

<button id="loadBtn">데이터 불러오기</button>
<div id="result"></div>

<script>
    $('#loadBtn').click(function() {
        $.get('/data', function(response) {
            $('#result').text(response);
        });
    });
</script>

📦 jQuery CDN으로 사용하기

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