728x90
728x90
제이쿼리란?
우리가 웹페이지를 만들때 자주 사용되는 것 중 하나인 제이쿼리는
자바스크립트를 보다 쉽고, 효율적이고 직관적으로 제어할 수 있도록 만든
자바스크립트 라이브러리를 말합니다.
기본 제이쿼리?
swiper.js나 masonly.js등의 라이브러리를 사용하려면 제이쿼리의 기본함수가 필요한데,
그 기본함수가 바로 기본제이쿼리입니다.
기본 설정
제이쿼리를 사용하려면 기본제이쿼리를 추가해야 합니다.
여러 방법 중에 세 가지 방법 중 하나를 선택해서
<head></head> 안에 삽입해줍니다.
<!-- 서버 내부에서 불러오는방법 -->
<script src="js/jquery.js"></script>
<!-- 서버 외부, cdn으로 불러오는 방법 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 서버 외부, 최신 라이브러리로 불러오는 방법 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
사용 예시
기본설정까지 마치었다면 제이쿼리를 사용할 수 있습니다.
제이쿼리의 간단한 예시로 자바스크립트와 제이쿼리로 같은 기능을 구현한다고 할때
아래와 같이 다르게 표현된다는 것을 확인할 수 있습니다.
//자바스크립트로 표현
window.onload = function() {
document.getElementById("#btn").onclick = function() {
console.log("click!")
}
};
//제이쿼리 표현
$(document).ready(function() {
$("#btn").on("click", function() {
console.log("click!")
});
});
반응형
'Code > JQuery' 카테고리의 다른 글
| 슬라이드 제이쿼리 (Swiper.js) (1) | 2023.02.01 |
|---|---|
| 벚꽃처럼 흩날리는 스크립트 (Sakura.js) (1) | 2023.01.30 |
| 스크롤 시 Class 추가 제거 (0) | 2023.01.18 |
| 트윈맥스(TweenMax)이용해서 좌우로 반복되는 애니메이션 (0) | 2022.12.29 |