jQuery

jQuery

제이쿼리란, 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다.

장점
1. 페이지 내부 요소에 접근하기 쉽다.
2. 페이지의 보여지는 모습을 변경하기 쉽다.
3. 상호작용 처리가 쉽고 애니메이션을 사용할 수 있다.
4. AJAX의 사용이 쉽다.

기본 형식

jQuery는 기본적으로 $(document) .readt()로 시작하며, ready()는 jQuery 이벤트로 앞에서 학습한 자바스크립트의 load 이벤트와 유사한 기능을 가지고 있다. 기본 형식과 축약 형식 두 가지가 있습니다.

코드 보기

    // 기본 형식
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery 기본 형식</title>
        <script src="jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function() {
                실행문;
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    
    // 축약 형식
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery Migrate Plugin</title>
        <script src="jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                실행문;
            });
        </script>
    </head>
    <body>
    </body>
    </html>

선택자

jQuery는 선택지가 두 가지가 있습니다.

첫번째. $() 팩토리함수
$()함수는 괄호안에 CSS선택자를 정의해서 DOM노드(element)를 반환하며, 하나의 함수로 여러가지의 종류의 객체를 생성할 수 있는 팩토리함수입니다.

두번째. jQurey() 팩토리함수
$()함수와 같은 기능을 하지만 타 언어에서 $ 키워드를 사용하는 경우가 있으며, 이 때 중복을 피하기 위해 지원하는 래퍼입니다.

사용 방법

사용 방법은 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

            // $(".slider__inner").css(
            //     "transform", "translateX("+ -800* currentIndex +" px)"
            // );

            $(".slider__inner").css("position", "relative");
            $(".slider__inner"),animate({left : -800 * currentIndex},600)

        },1500);
    </script>