JQuery란?

JQuery

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 웹 사이트를 제작할 때 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다. 또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.

JQuery 특징

1. 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 그렇기 때문에 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없습니다.
2. 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있습니다.
3. 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있습니다.
4. 다양한 플러그인이 존재하며 다른 라이브러리들과 충돌을 일으키지 않습니다.

사용법

제이쿼리를 제공해주는 'cdn주소'나 jQuery을 직접 다운로드해서 사용하는 방법이 있습니다.

1. 다운로드 방식

http://jquery.com/download 에 접속하여 'Download the compressed, production jQuery 3.3.1'를 다운로드 합니다.

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

1. CDN방식

http://code.jquery.com 에 접속하여 CDN을 카피합니다.

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

JQuery 문법

$(선택자).동작함수();

$ 기호는 제이쿼리를 의미합니다. $는 제이쿼리에 접근할 수 있게 해주는 식별자 입니다. 선택자인 $를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택된 요소에 원하는 동작을 하게 설정합니다. $() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 형태로 생성해줍니다. $()함수의 인수로는 HTML태그 이름 뿐만 아니라, CSS 선택자를 전달하여 특정 HTML요소를 선택할 수 있습니다. 이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체라고 합니다.

예시

원본 소스 보기

GSAP 소스

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>             
let currentIndex = 0;
setInterval(() => {
    currentIndex = (currentIndex +1) % $(".slider").length;
    // sliderInner.style.transition = "all 0.6s"
    // $(".slider__inner").css(
    //     "transform", "translateX("+ -800 * currentIndex +"px)"
    // );
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left : -800 * currentIndex},600)
}, 2000);