자바스크립트와 제이쿼리의 차이

개발일지/JavaScript + jquery

자바스크립트와 제이쿼리의 차이

연습용365 2021. 11. 7. 12:29

제이쿼리는 자바스크립트로 만든 라이브러리로 자바스크립트를 좀 더 간결하게 사용할 수 있다! 자바스크립트의 표준이 워낙 예전에 정해졌기 때문에 브라우저 별로 중구난방이었는데 제이쿼리가 동일한 코드로 대부분의 브라우저와 버전을 지원하기 때문에 편하다. 하지만 제이쿼리만 배우는 게 부정적인 이유는 제이쿼리 외에 다른 라이브러리를 사용할 수 없고, 자바스크립트의 작동방식을 이해하는 게 어렵기 때문에 둘을 같이 배우는 게 좋다고 합니다. 모바일 버전에서는 제이쿼리가 단점이 되는 경우도 있어서 요즘엔 사용하지 않는 경우도 많다고 하니 참고 하는 게 좋을 듯해요~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>연습</title>
</head>
<body>
    <div>
        <div>이름 : <input type="text" id="name" /></div>
        <div>
            지역 : 
            <select id="city"> 
                <option value="02" selected>서울</option>
                <option value="032">인천</option>
            </select>
        </div>
        <button onclick="ok();">제출</button>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        function ok()
        {
            // alert(document.getElementById("name").value);
            // alert(document.getElementById("city").value);
            alert($("#name").val());
            alert($("#city").val());
        }
    </script>
</body>
</html>

이름과 지역을 선택하고 제출을 눌렀을 때 경고창(alert)에 이름과 지역번호가 뜨게 만드는 코드이다.

alert(document.getElementById("name").value);
alert(document.getElementById("city").value);

자바스크립트에서는 document에서 getElementById로 value값을 불러와야 하는데 코드가 참 길다. 제이쿼리에서는 아래처럼 짧게 줄일 수 있음!

alert($("#name").val());
alert($("#city").val());

#이게 id를 의미하고 .val은 getElement~이 부분(가져오는)을 의미한다. 대신 제이쿼리를 사용하기 위해서는 아래처럼 제이쿼리 파일 또는 주소를 포함하고 있어야한다.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

제이쿼리 주소인데 버전이 다다름. 이렇게 연습을 할 때는 주소를 붙여넣고 사용하면 되고 어플이나 실제 홈페이지를 만들 때는 외부파일에서 불러오는 게 더 빠르다.