기초

1. 제이쿼리란?

제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식이 자바스크립트를 이용해 만든 라이브러리 언어입니다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 가리킵니다.

1.1 호환성 문제 해결

자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어진다는 단점이 있습니다. 예를 들어 인접 요소 선택자 중 자음 요소 선택자(nexstSibling)는 IE8 이하의 브라우저에서 문서 객체를 선택했을 때와 다른 브라우저에서 문서 객체를 선택했을 때의 결과가 다릅니다. 하지만 이런 문서 객체 선택자의 호환성 문제가 제이쿼리에서는 모두 해결되었습니다. 아직은 '문서 객체 모델'이라는 단어가 많이 낯설 것입니다. 지금은 'HTML 문서 구조'라고 이해하면 됩니다.

1.2 쉽고 편리한 애니메이션 효과 기능 구현

자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 하기 때문에 개발에 많은 시간이 필요했습니다. 하지만 제이쿼리는 애니메이션과 다양한 효과(Effect)를 지원하는 메서드를 제공하기 때문에 개발 시간을 많이 단축할 수 있습니다.

2. 제이쿼리 사용 방법

제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. 제이쿼리 버전은 1.x, 2.x, 3.x 버전이 있습니다. 1.x버전은 익스플로러 IE6, IE7, IE8 버전을 지원합니다. 3.x버전은 익스플로러를 지원하지 않습니다.

2.1 CDN 사용하기

CDN(Contents Distribution Network)은 전세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율적으로 사용하기 위한 네트워크 시스템입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- jquery 3.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- jquery 2.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <!-- jquery 1.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- jquery ui -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    
</body>
</html>

2.2 제이쿼리 선언

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //제이쿼리 선언
        jQuery(document).ready(function(){
            //실행코드
        });

        //제이쿼리 선언($치환)
        $(document).ready(function(){
            //실행코드
        });

        //제이쿼리 선언(생략)
        $(function(){
            //실행코드
        });

        //자바스크립트 선언
        window.onload = function(){
            //실행코드 
        }
    </script>
</body>
</html>

Previous템플릿 리터럴 Next선택자

Last updated 5 years ago

hashtag1. 제이쿼리란?

hashtag1.1 호환성 문제 해결

hashtag1.2 쉽고 편리한 애니메이션 효과 기능 구현

hashtag2. 제이쿼리 사용 방법

hashtag2.1 CDN 사용하기