[ JQuery ] 제이쿼리란 무엇인가?

JQuery 란?

우리는 화면을 그려낼 때 JavaScript 를 기반으로 자주 만들어내곤 한다.

물론 JavaScript 만 써도 충분히 화면 작업이 가능하다.

하지만 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는

JavaScript 라이브러리가 존재하는데 이게 바로 JQuery 이다.

JavaScript 를 보다 쉽게 쓰기위해 사용하는 쿼리라고 생각하면 된다.

그럼 예제를 통해 JQuery 에 대해 알아보도록 하자.

시작하기 앞서 JQuery 를 사용하려면 아래의 경로를 head 태그 내에 명시해주어야 한다는 걸 알고 넘어가자.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>

자, 그럼 본론으로 돌아가서 만약 alert message 를 띄우는 button 을 만든다고 가정할 때,

JavaScript 로만 만들면 아래와 비슷한 로직으로 구현이 될 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
    <title>Document</title>
    <script>
        //JavaScript
        window.onload = function() {
            document.getElementById("firstButton").onclick = function() {
                alert("첫 번째 버튼을 클릭했습니다.");
            }
        };        
    </script>
</head>
<body>
    <div id="mainDiv">
        <button id="firstButton">첫 번째 버튼</button>
    </div>
</body>

</html>

그럼 이를 JQuery 를 적용해 수정하면?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
    <title>Document</title>
    <script>
        //JQuery
        $(document).ready(function() {
            $("#firstButton").on("click", function() {
                alert("첫 번째 버튼을 클릭했습니다");
            });
        });
    </script>
</head>
<body>
    <div id="mainDiv">
        <button id="firstButton">첫 번째 버튼</button>
    </div>
</body>

</html>

우리가 기존에 JavaScript 에서 사용하던 window.onload() 를 JQuery 에서는 아래와 같이 제공한다.

//기존의 JavaScript
window.onload = function () {
    ...(생략)
};

//JQuery 방법 1
$(document).ready(function() {
    ...(생략)
});

//JQuery 방법 2
$(function() {
    ...(생략)
});

방법1과 방법2는 같은 기능을 수행하니 둘 중 뭘 사용해도 상관없다.

window.onload() 와 똑같이 화면에 태그들이 다 뿌려지고난 뒤 기능을 수행하는데,

즉 화면이 열릴 때 해당 기능을 수행하도록 해주는 초기화 함수라 생각하면 쉽다.

또한, JavaScript 의 onclick 등의 이벤트도 뭐가 달라졌는지 살펴보면,

//JavaScript
document.getElementById("firstButton").onclick = function() {
    alert("첫 번째 버튼을 클릭했습니다");
};

//JQuery
$("#firstButton").on("click", function() {
    alert("첫 번째 버튼을 클릭했습니다");
});

보다 직관적이게 엘리먼트를 지정하고 이벤트를 능동적으로 걸 수 있게 해준다.

JQuery 를 사용하는 사람들에게 도대체 JQuery 를 왜쓰나? 라고 물어보면

10명 중에 9명은 '간단하니까' 라고 답할거라 감히 예상해본다.

이렇듯 프론트 단의 JavaScript 코드를 보다 쉽게 구현하고 제어하기 위해 사용한다고 보면 된다.

저작자표시

'Coding Story > JQuery' 카테고리의 다른 글

[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 ) (0)	2020.11.25
[ JQuery ] 제이쿼리 동적으로 생성된 버튼에 이벤트 달기 (2)	2020.11.06
[ JQuery ] 제이쿼리 셀렉터 ( Selector ) ID, CLASS로 찾기 (1)	2020.11.06

JQuery 란?

'Coding Story > JQuery' 카테고리의 다른 글

티스토리툴바