jQuery

jquery에 대해 알아봅시다!

📎제이쿼리(jquery)란?

: 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크핍트 라이브러리입니다.
: 빠르고 기능이 풍부한 자바스크립트입니다.
: $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 합니다.

➰특징

📌 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현 가능
📌 Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발 가능
📌 jQuery는 크로스 플랫폼을 지원하기 때문에 어떠한 브라우저에서도 동일하게 동작합니다.
브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없습니다.
📌 네이티브 DOM API 보다 직관적이고 편리한 API를 제공합니다.
CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있습니다.
📌 다양한 플러그인이 존재하며 다른 라이브러리들과 충돌을 일으키지 않습니다.

➰jQuery 기본 형식

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

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

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

➰jQuery 다운로드 방식

📌 jQuery 라이브러리 다운로드
: https://jquery.com/download에 접속하여 'Download the compressed, production jQuery 3.3.1'을 다운로드 합니다.
📌 HTML 문서에서 jQuery 라이브러리 연결하기
: html문서를 jQuery 라이브러리와 같은 경로에 저장합니다. 라이브러리가 잘 연결되었는지 확인하기 위해 jQuery 명령어 $(document).ready()를 사용합니다.

📌 CDN 호스트를 사용하는 방법

: https://jquery.com 사이트에 접속하여 맞는 버전을 선택 후 CDN을 카피

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

📌 HTML 문서에서 jQuery 라이브러리 연결하는 방법

<script src="jquery-3.5.1.min.js"
"integrity="sha256-FgpCb/KJQ1LNfOu91ta32o/NMZxltwRo8QtmkMRdAU8="crossorigin="anonymous">
></script>

---

📎 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 간략화
        //css에 써주지 않고 제이쿼리 안에서 쓰는 법
        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({ left: -800 * currentIndex }, 600);
        //    transform : "translateX("+ -800 * currentIndex +")"
    }, 2000);
</script>

'jQuery' 카테고리의 다른 글

클래스 관련 메서드  (3)	2022.09.04
jQuery : 탐색 선택자  (12)	2022.08.31
jQuery : 필터 선택자  (10)	2022.08.31
jQuery : 속성 선택자  (16)	2022.08.30
jQuery : 기본 선택자  (14)	2022.08.30