📚 jQuery 설치 & 적용 방법

Library/JQuery

📚 jQuery 설치 & 적용 방법

인파_ 2021. 9. 27. 22:08

제이쿼리 설치

한때 전세계에서 가장 많이 쓰던 자바스크립트 라이브러리 설치 & 적용 방법에 대해 포스팅 해본다.

1. 로컬 다운로드 방법

아래 링크로 들어가 jquery 파일을 다운로드 한뒤, 자신의 프로젝트에 넣으면 된다.

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

그리고 html의 head태그에서 src를 지정해주면 된다.

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

2. CDN으로 불러오는 방법

아래 링크에서 코드를 복사하고 html에 넣으면 된다.

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

code.jquery.com

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

제이쿼리 적용 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script>
        $('#test').html('제이쿼리 테스트').css('border','1px solid blue')
        // 제이쿼리는 자기자신 엘리먼트를 반환하기 떄문에, 체이닝 기법이 가능하다.
    </script>
</body>
</html>