[javascript] jQuery를 사용한 DOM 조작
jQuery는 JavaScript 라이브러리로, HTML 문서의 DOM 요소를 쉽게 조작할 수 있게 도와줍니다. 이 포스트에서는 jQuery를 사용하여 DOM을 조작하는 몇 가지 예제를 살펴보겠습니다.
Contents
jQuery란 무엇인가요?
jQuery는 JavaScript로 작성된 라이브러리로, 다양한 브라우저에서 일관된 방식으로 DOM을 조작할 수 있도록 해줍니다. 간결하고 유연한 문법을 가지고 있어 DOM 조작 작업을 간편하게 수행할 수 있습니다.
DOM 선택
jQuery를 사용하여 요소를 선택하는 방법은 간단합니다. 아래는 몇 가지 예제입니다.
ID로 선택하기
$('#myElement');
클래스로 선택하기
$('.myClass');
태그로 선택하기
$('div');
DOM 조작
jQuery를 사용하여 DOM을 조작하는 것도 매우 간단합니다. 몇 가지 예제를 살펴봅시다.
속성 조작
$('#myElement').attr('src', 'newimage.jpg');
내용 삽입
$('#myElement').text('새로운 내용');
요소 추가
$('body').append('<div>새로운 요소</div>');
이벤트 처리
jQuery를 사용하면 이벤트 처리도 간단해집니다. 아래는 클릭 이벤트를 처리하는 예제입니다.
$('#myButton').on('click', function() {
alert('버튼이 클릭되었습니다!');
});
jQuery를 사용하면 DOM 조작 및 이벤트 처리가 훨씬 쉬워집니다. 이러한 기능들을 효율적으로 사용하여 웹 애플리케이션을 빠르게 개발할 수 있습니다.