jQuery란?

JavaScript 라이브러리로, HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션,
Ajax 요청 등을 쉽게 수행할 수 있도록 도와주는 도구이다.

---

jQuery의 특징

간결한 문법 : JavaScript에 비해 적은 코드로 동일한 기능을 구현할 수 있다.

DOM 조작 기능 강화 : 간편한 요소 선택 및 조작.

다양한 이벤트 핸들러 제공 : 이벤트 처리 용이.

애니메이션 기능 제공 : 간단한 메서드로 기본적인 시각 효과를 구현 가능.

Ajax 지원 : 쉬운 비동기 요청 구현.

크로스 브라우저 호환성 : 다양한 웹 브라우저에서 동일한 동작 보장.

---

jQuery의 주요 기능

문서 객체 모델(DOM) 조작

$() 기호를 사용하여 HTML 요소를 선택하여 조작할 수 있다.
예시)

$("#element").text("새로운 텍스트"); // 요소의 텍스트 변경
$(".box").css("background-color", "yellow"); // CSS 속성 변경

이벤트 처리

상호작용을 감지하는 다양한 이벤트 핸들러 제공.
예시)

$("#button").click(function() { // 클릭 이벤트
    alert("버튼이 클릭되었습니다.");
});

애니메이션 효과

기본적인 애니메이션 효과를 제공.
예시)

$("#box").fadeIn(1000); // 1초 동안 서서히 나타남
$("#box").slideUp(500); // 0.5초 동안 슬라이드 업

Ajax 요청 처리

$.ajax(), $.get(), $.post() 등의 메서드 활용, 서버와의 비동기 데이터 통신 가능.
예시)

$.ajax({
    url: "data.json",  // 서버 URL
    method: "GET",     // 요청 방식
    success: function(response) {  // 성공 시 실행
        console.log(response);
    },
    error: function(error) {  // 실패 시 실행
        console.log("에러 발생!", error);
    }
});

---

JSP에서의 적용 방법

jQuery를 사용할 JSP에 jQuery를 로드해서 사용하여야 한다.

CDN을 이용한 방법

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

직접 다운해서 사용하는방법
(직접 다운로드 하여 프로젝트에 넣고, 그 위치에서 불러오는 방법)

<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.0.min.js"></script>

https://blog.jquery.com/2021/03/02/jquery-3-6-0-released/
위 사이트에 접속하여 원하는 버전을 클릭하면 아래와같은 화면이 나오는데,

ctrl + s 키를 누르면 .js 파일로 저장 할 수있다.

++ jQuery 추가 버전들

jQuery min 버전

1. 파일 크기 감소
2. 네트워크 대역폭 절약
3. 웹사이트 성능 향상
4. 프로덕션(배포) 환경에 적합
5. 성능은 같음

위와 같은 이유로 개발시에는 디버깅을 위해 일반 버전을,
배포 시에는 min 버전으로 배포하는 것이 바람직하다.

jQuery slim 버전

배포용 min 버전 기준
jquery.min.js 약 87KB
jquery.slim.min.js 약 69KB 으로 상대적으로 가벼운 버전

Ajax 통신, 애니메이션 효과, $.Deferred() 비동기 기능을 제거한 버전임으로
위 기능들이 필요하지 않은 경우에 사용한다.