[jQuery] 기본 사용법

소요 시간: 3분 조회수: 93

jQuery는 자바스크립트의 복잡한 기능들을 단순하고 쉽게 사용할 수 있게 해주는 강력한 라이브러리입니다.

웹사이트는 단순한 정적 페이지를 넘어서야 합니다. 예를 들어, 버튼 클릭 시 콘텐츠가 변경되거나, 스크롤 시 애니메이션이 작동하는 등 다양한 상호작용이 필요합니다. 이러한 기능들을 구현하는 데 있어 jQuery는 매우 유용한 도구가 될 수 있습니다.

이 글에서는 jQuery의 기본 사용법을 단계별로 설명하며, 초보자도 쉽게 따라할 수 있는 예제를 제공하겠습니다. jQuery의 매력을 직접 체험해 보시기 바랍니다. 이제 jQuery와 함께 더 나은 웹사이트를 만드는 여정을 시작해 보겠습니다.


jQuery 추가하기

jQuery를 사용하려면 HTML 문서에 jQuery 라이브러리를 포함시켜야 합니다. 가장 쉬운 방법은 CDN(Content Delivery Network)을 이용하는 것입니다. 아래는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
</body>
</html>

다른 방법으로 제이쿼리를 추가하고 싶다면 이 글을 참고해 주세요.


문서 준비 이벤트

jQuery 코드는 문서가 완전히 로드된 후에 실행되어야 합니다. 이를 위해 $(document).ready() 또는 줄여서 $(function() {})를 사용합니다. 이 이벤트는 DOM(Document Object Model)이 완전히 로드되고 사용할 준비가 되었을 때 발생합니다.

$(document).ready()

$(document).ready() 메소드는 문서가 준비되면 실행할 코드를 지정하는 데 사용됩니다. 아래는 그 예제입니다.

$(document).ready(function() {
    // 여기에 jQuery 코드를 작성합니다.
    console.log("문서가 준비되었습니다!");
});

$(function() {})

위의 $(document).ready() 메소드를 줄여서 $(function() {})로 사용할 수도 있습니다. 두 방법 모두 동일하게 동작합니다.

$(function() {
    // 여기에 jQuery 코드를 작성합니다.
    console.log("문서가 준비되었습니다!");
});


요소 선택

jQuery에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있습니다. 선택한 요소에 대해 다양한 조작을 수행할 수 있습니다.

ID 선택자

ID 선택자는 특정 ID를 가진 요소를 선택합니다. ID는 HTML 문서 내에서 유일해야 합니다.

$(document).ready(function() {
    $("#myId").text("ID 선택자 사용");
});

위 예제에서는 ID가 myId인 요소의 텍스트를 "ID 선택자 사용"으로 변경합니다.

클래스 선택자

클래스 선택자는 특정 클래스를 가진 모든 요소를 선택합니다. 클래스는 여러 요소에서 사용할 수 있습니다.

$(document).ready(function() {
    $(".myClass").css("color", "red");
});

위 예제에서는 클래스가 myClass인 모든 요소의 텍스트 색상을 빨간색으로 변경합니다.

태그 선택자

태그 선택자는 특정 태그 이름을 가진 모든 요소를 선택합니다.

$(document).ready(function() {
    $("p").hide();
});

위 예제에서는 모든 <p> 태그 요소를 숨깁니다.


이벤트 처리

jQuery를 사용하면 다양한 이벤트를 쉽게 처리할 수 있습니다. 대표적인 이벤트로 클릭 이벤트, 마우스 이벤트, 키보드 이벤트가 있습니다.

클릭 이벤트

클릭 이벤트는 사용자가 요소를 클릭할 때 발생합니다.

$(document).ready(function() {
    $("#myButton").click(function() {
        alert("버튼이 클릭되었습니다!");
    });
});

위 예제에서는 ID가 myButton인 버튼을 클릭하면 알림 창이 나타납니다.

마우스 이벤트

마우스 이벤트는 사용자가 마우스를 특정 요소 위로 올리거나 벗어날 때 발생합니다.

$(document).ready(function() {
    $("#myElement").mouseover(function() {
        $(this).css("background-color", "yellow");
    }).mouseout(function() {
        $(this).css("background-color", "");
    });
});

위 예제에서는 ID가 myElement인 요소에 마우스를 올리면 배경색이 노란색으로 변경되고, 마우스를 벗어나면 원래 색상으로 돌아갑니다.

키보드 이벤트

키보드 이벤트는 사용자가 키보드를 누를 때 발생합니다.

$(document).ready(function() {
    $("#textInput").keydown(function() {
        console.log("키를 눌렀습니다.");
    });
});

위 예제에서는 ID가 textInput인 입력 필드에 키를 누를 때마다 콘솔에 메시지가 출력됩니다.


이상으로 jQuery의 기본 문법에 대해 설명드렸습니다. jQuery를 사용하면 간단하고 직관적으로 웹 페이지를 조작할 수 있습니다.

인기글

제이쿼리 리스트