웹/jQuery
jQuery개요
무적강사
2019. 7. 16. 10:27
jQuery는 자바스크립트 코드를 훨씬 더 간결한 코드로 사용할 수 있도록 지원되는 라이브러리이다. 자바스크립트로 DOM을 제어하는 것은 복잡한 코드와 for 문을 몇 개씩 중복해서 작업해야 한다. jQuery는 한 줄로 실행할 수 있도록 많은 메서드들을 지원한다.
https://jquery.com/에 접속해 보자. jQuery의 슬로건이 로고에 정확하게 나와 있다.
"write less, do more"
[jQuery에서 지원되는 주 기능]
- DOM제어
- CSS제어
- Ajax
- Effect(애니메이션 효과들)
- 많은 플러그인의 지원(플러그인이란 필요한 기능들이 이미 완제품으로 만들어서 제공되
는 것을 의미한다.)
[jQuery사용방법]
jQuery를 사용하기 위한 방법은 bootstrap사용했던 방법과 동일하다.
1. jQuery라이브러리를 다운로드 받아 내 프로젝트에 추가하기
- compressed : jquery-3.4.1.min.js(압축버전 - 로딩속도 빠름)
- uncompressed : jquery-3.4.1.js(개발자버전 - 수정하여 작업 가능)
=> 자바스크립트 외부라이브러 추가해서 사용하는 방법으로 사용
2. CDN
전 세계에 퍼져있는 서버에서 jQuery라이브러리를 호스팅하여 제공하는 방법으로 이는 광범위하게 사용하는 서버에 배포하여 참조하는 방식이므로 해당 도메인 경로를 지 정하여 라이브러리를 추가하는 방식으로 사용할 수 있다. 이는 웹 페이지 방문객이 이미 타 사이트에서 사용하는 동일한 jQuery사본을 다운로드 해서 참조하는 경우 캐시에서 로드 되므로 훨씬 빠르게 동작할 수 있다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>[jQuery기본 문법]
jQuery는 자바스크립트로 DOM을 제어하는 명령문을 간단하게 제공한다. 내부에서 DOM을 제어하는 기능을 다양하게 제공하므로 여러 선택자를 통해 HTML문서의 요소를 접근해야 한다. 또한 jQuery는 자바스크립트 이므로 <script></script> 태그 내부에 정의해서 사용한다.
$(document).ready(function(){
//javascript코드나 jQuery코드
})ready handler는 브라우저 내부에서 DOM객체가 생성이 완료되었으면 jQuery작업을 시작하겠다는 의미로 해석
$는 jQuery의 약식 표현으로 생각하면 되고 ready는 이벤트핸들러라 생각하면 된다.
위의 예는 문서 준비 작업이 내부에서 완료되면 작업을 시작하겠다는 의미이고 일반적인 jQuery의 사용방법은 다음과 같다.
$("선택자").동작()
- ------ -----
| | |_______________________________jQuery js파일에 미리 정의되어
| | 있는 실행할 수 있는 기능
| |___css와 거의 동일 : class속성 ., id속성인 경우 #
|
|___ jQuery를 의미 jQuery의 약식기호