jQuery란?
기존 자바스크립트 언어만으로 구현하기 복잡했던 구문작성들을
간소화하기위해 "존 레식"에 의해 개발된
JavaSript기반의 라이브러리(유용한 기능들의 모음집)
jQuery의 장점
1) HTML 요소가 트리 구조로 정리되어있는 DOM 요소와 관련된 스크립트를 쉽게 구현 가능
2) AJAX (비동기식 통신), 이벤트처리 등 폭 넓게 지원
3) jQuery와 관련된 확장 플러그인, 오픈 API 등을 지원
4) 네트워크, 애니메이션 등 기능 제공
5) 호환성이 좋아 거의 모든 웹브라우저에 대응 가능
=> 적은 양의 코드로 빠르고 풍부한 기능 제공(생산성 향상)
사용방법
1. jquery 파일(.js) import
jQuery라이브러리 파일을 직접 다운로드받은 후 경로 지정(오프라인 방식)
.js 파일의 경로를
<head>태그 사이에 import
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
2. CDN
라이브러리를 제공하는 사이트의 url을 제시하여 파일 경로 지정방식
https://jquery.com/
DownLoad버튼 -> compressed / uncompressed중 택 1
-> URL을 복사-> import해서 사용
Uncompressed: 개발자들이 보기 쉽도록 코드 정렬 등을 활용하여 가독성이 높은 파일
Compressed: 배포용, 실제 사용을 위한 파일(주석, 들여쓰기, 띄어쓰기 최소화하여 파일 용량 줄임)
import위치 (url삽입 위치):
head태그 내부에 script태그로 jQuery관련 .js파일 가져오기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>개요</title>
<!-- <script src="C:\이상민\frontend-workspace\4_jQuery_workspace\resources\script"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
구문작성
jQuery구문으로 DOM 요소를 다루기 떄문에jQuery명령은 문서상에서 요소들이 전부 다 로드된 후 실행되어야 함: window.onload
(자바스크립트) window.onload = function(){ 실행내용; }
onload함수: 페이지가 다 로딩되면 자동으로 한 번 실행되는 함수
해당 html문서의 요소들도 다 로드되고 연동되어있는 외부문서들도 로드된 후 실행되는 특징
window.onload함수는 html 문서에서 한 번만 사용 가능
중복사용시 가장 하단에 있는 하나만 동작
- jQuery에서의 onload 기능
[표현법]
1) jQuery(document).ready(function(){
실행내용;
})
2) $로 대체가능 (=jQuery)
$ : jQuery키워드를 나타냄
jQuery에서 해당 function은 HTML문서 내에 있는 DOM요소들만 로드되면 바로 실행됨
여러번 기술 가능, 횟수 제한 없음
$(document).ready(function(){
실행내용;
})
3)
$(function(){})
<script>
// 순수 자바스크립트방식
window.onload = function(){
// 실행내용
// }
// jQuery라이브러리 방식
// 방식1)
jQuery(document).ready(function(){
console.log('문서 읽어들이기 완료1');
});
// 방식2번
$(document).ready(function(){
console.log('문서 읽어들이기 완료2');
});
// 방식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").css('background','green');
$('선택자') == document.getElementsByTagName('h3')
//해당 요소를 선택하겠다
//.css: 선택된 요소들의 스타일과 관련된 기능 수행
//JS방식: prex태그 글자색을 red로
var preArr = document.getElementsByTagName('pre');
for(var i in pres){
preArr[i].style.color='red';
}
//jQuery방식
$('pre').css('color','red');
});
</script>
Reference
https://velog.io/@kay9508/jQuery%EB%9E%80
jQuery란?
1. 제이쿼리(jQuery) 제이쿼리는 웹사이트에서 자바스크립트를 쉽게 사용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다. - 2006년 미국의 존 레식(John Resig)이 발표했다. 2. 특
velog.io