jQuery
제이쿼리는 자바스크립트 언어를 간편하게 사용 할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 입니다. 애니메이션과 이벤트 처리를 쉽게 할 수 있으며, 다양한 플러그인이 존재하며 다른 라이브러리와 충돌을 일으키지 않습니다. 제이쿼리를 사용하기 위해서는 두가지 방식이 있는데 첫번째는 CDN을 이용한 방식이고, 두번째는 직접 다운로드 하는 방식입니다.
Internet Explorer 9 이상
Opera 현재 버전
Android 4.0 이상
Chroma, Edge, Firefox, Safari 현재 버전, 바로 이전 버전
Safari Mobile iOS 7 이상
현재 제이쿼리 라이브러리 3.0 버전을 지원하는 브라우저 입니다.
다운로드 방식
제이쿼리 홈페이지에 접속하여 제이쿼리를 다운 받습니다.
html문서를 제이쿼리 라이브러리와 같은 경로에 저장합니다.
<!DOCTYPE>
<html lang="ko">
<head>
<meta charest="UTF-8">
<title>jQuery 라이브러리 연결</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
console.log("jQuery 시작");
});
</script>
</script>
<body>
</body>
</html>
link(CDN)
html문서에 제이쿼리 라이브러리를 링크로 연결합니다.
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log("jQuery 시작");
});
</script>
</head>
<body>
</body>
</html>
javascript
자바스크립트와 제이쿼리의 비교해 봅시다✨
sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
sliderInner.style.효과 = "translateX( )";
jQuery
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({ left : -800 * currentIndex }, 600);
$(선택자).동작함수( );
$(".slider__inner").animate({ left : -800 * currentIndex }, 600);
1. $ 기호는 제이쿼리를 의미를 하며, 제이쿼리에 접근을 하게 해주는 식별자 이기도 합니다.
2. 제이쿼리는 인자값으로 CSS selector를 줄 수 있습니다.
'JavaScript' 카테고리의 다른 글
| jQuery - 기본 선택자 (3) | 2022.08.30 |
|---|---|
| GSAP (4) | 2022.08.29 |
| 함수의 유형 (3) | 2022.08.22 |
| charAt( ) (2) | 2022.08.22 |
| match( ) (2) | 2022.08.22 |
댓글