Query는 HTML 문서의 탐색, 조작, 이벤트 처리 등을 간편하게 수행하기 위한 자바스크립트 라이브러리이다.
- 크로스 브라우저 호환성을 제공하며, DOM 조작과 애니메이션 등을 간소화하여 개발자들이 웹 애플리케이션을 보다 쉽게 개발할 수 있도록 도와준다.
특징
- 간결한 문법:
간결하고 직관적인 문법을 제공하여 개발자가 복잡한 DOM 조작을 간단하게 수행할 수 있습니다. CSS 선택자를 사용하여 요소를 선택하고, 메소드 체이닝을 통해 다양한 작업을 연속적으로 수행할 수 있습니다.
- DOM 조작:
HTML 문서의 요소를 선택하고, 속성을 변경하거나 삽입, 삭제, 이동할 수 있는 다양한 DOM 조작 기능을 제공합니다. 이를 통해 웹 페이지의 동적인 변경이 가능하며, UI 요소의 상호작용을 구현할 수 있습니다.
- 이벤트 처리:
이벤트 처리를 간편하게 수행할 수 있도록 도와줍니다. 요소에 이벤트 핸들러를 연결하고, 이벤트 발생 시 적절한 동작을 수행할 수 있습니다. 이를 통해 클릭, 호버, 스크롤 등의 다양한 이벤트에 대응할 수 있습니다.
- AJAX 기능:
AJAX를 지원하여 비동기적으로 서버와 데이터를 주고받을 수 있습니다. AJAX 요청을 보내고 응답을 처리하는 기능을 간편하게 사용할 수 있어, 동적인 웹 페이지나 웹 애플리케이션의 데이터 처리에 유용합니다.
- 애니메이션:
애니메이션 효과를 쉽게 추가할 수 있는 기능을 제공합니다. 요소의 페이드 인/아웃, 이동, 크기 조절 등 다양한 애니메이션 효과를 적용할 수 있으며, 시각적인 요소를 더욱 동적으로 만들 수 있습니다.
💡 사용 방법
jQuery 로드
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>요소 선택:
- $() 함수를 사용하여 HTML 요소를 선택할 수 있습니다. CSS 선택자를 인자로 전달하여 요소를 선택합니다.
$(document).ready(function() {
// 문서가 로드되면 실행될 코드
var element = $("#myElement"); // ID가 "myElement"인 요소 선택
var elements = $(".myClass"); // 클래스가 "myClass"인 모든 요소 선택
});
이벤트 처리:
- on() 함수를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 선택한 요소에서 발생하는 이벤트에 대한 동작을 정의합니다.
$(document).ready(function() {
$("#myButton").on("click", function() {
// 버튼이 클릭되었을 때 실행될 코드
alert("Button clicked!");
});
});
DOM 조작:
- 선택한 요소를 조작하거나 속성을 변경할 수 있습니다. 다양한 jQuery 메소드를 사용하여 DOM을 조작할 수 있습니다.
$(document).ready(function() {
// 텍스트 변경
$("#myElement").text("New text");
// 속성 변경
$("#myImage").attr("src", "new-image.jpg");
// 클래스 추가/제거
$("#myElement").addClass("highlight");
$("#myElement").removeClass("highlight");
});
AJAX 요청:
- $.ajax() 함수를 사용하여 비동기적으로 서버와 데이터를 주고받을 수 있습니다.
$(document).ready(function() {
$.ajax({
url: "data.php",
method: "GET",
success: function(response) {
// 요청이 성공했을 때 실행될 코드
console.log(response);
},
error: function() {
// 요청이 실패했을 때 실행될 코드
alert("Error occurred");
}
});
});
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com