[JQuery] 1장 JQuery는 무엇인가? Jquery세팅법

2006년 칸 아카데미 소속의 응용 프로그램 개발자 존 레식(John Resig)은 자바스크립트 라이브러리, HTML 문서 탐색과 DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청을 간편하게 수행하는 JQuery를 발표합니다. 제이쿼리는 MIT 라이센스를

가진 자유 오픈 소프트 웨어로 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기 등 Ajax 환경에서 개발을 더욱 쉽게 할 수 있도록 도와줍니다.

1. jQuery의 버전

안정화 버전: jQuery의 최신 안정 버전은 2023년 기준 3.x.x 시리즈
주요 변화: 성능 개선, 버그 수정, 오래된 기능 제거 등

2.jQuery의 장점

간편한 문법: 간편한 문법 처리로 DOM 조작과 이벤트 처리가 쉽고 빠르게 개발 가능
크로스 브라우저 호환성: 다양한 브라우저 환경에서 일관된 동작을 보장
다양한 플러그인: 다양한 플러그인을 통해 기능을 쉽게 확장
애니메이션 효과: 간단한 애니메이션 효과를 쉽게 구현 가능

3. jQuery의 단점

성능 문제: 대규모 애플리케이션에서는 성능 저하가 발생
모던 프레임워크와의 경쟁: React, Vue.js, Next.js 같은 현대적 프레임워크에 비해 상대적으로 기능이 제한
의존성 문제: jQuery에 의존하는 코드를 작성할 경우, 추후 최신 자바스크립트 라이브러리와 통합에 복잡

4. jQuery로 구현할 수 있는 것

DOM 조작: HTML 요소 추가와 삭제, 수정이 가능
이벤트 처리: 클릭,마우스 오버, 키보드 입력등 다양한 이벤트 처리
AJAX 통신: 서버와 비동기 통신을 통해 데이터 송수신
애니메이션 효과: 요소의 서서히 나타나는 효과, 사라지기, 슬라이드, 스크롤 효과 등
폼 유효성 검사: 사용자의 입력을 검증 그에 맞는 오류 메세지 등 표시 가능
플러그인 검사: 슬라이더, 모달 창 등 다양한 기능을 구현

5.JQuery 세팅법

JQuery는 다른 언어들처럼 복잡하지 않고 간단하기에 OS별로 나눌 필요가 없습니다. 우선 jQuery 파일을 사용하기위해 프로젝트 폴더에 index.html 파일을 생성해줍니다.

Download jQuery | jQuery

Download jQuery link Latest version To locally download these files, right-click the link and select "Save as..." from the menu. Download the compressed, production version: Download jQuery 3.7.1 The slim build is a smaller version, that excludes the ajax

jquery.com

JQuery 공식 홈페이지 다운로드 페이지로 이동해 다운로드 버튼을 누르면 창하나가 뜨는데 그 주소를 복사해줍니다.

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

html 파일을 생성해서 head 태그안에 script 태그로 감싸서 src에 복사한 주소를 붙여넣어 줍니다.

로컬 파일에서 사용법
- jQuery 다운로드 페이지에서 jQuery를 다운로드합니다. 똑같이 다운로드 버튼을 클릭하면 나오는 주소를 복사
- 다운로드한 파일을 프로젝트 폴더에 저장해줍니다. (예: /home/user/myproject/jquery-3.7.1.min.js)
- HTML 파일에서 head 태그안에 경로를 지정합니다.

<script src="jquery-3.7.1.min.js"></script>

이제 간단하게 jQuery 코드를 작성해줍니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery</title>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function () {
        $("p").css("color", "red");
      });
      $(document).ready(function () {
        $(".container").css("background", "blue");
      });
    </script>
  </head>
  <body>
    <div class="container">
      <h1>JQuery</h1>
      <p>문장의 색상을 바꾸기</p>
    </div>
  </body>
</html>

이렇게 간단하게 구현할 수 있습니다.

요약

jQuery는 DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청 등 간편하게 수행하는 자바스크립트 라이브러리
현재 안정된 버전은 3.x.x 시리즈로 간편한 문법, 크로스 브라우저 호환성, 다양한 플러그인, 애니메이션을 제공
그러나 성능 저하 가능성, 기능이 제한되며, 최신 라이브러리와 통합에 어려움
문법 예시
- 문서 준비 이벤트: $(document).ready(function() { ... });
- 스타일 변경: $("p").css("color", "blue");
- 이벤트 핸들링: "$("#myButton").click(function() {...});
- AJAX 요청: $.ajax({...});
- 애니메이션: $("#myDiv").fadeIn();
구현 가능: DOM 조작, 이벤트 처리, AJAX 통신, 애니메이션 효과, 폼 유효성 검사 등
세팅법: CDN 또는 로컬 파일을 사용한 JQuery 세팅

GitHub - jQuicker/jQuery-bloging

Contribute to jQuicker/jQuery-bloging development by creating an account on GitHub.

github.com

LIST

'Back-End > JQuery' 카테고리의 다른 글

[JQuery] 5장 애니메이션 (0)	2025.03.18
[JQuery] 4장 JQuery 이벤트 처리 (0)	2025.03.01
[JQuery] 3장 JQuery DOM 조작 (0)	2025.02.27
[JQuery] 2장 JQuery 기본 문법 (0)	2025.02.24