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