jQuery 기본 사용 설명

728x90

⭐️ jQuery ⭐️

01. jQuery란?

제이쿼리(jQuery)는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는, 오픈소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리는 마이크로소프트의 ASP.NET 프레임워크, 워드프레스 등 다양한 라이브러리와 프레임워크에 포함되면서 웹 프론트엔드 분야에서 점유율이 지속적으로 상승했었으나, 현재 높은 기능성을 갖춘 웹 표준 API가 늘어나면서 제이쿼리의 인기는 낮아지고 있습니다.

02. jQuery 사용 방법

jQuery 라이브러라 파일 형식에는 설명에 대한 주석 차이에 따라 압축 파일과 비압축 파일 형식이 있습니다.
일반적으로 설명이 크게 필요치 않으므로, 압축 파일을 사용합니다.

[1] Download 방식

파일을 직접 다운받아 연결하는 방식 입니다.

1) jQuery 라이브러리 다운로드

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

크롬 브라우저에서 다운 받을 경우, 웹페이지에 있는 라이브러리 코드 전체를 복사하여 웹 에디터에 붙여넣고 jquery-3.3.1.min.js 로 저장해줍니다.

2) HTML 에서 jQuery 라이브러리 연결

html 문서를 jQuery 라이브러리와 같은 경로에 저장합니다.
잘 연결되었는지 확인할 때에는 $(document).ready() 를 사용해봅니다.

[2] CDN 방식

데이터를 받아오는 서버의 주소를 연결하는 방식 입니다.
참고 : jQuery Quick API Reference 에서 데이터를 받아오는 서버의 주소를 받을 수 있으며, 활용법을 찾아보고 적용시킬 수 있습니다.

1) CDN 주소 복사

http://code.jquery.com 에 접속하여 jQuery 3.3.1 - minified 버전을 선택하고 CDN 을 복사 합니다.

2) HTML 에서 jQuery 라이브러리 연결

    <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;
    
                // $() = document.querySelector 을 줄여서 쓴 것
    
                // $(".slider__inner").css(
                //     "transform", "translateX("+ -800 * currentIndex +"px)"
                // );
    
                $(".slider__inner").css("position", "relative");
    
                $(".slider__inner").animate({
                    left : -800 * currentIndex
                }, 600)
    
            }, 2000);
        </script>

03. jQuery 기본 형식

    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>jQuery 기본 형식</title>
    
        <script scr="jquery-3.3.1.min.js"></script>
    
        <script>
            $(document).ready(function() {      // $(function() {실행문;}); 의 약식으로 표현 가능
                실행문;
            });
        </script>
    </head>
    <body>
        
    </body>
    </html>

728x90

'Javascript > jQuery' 카테고리의 다른 글

jQuery 클래스 관련 메서드 (3)	2022.09.05
jQuery 탐색 선택자 (3)	2022.09.01
jQuery 필터 선택자 (3)	2022.09.01
jQuery 속성 선택자 (3)	2022.09.01
jQuery 기본 선택자 (3)	2022.09.01

깜냥깜냥🐾코딩 혜윰

jQuery 기본 사용 설명

⭐️ jQuery ⭐️

01. jQuery란?

02. jQuery 사용 방법

[1] Download 방식

[2] CDN 방식

03. jQuery 기본 형식

'Javascript > jQuery' 카테고리의 다른 글

댓글

티스토리툴바

jQuery 기본 사용 설명

⭐️ jQuery ⭐️

01. jQuery란?

02. jQuery 사용 방법

[1] Download 방식

[2] CDN 방식

03. jQuery 기본 형식

'Javascript > jQuery' 카테고리의 다른 글

관련글

댓글

티스토리툴바