[JavaScript] jQuery(제이쿼리) 알아보기

jQuery란?

HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 JavaScript 라이브러리로, 존 레식이 2006년 8월 26일, 뉴욕 시 바캠프에서 최초 공개하였습니다. 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단 등을 제공하죠.

jQuery를 사용하는 이유는?

01. 어떠한 브라우저에서도 동일하게 작동한다.
02. 직관적이고 편리한 API를 제공한다.
03. CSS 스타일의 selector를 사용할 수 있어 편리하다.
04. 이벤트 처리(ex: Ajax, Animation 등…) 효과를 사용하기 쉽다.
05. 다양한 플러그인이 존재하며 충돌 위험도 적다.

jQuery 적용 방법

jQuery(이하 '제이쿼리')를 사용하기 위해서는 먼저 제이쿼리 라이브러리를 추가해야 한다.
추가 방법은 아래와 같이 3가지가 있다. 아래의 코드를 스크립트 영역에 복사 후 붙여 넣을 것.

<!-- 적용방법 01 : API 직접 다운받아 사용하기 -->
<script src="jquery-3.3.1.min.js"></script>
<!-- 적용방법 02-1 : Google 제공 CDN 방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 적용방법 02-2 : CDN 방식 -->
<!-- integrity와 crossorigin 등은 스크립트 해킹 방지를 위한 속성 정도로 알고 있으면 됨 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQ1LNf0u91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<!-- 적용방법 03 : 제이쿼리 공식에서 제공하는 최신 버전 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

이곳에서 jQuery API 3.3.1 버전을 다운로드 할 수 있다.
저장 후, 적용방법 01과 같이 적어주도록 한다.

jQuery의 문법

아주 간편히 HTML에서의 요소를 선택하여 해당 요소에 동작 함수를 설정할 수 있다. $기호가 제이쿼리를 의미하며 제이쿼리에 접근 가능하도록 해주는 식별자이다.

기본적으로 $(document).ready()로 시작하며 ready()는 제이쿼리 이벤트로 JS의 load 이벤트와 유사한 기능을 가진다. document, ready 없는 약식(略式)으로 사용하는 것이 보편적이다.

// jQuery 기본 형식
$(document).ready(function() {
    실행문;
});

// 약식(略式) : document, ready 생략 가능 (★ 가장 보편적 ★)
$(function() {
    실행문;
});

jQuery 본격적으로 사용해보기

먼저 HTML 영역에서 hello라는 클래스 값을 가진 div 요소를 만든 다음, jQuery를 이용하여 해당 요소에 넣을 문구와 CSS 속성 등을 지정해봅시다.

<html>
    <body>
        <div class="hello"></div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $('.hello').html('안녕!').css('background-color','powderblue');
     </script>
    </body>
</html>

$('.hello').html('안녕!').css('background-color','powderblue');
$('.연결할 요소의 클래스 값').html('출력할 문구')

CSS 속성의 경우 'background-color: powderblue;'를 추가하고 싶다면
.css('background-color', 'powderblue');
이런 식으로 입력해주도록 한다.

결과 보기

안녕!

'jQuery' 카테고리의 다른 글

[jQuery] 클래스 관련 메서드 알아보기 (6)	2022.09.03
[JavaScript] jQuery(제이쿼리) - 탐색 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 필터 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 속성 선택자 (4)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 기본 선택자 (4)	2022.08.30

코딩공책📚

[JavaScript] jQuery(제이쿼리) 알아보기

jQuery란?

jQuery를 사용하는 이유는?

jQuery 적용 방법

jQuery의 문법

jQuery 본격적으로 사용해보기

'jQuery' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[JavaScript] jQuery(제이쿼리) 알아보기

jQuery란?

jQuery를 사용하는 이유는?

jQuery 적용 방법

jQuery의 문법

jQuery 본격적으로 사용해보기

'jQuery' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바