jQuery
Query가 기본적으로 가진 철학은 "write less, do more"로 적게 쓰고 많이 쓰자입니다.
개발자의 언어로 번역하면 "적은 코드로 많은 일을 하자"가 가장 어울리는 해석이라고 생각됩니다.
jQuery는 다음과 같은 기능을 제공합니다.
DOM과 관련된 처리를 쉽게 구현 할 수 있다.
- 규칙성을 가지고 이벤트를 처리 할 수 있다.
- 애니메이션 효과를 쉽게 만들 수 있다.
- AJAX 처리 방식을 편리하게 사용 할 수 있다.
그 밖에도 jQuery는 작은 양의 코드로도 많은 일을 할 수 있게 설계되어 있어 프로그래머가 아니어도 꽤 이해하기가 쉬운 구문을 가지고 있습니다.
Javascript와 jQuery의 차이점을 보기 위해 예시를 작성해보았습니다.
javascript
let titleElements = document.getElementsByClassName("title");
for (var titleElement in titleElements) {
titleElement.className = titleElement.className + " selected";
}
jQuery
$(".title").addClass("selected");이와 같이 jQuery는 작은 양의 코드로 Javascript로 작성된 많은 양의 코드와 동일한 동작을 할 수 있습니다.
사용법
jQuery를 사용하는 방법은 크게 3가지 정도가 있습니다.
NPM or Yarn
npm install jquery
yarn add jquery
CDN (Contents Delivery Network)
인터넷이 사용 가능하다는 가정하에 HTML의 <head></head> 사이에 아래의 코드를 삽입하면 별도의 설치 없이 사용할 수 있는 방법입니다. 이전에 패키지 관리 툴 없이 개발을 할 때 사용하는 전형적인 방법입니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
다운로드해서 프로젝트에 포함
패키지 관리 툴을 사용하지 않고 인터넷도 사용할 수 없는 환경에서 쓰이는 방법입니다.jQuery 공식 다운로드 사이트에 접속하여 jQuery를 다운로드하여 프로젝트에 넣어서 사용하시면 됩니다.
'JavaScript > Jquery' 카테고리의 다른 글
| jQuery : CSS() 메서드 (3) | 2022.09.05 |
|---|---|
| jQuery - 탐색 선택자 (5) | 2022.09.01 |
| jQuery - 필터 선택자 (4) | 2022.09.01 |
| jQuery - 속성 선택자 (3) | 2022.09.01 |
| jQuery - 기본 선택자 (4) | 2022.09.01 |
댓글