jQuery란?
✔️ 기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성들을 "간소화"하기 위해
"존 레식"에 의해 개발 JavaScript 기반의 라이브러리 (유용한 기능들의 모음집)
즉, JavaScript 언어로 유용한 함수나 내용들이 이미 만들어져 있는 (정의되어 있는) 모음집
(=> 바로 쓸 수 있는 건 아니며, .js 파일로 라이브러리 연결해서 가지고 와야 함)
✔️ 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발 가능
✔️ 적은 양의 코드로 빠르고, 풍부한 제공 가능
jQuery 장점
👉🏻 DOM 요소(html 태그들)와 관련된 스크립트들보다 쉽게 구현할 수 있음
👉🏻 AJAX (비동기식 통신 - 화면이 깜빡거리지 않고 페이지 이동 가능), 이벤트 처리 등 기능들을 폭넓게 지원, 코드 간결해짐
👉🏻 jQuery와 관련된 확장하여 플러그인, 오픈 API, 프레임워크 등을 지원함
(차트, 슬라이드, 애니메이션 효과 등)
*jQuery 라이브러리 연결 방법
👉🏻 head 태그 내부에 script 태그로 jQuery 관련 .js 파일을 가져오기 (외부 방식)
단, 오프라인/온라인 방식이 있음
✔️ jQuery 공식 사이트: http://jquery.com
1. jQuery 라이브러리 파일을 직접 다운로드받은 후 경로를 지정(오프라인 방식)
- .js 파일을 내가 직접 다운로드받아서 저장한 후 해당 저장된 파일 경로를 script 태그로 작성하는 방법
👉🏻 UnCompressed 버전: 일반 JS 파일
개발자 등의 사람들이 보기 쉽도록 주석, 코드 정렬 등을 활용해서 가시성을 유지하는 파일
(가독성이 좋은 버전 => 개발자를 위한 버전)
👉🏻 Compressed 버전: min JS 파일
주석, 들여쓰기, 띄어쓰기 등을 최소화해서 파일의 용량을 줄여서 제공하는 파일
(용량이 줄어든 버전 => 배포를 위한 버전)
<head>
<title>jQuery 개요</title>
<script src="resources/js/jquery-3.6.1.js" rel="Javascript"></script> <!-- 오프라인 방식 -->
</head>
head 영역 title 밑에 script 태그로 영역 지정
--- 오프라인 방식으로 연동 완료 ---
2. CDN (Content Delivery Network)을 통한 연결 (온라인 방식)
- 라이브러리를 제공하는 사이트 url을 제시해서 파일 경로로 지정
- 단, 인터넷이 연결된 상태에서만 사용 가능
👉🏻 즉, 인터넷만 연결되어 있다면 굳이 파일을 다운로드 하지 않아도 라이브러리 사용 가능
<head>
<title>jQuery 개요</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- 온라인 방식 -->
</head>
링크를 그대로 붙여 넣음
--- 온라인 방식으로 연동 완료 ---
jQuery 구문 작성하기
👉🏻 jQuery 구문으로 DOM 요소를 다루는 구문을 기본적으로 작성할 것이미 때문에
jQuery 명령은 문서상에 요소들이 다 로딩된(브라우저상에 태그들이 다 랜더링된 다음) 후 실행되어야 함
👉🏻 순수 자바스크립트에서의 해당 내용은
window.onload = function() {
실행내용; // 여기에 작성된 실행 내용은 문서상의 태그들이 다 로딩된 이후에 알아서 실행됨
}
👉🏻 onload 함수: 페이지가 로딩되면 자동으로 실행되는 함수
단, JavaScript에서의 window.onload 구문은
해당 문서의 요소들도 다 로드될 뿐 아니라 연동되어 있는 외부 문서들도 다 가지고 온 뒤에 실행됨
그리고 window.onload는 해당 문서에서 단 한 번만 작성 가능, 단 한 번만 실행
✔️ jQuery에서의 해당 내용은 3가지 구문으로 제공
👉🏻 jQuery(document).ready(function() {
실행내용; // 여기에 작성된 실행내용은 문서상의 태그들이 다 로딩된 이후에 알아서 실행됨
});
👉🏻 $(document).ready(function() {
실행내용;
});
👉🏻 $(function(){
실행내용;
});
jQuery에서의 해당 function은 DOM 요소들만 다 로드되면 바로 실행됨
📍 자바스크립트 방식과의 차이점
자바스크립트는 속성에 직접 접근해서 "대입"하는 구문
제이쿼리는 이미 만들어진 메소드를 호출해서 값을 변경하거나 가져오는 구문 => 호출하는 족족 실행
<script>
/*
// 순수 자바스크립트 언어
window.onload = function() {
console.log("문서 읽어들이기 완료");
// 페이지 로드 시 호출하지 않아도 자동으로 한 번 읽어짐
}
window.onload = function() {
console.log("잘되나...?");
};
// 잘되나...? 만 출력됨
// window.onload 2번 실행 시 가장 마지막에 쓴 구문으로 덮어씌워짐
*/
// jQuery 라이브러리 이용
// 방식 1)
jQuery(document).ready(function() {
console.log("문서 읽어들이기 완료");
});
// 방식 2)
$(document).ready(function() {
console.log("두 번째 문서도 읽어들여졌을까요");
});
// 문서 읽어들이기 완료
// 두 번째 문서도 읽어들여졌을까요
// 두 가지 모두 출력됨
// 방식 3)
$(function(){
console.log("얘도 되면 대박인데요");
});
// 문서 읽어들이기 완료
// 두 번째 문서도 읽어들여졌을까요
// 얘도 되면 대박인데요
// 세 가지 모두 출력됨
</script>
📍 window.onload와 같은 기능을 하지만
중복 시 제일 마지막만 출력되는 window.onload와 다르게 모두 출력됨
<script>
// 방식 3)
$(function(){
console.log("3_얘도 되면 대박인데요");
// h3 요소를 선택해서 배경색을 노란색으로 변경
// - 순수 자바스크립트
/*
var h3Arr = document.getElementsByTagName("h3");
// [h3, h3, h3, ...] 태그명으로 끌고 온다면 배열 형식으로 담김
// 반복문을 돌려 줘야 함
for(var i = 0; i < h3Arr.length; i++) {
h3Arr[i].style.backgroundColor = "yellow";
}
*/
// jQuery 방식
// $("h3").style.backgroundColor = "yellow"; // 이건 아님! 자바스크립트 문법
$("h3").css("backgroundColor", "yellow");
// $("선택자")" : 해당 요소를 선택하겠음
// .css("속성명", "속성값") : 선택된 요소들의 스타일과 관련된 기능 수행
$("pre").css("color", "red");
});
</script>
📍 이때 만약 콘솔에 $ is not defined 또는 jQuery is not defined라고 나오면
jQuery 라이브러리 연동을 안 한 것!
=> 놀라지 말고 head 영역의 script 태그로 연동했는지 확인해 줍시다