[jQuery] jQuery 설치

1. jQuery 소개

jQuery는 javascript를 브라우저에서 편리하게 사용할 수 있게 도와줍니다. javascript는 그 자체로 브라우저안에서 역동적으로 동작하지만 jQuery를 이용하면 복잡한 코드를 매우 간편하게 이용할 수 있습니다.

jQuery : https://jquery.com/

2. jQuery 설치 또는 준비

jQuery는 cdn형태로도 이용할 수 있고 직접 파일을 다운받아 사용할 수도 있습니다. html 코드 내에서 동작하므로 html 코드 내에 jQuery 내용을 불러올 수 있는 링크를 작성하면 됩니다. 

jQuery Download : http://jquery.com/download/

여기선 jQuery를 파일 형태로 다운받을 수 있습니다.

jQuery CDN : https://code.jquery.com/

여기에 들어가면 여러가지 버전의 CDN이 제공됩니다. 만약 jQuery 1.12.4 버전을 CDN 형태로 이용하고자 한다면 다음을 html 파일 내에 작성합니다.

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

이렇게 html 파일 안에 작성한다면 그 다음부턴 html파일에서 다음과 같이 사용할 수 있습니다.

<script>
 
    $(document).ready(function () {
 
        $('#btn').click(function () {
            var text = $('#textarea').val();
            $.ajax({
                url:'/someurl/',
                type:'post',
                dataType:'json',
                cache:false,
                data:{
                },
                success:function (data) {
                    console.log('success!')
                }
            });
        });
 
 
    });
</script>

<script></script> 처럼 script 태그 안에서 얼마든지 이용할 수 있게 됩니다. 

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

이 부분은 문서의 로드가 완료되어 준비가 된다면 중괄호 안의 코드를 실행한다는 뜻입니다. 문서가 로드되지도 않았을 때 코드가 실행된다면 예기치 못한 오류를 발생할 수 있을 때 사용합니다. 반드시 사용해야만 하는 코드는 아닙니다.

console.log('success!') 이 코드는 javascript의 브라우저 콘솔에서 메시지를 출력하는 코드입니다. jQuery 코드와 javascript 코드는 자유롭게 연동되어 사용될 수 있습니다. 콘솔은 크롬의 경우 f12를 눌러 열리는 개발자 도구에서 콘솔 창을 의미합니다.

3. jQuery의 선택자

jQuery는 html의 id값이나 class값을 굉장히 편리하게 선택할 수 있게 도와줍니다.

다음과 같은 코드가 있다고 하겠습니다.

<div class="div_class" id="div_id">이건 div입니다.</div>

이 코드의 div를 선택하기 위해 자바스크립트에선 getElementById 나 getElementByClass 를 사용해야 했습니다. 그러나 jQuery는 아주 쉽게 할 수 있도록 해줍니다.

$(".div_class")
$("#div_id")

이 두가지 jQuery 선택자는 모두 저 div를 지칭합니다. javascript를 사용할 때보다 훨씬 더 단순하고 쉽게 선택할 수 있게 도와줍니다.

나머지 javasciprt의 코드들도 jQuery를 선택한 후에 사용할 수 있으니 매우 쉽고 편리할 것입니다.