헬린코린이
jQuery 본문
제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록
도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다.
“write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로
2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다.
제이쿼리는 다음과 같은 특장점을 가지고 있습니다.
웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다.
거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다.
네트워크, 애니메이션 등 다양한 기능을 제공합니다.
메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원합니다.
관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있습니다.
공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능합니다.
jQuery도 라이브러리이기 때문에
이 문법을 사용하기 위해서는 파일이 필요합니다.
jQuery plugin이란 custom jQuery 메서드로써 jQuery를 확장한 것을 말한다.
HTML의 구조, 웹 문서 페이지의 틀 (ex) id, class명) 로서
CSS 스타일 ex) 레이아웃, amrgin, padding, … 미리 정해놓은 것이고
JS으로 만든 다양한 기능 들을 예제(Demo)와 함께 묶어서 배포한 것이고
종류에는 Swiper, 아코디언 플러그인(드롭다운메뉴), … 등이 있습니다.
jQuery를 연결하는 방법에는 2가지가 있습니다.
첫번째 부터 알아보겠습니다.
1) 외부에서 JS 파일을 다운로드하여한 폴더에 담아놓고 불러올 건데요
코드먼저 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부에서 JS 파일 불러오기</title>
</head>
<body>
<!-- jQuery 라이브러리 파일을 내 프로젝트에 직접 생성하여 사용 -->
<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(
console.log('jQuery 라이브러리 연결확인')
//문서가 준비되면 이거 수행해
);
</script>
확인
</body>
</html>이 다큐먼트($(document) )에서 즉 HTML에서 실행될 준비가 되었으면. ready () 안에 문장을 수행해줘라는 의미이다.
js/jquery-3.6.3.min.js는 내 컴퓨터에 있는 파일을 경로로 잡았다.
이러면 정상작동이 가능할 것이다.
2) CDN 연결방식이다.
코드 먼저 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CDN 연결방식</title>
</head>
<body>
<!--
jQuery 파일정보를 서버에 저장해둔 것이 있다!
사용자가 서버에 저장된 jQuery 파일정보를 요청해서 사용
-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
for(var i=1; i<=10; i++){
$('<h1>'+i+'</h1>').appendTo('body');
} //어떠한 요소를 bod
//y에 붙여넣어줘
});
</script>
</body>
</html>jquery에 파일정보를 서버에 저장해둔 것이 있습니다. jquery CDN 찾으시면 어렵지 않게 찾으실 수 있을 겁니다.