Frontend/jQuery
01. jQuery 시작 (오픈소스 사용방법, 기본 문법)
개발개발빈이
2022. 6. 3. 18:39
○ jQuery
- JavaScript 라이브러리화
- JavaScript를 편하게 사용할 수 있도록 단순화시킴
- JavaScript는 브라우저에 내장되어 있지만, jQuery는 파일 필요함
○ jQuery 오픈소스 사용방법
① jQuery 라이브러리를 제공하는 해당사이트 직접 링크
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
② jQuery 라이브러리를 직접 다운받아서 사용 (추천)
- jquery-3.6.0.min.js 파일 다운로드
- 다운로드 링크 : https://jquery.com/download/
- Download the compressed, production jQuery 3.6.0
→ 우클릭 → 다른이름으로 링크 저장 → jquery-3.6.0.min.js 다운
- jquery-3.6.0.min.js을 다운받은 경로에 잘 맞춰서 import후 사용
- 참고) .min 파일 : 용량이 작은 오픈소스 파일 (코드에 들여쓰기, 줄바꿈 등을 전부 제거)
<script src="jquery-3.6.0.min.js"></script>
○ 자바스크립트 기반 오픈소스
- .js
- jQuery, Bootstrap, moment, AJAX, AngularJS, react 등
- 시각화 : chart.js, d3.js 등
○ jQuery 기본 문법
- $ : jQuery가 시작한다는 뜻, jQuery약자
- 형식) $(선택자).함수(function(){ jQuery코드 }); / $(function(){ jQuery코드 });
<head>
<meta charset="UTF-8">
<script src="jquery-3.6.0.min.js"></script><!--jQuery import-->
<title>jQuery시작</title>
</head>
<body>
<script>
$(document).ready(function(){
alert("jQuery시작");
alert($);
});
$(function(){
alert("jQuery시작");
alert($);
});
</script>
</body>
○ jQuery에서 HTML요소 접근
<input type="text" name="uid" id="uid" value="marshall">
// 1) JavaScript 접근
document.getElementById("uid").value
// 2)jQuery 접근
$("#uid").val()