프로그래밍/제이쿼리(JQuery)

[제이쿼리/JQuery] 제이쿼리(jQuery) 사용해보기

Rhinoceros 2020. 5. 24. 22:26

jQuery를 사용하려면 JQuery의 js 파일을 내려받거나 CDN의 주소를 참조해 사용한다.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #hello {
                font-size: 30pt;
            }
        </style>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>
        <script>
            $(document).ready(function() {
                $("#toggle").click(function() {
                    alert("hello");
                });
            });
        </script>
    </head>
    <body>
        <button id="toggle">Toggle</button>
        <br />
        <span id="hello">hello</span>
    </body>
</html>

 

 

 

내려받은 파일을 적절한 경로에 복하고 <script><script> 태크로 참조해 사용한다.

 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>

 

파일을 내려 받으면 적절한 경로를 src 에 넣으면 되지만 원격 서버에 캐싱된 파일을 직접 참조할 수 있다.

jQuery 도 네트워크상의 여러 서버에 호스팅해 두었으므로 성능상의 이점이 있을 수 있다.

 

 

jQuery를 사용하는 페이지의 유형은 크게 두 가지입니다. 첫 번쨰 방식은 HTML 문서가 모두 로딩되어 ready 상태가 되면 초기화 함수가 실행되도록 document 객체에 ready 이벤트를 설정하는 방식이고, 두 번 째는 <script /> 태그를 <body> 태그 안의 마지막에 배치하는 방식이다.

 

 

document 객체에 ready 이벤트를 설정하는 방식은 $(document).ready(function()) 은 문서가 모두 로드되어 ready 상태가 되면 실행할 함수를 등록하는 작업이다.

브라우저는 태그의 작성 순서에 따라 메모리에 로딩하고 실행되는데, <script>태그 가 <body> 보다 앞에 작성되면 <body> 가 읽히지 않은 상태에서 자바스크립트 코드에 실행된다. HTML 요소가 읽히지 않은 상태이기 때문에 HTML 요소 작업이 불가능 하다. 그래서 HTML 문서가 모두 로드되어 준비된 후에 초기화 코드가 실행 될 수 있도록  $(document).ready(function()) 이벤트를 사용한다. 과거에는 window.onload 이벤트를 사용하였다면 대신에 $(document).ready() 을 사용하는 것이다.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>
        <script>
            $(document).ready(function() {

            });
        </script>
    </head>
    <body>

    </body>
</html>

 

<script /> 태그가 모두 로딩되기 전에 화면이 나타나지 않는다는 단점이 있다. 참조하는 자바스크립트 라이브러리가 많은 경우에는 모두 로딩되기 전까지 화면이 나타나지 않는다. 따라서 화면이 로딩이 빠른 시간 안에 끝나야 할 떄는 사용하지 않는다.

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button id="btn1">클릭1</button>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>
        <script>
            $("#btn1").click(function() {
                alert("1111");
            });
        </script>
    </body>
</html>

 

<body /> 태그의 마지막에 코드를 작성하기 때문에 화면 UI를 구성하는 <body /> 태그 내의 다른 요소들이 먼저 로딩되어 나타난다는 장점이 있다.  하지만, 변수들이 모두 전역에 만들어진다는 단점이 있다.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var str = "hello";
                $("#btn1").click(function(){ 
                    alert("btn1");
                });
            });

            $(document).ready(function() {
                var str = "world";
                $("#btn2").click(function() {
                    alert("btn2");
                });
            });
        </script>
    </head>
    <body>
        <button id="btn1">버튼1</button>
        <button id="btn2">버튼2</button>
    </body>
</html>

 

$(document).ready() 이벤트를 처리한다. 동일한 str  변수를 내부에 가지고 있다. 하지만 스코프가 다르기 때문에 str 변수 이름은 충돌하지 않는다. 

 

 

저작자표시 (새창열림)