CSS - jQuery 알아보기

jQuery 알아보기

제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. 사용방법에 대해 알려드리겠습니다.

Download 방식

https://jquery.com/download 에 접속하여 'Download the compressed, production jQuery 3.3.1'을 다운로드 합니다. 그 후에 hmtl 문서를 jQuery 라이브러리와 같은 경로에 저장합니다.

예시

<script src="jquery-3.3.1.min.js"></script>
    <script
        $(document).ready(function(){
            console.log("jQuery 시작")
        });
    </script>

결과

jQuery 시작

CDN 방식

https://code.jquery.com사이트에 접속하여 jQuery Core 3.3.1 - minified 버전을 선택하고 CDN을 카피합니다.

예시

<script src="https://code.jquery.com/jquery-3.3.1.min.js"inergrity="sha256-FgpCb/KJQ1LNf0u91ta32o/NMZx1twRo8QtmkMRdAu8="crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            console.log("jQuery 시작")
        });
    </script>

결과

jQuery 시작

jQuery 기본 형식

jQuery는 기본적으로 $(document).ready()로 시작합니다. $(document).ready()를 짧게 표현할 수도 있습니다. 두개 중 편한것으로 선택하여 사용하시면 됩니다.

<script>
    $(document).ready(function(){
        실행문;
    });
</script>

<script>
    $(function(){
        실행문;
    });
</script>        

jQuery 예시

아래의 예시도 jquery를 이용해서 만든 codepen 예시인데, 아주 잘 만들었기에 가져와봤습니다. 한번 감상해보시죠