본문 바로가기
자바스크립트(JavaScript)/제이쿼리(jquery)

[Jquery] 제이쿼리란?

by yerica 2024. 8. 13.
제이쿼리 ( jquery )


제이쿼리는 '모질라'사의 자바스크립트 개발자였던 '존 레식'이 자바스크립트를 이용해 만든 라이브러리 언어이다. 
라이브러리 언어란 자바스클비트로 만들어진 다양한 함수들의 집합체를 말한다.
자바스크립트에서 함수는 일련의 코드를 함수 내에 정의해놓고 필요할 때마다 호출헤서 사용하는 것이라고 배웠다.
제이쿼리는 이런 다양한 함수들을 제공하고 있고, 자바스크립트에서 불편했던 몇가지 점들을 간편하게 사용할 수 있도록 개선한 언어이다.

1. 호환성 문제 해결

자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체는 호환성(크로스브라우징)이 떨어진다는 단점이 있다.

제이쿼리에서는 문서객체 선택자의 호환성 문제가 모두 해결되어있다. 

2. 쉽고 편한 애니메이션 효과 기능 구현

자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 하기 때문에 개발에 많은 시간이 소요되었다.

하지만 제이쿼리는 애니메이션과 다양한 효과(Effect)를 지원하는 메서드들을 제공하고 있기 때문에 개발 시간을 많이 단축할 수 있다.

제이쿼리 사용법


제이쿼리는 <script> 태그 안에 직접 작성하거나 .js 파일을 만들어 사용하면 된다.

하지만 그 전에 제이쿼리가 반드시 먼저 연결되어 있어야만 사용할 수 있다.

1. https://cdnjs.com/libraries/jquery/1.12.4

위 사이트에서 jquery.min.js 파일을 </> 아이콘을 눌러 <head>태그 안에 붙여넣는다.

그 다음 내가 작성할 자바스크립트 파일을 아랫줄에 연결한다.

이 순서가 바뀌면 오류가 발생하므로 주의해야한다.

  <head>
    <!-- 제이쿼리 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"
      integrity="sha512-jKxp7JHEN6peEmzmg6a7XJBORNTB0ITD2Pi+6FUkc16PCaNAJX2ahZ1ejn1p1uY37Pxyirn/0OMNZbITbEg3jw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"></script>
    <!-- 제이쿼리 파일을 다운받아서 연결 -->
    <script src="./js/jquery.min.js"></script>
    <!-- 내가 작성할 제이쿼리 파일 -->
    <script src="./js/jq01.js"></script>
  </head>

2. import 문법을 이용하여 .js 파일 안에서 불러 오기

자바스크립트 파일 첫 줄에 import 라는 문법을 사용하여 제이쿼리를 연동할 수 있다.

예시) import './js/jquery.min.js'

+) 제이쿼리 서버가 점검중일 때는 사용이 불가능 할 경우가 있기 때문에 링크로 불러오는 것보단 저장해서 사용하는 방법을 선호한다.

// 다운받은 jquery파일을 import해서 가져오기
import "../js/jquery.min.js";

jquery는 최신버전에서는 사라진 예전 버전의 기능들도 있기 때문에 보통 예전버전을 많이 쓴다.

예전 버전을 써도 최신버전까지 사용할 수 있다.

하지만 만약 최신버전을 쓴다면 미그레이트(migrate) 파일을 함께 사용해주면 옛날 라이브러리 기능도 호환할 수 있다.

https://cdnjs.com/libraries/jquery-migrate

 

jquery-migrate - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Migrate older jQuery code to jQuery 1.9+ - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We ma

cdnjs.com

'자바스크립트(JavaScript) > 제이쿼리(jquery)' 카테고리의 다른 글

[Jquery] 제이쿼리 이벤트(Event)  (0) 2024.08.23
[Jquery] 객체 조작 메서드  (0) 2024.08.20
[Jquery] 제이쿼리 배열 관련 메서드  (0) 2024.08.20
[Jquery] 제이쿼리 선택자 총 정리  (0) 2024.08.20
[Jquery] 제이쿼리 기본형 및 태그 요소 불러오는 방법  (0) 2024.08.13

관련글

티스토리툴바