jQuery Getting Started - 온더테크

Contents

jQuery 시작하기 (Getting Started with jQuery)

jQuery 설치 방법 (How to Include jQuery)

jQuery를 프로젝트에 포함시키는 방법에는 여러 가지가 있습니다. 주로 사용되는 두 가지 방법은 CDN(Content Delivery Network) 사용과 로컬 파일 사용입니다.

CDN 사용 (Using CDN)

CDN을 사용하면 외부 서버에서 jQuery 파일을 직접 불러올 수 있습니다. 이는 페이지 로딩 속도를 향상시키고, 브라우저가 이미 해당 CDN에서 jQuery를 캐시한 경우 로딩 시간을 단축시킬 수 있습니다.

HTML 파일의 <head> 태그 안에 다음 코드를 추가하여 jQuery를 포함시킵니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery CDN 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 내용 -->
</body>
</html>

위 예제에서는 jQuery 3.6.0 버전을 사용하고 있으며, 최신 버전의 URL은 jQuery 공식 웹사이트에서 확인할 수 있습니다.

로컬 파일 사용 (Using Local Files)

로컬 파일을 사용하면 jQuery 파일을 직접 다운로드하여 프로젝트 디렉토리에 포함시킬 수 있습니다. 이는 인터넷 연결이 없거나 내부 네트워크에서 개발할 때 유용합니다.

jQuery 공식 웹사이트에서 원하는 버전의 jQuery 파일을 다운로드합니다.
다운로드한 파일을 프로젝트 디렉토리 내의 적절한 위치에 저장합니다.
HTML 파일의 <head> 태그 안에 다음 코드를 추가하여 로컬 파일을 불러옵니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 로컬 파일 예제</title>
    <script src="path/to/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 내용 -->
</body>
</html>

여기서 path/to/jquery-3.6.0.min.js는 jQuery 파일의 실제 경로로 변경해야 합니다.

기본 문법 이해 (Basic Syntax)

jQuery의 기본 문법은 매우 간단하고 직관적입니다. jQuery의 핵심은 $ 기호로 시작하는 함수 호출입니다.

$ 기호의 의미 (Understanding the $ Symbol)

$ 기호는 jQuery 객체를 생성하는 데 사용됩니다. 이는 jQuery 라이브러리에서 제공하는 함수로, HTML 요소를 선택하고 조작할 수 있게 해줍니다. 예를 들어, $("p")는 모든 <p> 요소를 선택합니다.

jQuery 함수 호출 (Calling jQuery Functions)

jQuery 함수 호출은 HTML 요소를 선택한 후, 메서드를 체이닝하여 여러 동작을 수행할 수 있습니다. 다음은 몇 가지 예제입니다:

HTML 문서 준비 이벤트 (Document Ready Event)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 기본 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // jQuery 코드는 여기서 작성
            console.log("문서가 준비되었습니다.");
        });
    </script>
</head>
<body>
    <p>jQuery 기본 예제입니다.</p>
</body>
</html>

클릭 이벤트 핸들링 (Handling Click Events)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 클릭 이벤트 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#hideButton").click(function() {
                $("p").hide();
            });
            $("#showButton").click(function() {
                $("p").show();
            });
        });
    </script>
</head>
<body>
    <p>이것은 jQuery 클릭 이벤트 예제입니다.</p>
    <button id="hideButton">숨기기</button>
    <button id="showButton">보이기</button>
</body>
</html>

위 예제에서 $("#hideButton").click(function() {...});은 #hideButton 요소가 클릭될 때마다 해당 콜백 함수를 실행합니다. 이 콜백 함수는 <p> 요소를 숨깁니다.

체이닝 (Chaining)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 체이닝 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("p").css("color", "blue").slideUp(2000).slideDown(2000);
        });
    </script>
</head>
<body>
    <p>이것은 jQuery 체이닝 예제입니다.</p>
</body>
</html>

위 예제에서 $("p").css("color", "blue").slideUp(2000).slideDown(2000);은 <p> 요소의 글자 색상을 파란색으로 변경하고, 2초 동안 슬라이드 업한 후 다시 2초 동안 슬라이드 다운합니다. 이처럼 jQuery는 체이닝을 통해 여러 메서드를 순차적으로 실행할 수 있게 해줍니다.

이와 같이 jQuery를 사용하면 HTML 요소의 선택과 조작을 간편하게 수행할 수 있으며, 이벤트 처리와 애니메이션도 쉽게 구현할 수 있습니다. jQuery의 기본 문법을 이해하면 웹 개발에서 많은 작업을 간단히 처리할 수 있습니다.

Post Views: 78