[jQuery] jQuery 설치

WEB/jQuery

[jQuery] jQuery 설치

developer of the night sky 2023. 10. 13. 11:46

🔻jQuery 란

자바스크립트 코드를 간결하게 작성하고, 크로스 브라우징 문제를 해결하며, 다양한 기능을 쉽게 사용할 수 있게 해주는 라이브러리이다.
자바의 .jar 파일 여러개 모아놓은 것이라 생각하면된다.
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. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
빠르고 작고 ,HTML 탐색, 조작, 이벤트 핸들링, 애니메이션 등을 다룬다.

특징

1. 가볍다.

2. 이제는 자바스크립트의 selector 기능이

3. 각 브라우저 회사들이 html, css 등을 다르게 제공한다. 하나의 코드가 어떤 브라우저에서는 작동이 잘 되는 반면, 안되는 브라우저도 존재한다. 접속한 브라우저에 따라 사용가능한 기능으로 전환을 해준다.

요즘은 웹 발전으로 제이쿼리를 사용하지않아도 위 기능을 사용할 수 있게 되었다.

🔻설치

1. 로컬 설치

파일 다운로드 후 참조한다.

사이트 접속

https://jquery.com/

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

Download jQuery 클릭

다운 받을 버전 선택

버전의 차이는 기능의 큰 차이가 없고 브라우저 호환이 다르다.

1점대 버전 모든 브라우저 호환이 가능하다

3점대 최신 브라우저 위주로 호환이 가능하다 (구 브라우저는 작동이 안된다)

여전히 1점대 버전을 가장 많이 사용한다.

구버전 다운로드

페이지 맨 밑으로 내리면 'Past Releases' 의 'jQuery CDN' 클릭

jQuery CDN

아래 링크로 접속 가능하다.

https://releases.jquery.com/

jQuery CDN

jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac

releases.jquery.com

uncompressed은 비압축 버전 파일, minified은 압축 버전 파일이다.

비압축 버전은 개발할 때 사용하고, 압축 버전은 실행에 필요한 코드 제외하고 스페이바, 엔터를 삭제한 코드로 서비스 운영할 때 사용한다.

학습용으로 비압축 버전을 다운로드한다.

해당 파일 우클릭하여 다른 이름으로 링크 저장한다.

아래 링크로 저장

C:\class\code\client\ClientTest\src\main\webapp\asset\js

jquery-1.12.4.js

0.29MB

코드 참조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>

바디 태그에 <script src="../asset/js/jquery-1.12.4.js"></script>를 추가한다.

2. CDN 설치

원격 파일을 참조하는 방법으로 인터넷 접속 비용을 줄일 수 있다.

로컬에 설치하면 접속자마다 다운로드를 해야하므로 비용이 커는데 CDN으로 설치하면 우리 서버에서 다운로드 하는 것이 아니라 접속 비용을 낮출 수 있다.

단, CDN 서버가 닫히면 우리 사이트도 이용하지 못한다.

사이트 접속

https://releases.jquery.com/

jQuery CDN

releases.jquery.com

1.x 버전의 비압축버전 클릭

script 복사

코드 참조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</body>
</html>

body 태그에 복사한 코드를 넣고 integrity, crossorigin는 지워준다.

저작자표시 (새창열림)