제이쿼리 : 연결 방법

728x90

제이쿼리 : 연결 방법

JQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. JQuery를 이용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.

1. JQuery의 장점

1. JQuery는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.
2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.
3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.
4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.
5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.
6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.

수많은 자바스크립트 라이브러리 중에서도 제이쿼리가 특히 많이 사용되는 이유는, 위와 같은 장점들을 지녔기 때문입니다.

2. JQuery 연결 방법

제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재합니다. 제이쿼리를 사용할 때는 제이쿼리 공식 사이트에서 제이쿼리를 다운로드 받거나, CDN을 이용하면 됩니다.

1) 다운로드 방식

제이쿼리는 공식 사이트에서 다운로드받을 수 있습니다.

https://jquery.com/download

사이트에 접속하여 Download the compressed, production jQuery 3.6.1'을 다운로드한 뒤, 라이브러리가 잘 연결되었는지 확인해 봅니다.

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>연결이 되었을까요?</title>
</head>
<body>
    <script src="jquery-3.6.1.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log("됐지롱");
        });
    </script>
</body>
</html>

제이쿼리 명령어 $(document).ready()를 사용하면, 아래와 같이 콘솔에서 결과를 확인할 수 있습니다.

2. CDN 방식

https://code.jquery.com

CDN은 제이쿼리 공식 사이트에 접속하여, jQuery Core 3.3.1 - minified 버전을 선택하고 카피하여 라이브러리에 연결하면 됩니다.

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>연결이 되었을까요?</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            console.log("됐지롱");
        });
    </script>
</body>
</html>

제이쿼리 CDN은 구글, MS, CDNJS, jsDelivr 등 다양한 버전이 있습니다.

3. 기본 형식

제이쿼리의 기본 형식은 다음과 같습니다.

$(document).ready(function() {
실행문;
});

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.

$(document).ready()를 짧게 표현할 수도 있습니다. 두 개의 구문 중 편한 것으로 선택하여 사용하면 됩니다.

$(function() {
실행문
});

4. 활용 예시

sliderInner = document.querySelector(".slider__inner");
slider = document.querySelectorAll(".slider")
let currentIndex = 0;
        
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;
        
    sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
}, 2000);

위 예시를 제이쿼리를 통해 더 간단한 소스로 작업할 수 있습니다.

let currentIndex = 0;
        
setInterval(() => {
    currentIndex = (currentIndex + 1) % $(".slider").length;
        
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({ left: -800 * currentIndex }, 600)
}, 2000);

728x90

저작자표시

'JQuery' 카테고리의 다른 글

제이쿼리 : 클래스 관련 메서드 (3)	2022.09.04
제이쿼리 : 탐색 선택자 (5)	2022.09.01
제이쿼리 : 필터 선택자 (10)	2022.08.30
제이쿼리 : 속성 선택자 (7)	2022.08.30
제이쿼리 : 기본 선택자 (6)	2022.08.30

🦙코딩보다 알파카🦙

제이쿼리 : 연결 방법