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의 약식기호

 

무엇을 어떻게

-------- --------

선택자 동작,이벤트와 함께 정의

 

 

'웹 > jQuery' 카테고리의 다른 글

jQuery Effect  (0) 2019.07.16
jQuery 이벤트  (0) 2019.07.16
jQuery선택자  (0) 2019.07.16

+ Recent posts

티스토리툴바