JQUERY

화낼거양

Feb 28, 2025

jQuery는 자바스크립트 라이브러리 중 하나로, 웹 개발을 보다 간편하게 도와줍니다. 이 라이브러리는 DOM 트리의 탐색 및 조작, 이벤트 처리, 애니메이션, 그리고 Ajax를 포함한 다양한 기능들을 제공합니다.

jQuery의 주요 기능

DOM 탐색 및 조작

$('#id'), $('.class') 등과 같은 CSS 선택자를 이용해 HTML 요소를 쉽게 선택하고 조작할 수 있습니다.

예를 들어, $('#myDiv').hide();는 id가 "myDiv"인 요소를 숨깁니다.

이벤트 처리

클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트를 간단하게 처리할 수 있습니다.

예를 들어, $('button').click(function() { alert('Button clicked!'); });는 버튼 클릭 시 경고창을 표시합니다.

애니메이션

웹 페이지에 다양한 애니메이션 효과를 추가할 수 있습니다.

예를 들어, $('#myDiv').fadeIn();는 요소를 서서히 나타나게 합니다.

Ajax

jQuery는 Ajax 요청을 쉽게 처리할 수 있도록 도와줍니다.

예를 들어, $.ajax({ url: 'data.json', success: function(result) { console.log(result); } });는 'data.json' 파일을 비동기적으로 가져와서 콘솔에 출력합니다.

크로스브라우저 호환성

jQuery는 다양한 브라우저에서 동일하게 동작하도록 만들어졌기 때문에, 크로스브라우저 이슈를 줄일 수 있습니다.

예시 코드


// DOM 요소 숨기기
$('#myDiv').hide();

// 버튼 클릭 시 경고창 표시
$('button').click(function() {
    alert('Button clicked!');
});

// 요소 서서히 나타내기
$('#myDiv').fadeIn();

// Ajax 요청
$.ajax({
    url: 'data.json',
    success: function(result) {
        console.log(result);
    }
});

💡

jQuery 코드에서 달러 기호 ($)는 jQuery 라이브러리를 참조하는 단축어로 사용됩니다. 기본적으로, $ 기호는 jQuery 함수의 별칭으로, jQuery 객체를 생성하거나 DOM 요소를 선택하고 조작하는 데 사용됩니다. 예를 들어, $('#myDiv')는 jQuery('#myDiv')와 동일한 의미를 갖습니다.

// DOM 요소 숨기기 $('#myDiv').hide(); // 버튼 클릭 시 경고창 표시 $('button').click(function() { alert('Button clicked!'); }); // 요소 서서히 나타내기 $('#myDiv').fadeIn(); // Ajax 요청 $.ajax({ url: 'data.json', success: function(result) { console.log(result); } });