롸?
jQuery 본문
1. jQuery(제이쿼리)란?
jQuery(제이쿼리)는 오픈 소스 기반의 자바스크립트 라이브러리이다.
jQuery는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해준다. 또한, jQuery를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.
현재 많이 사용되고 있는 자바스크립트 라이브러리는 다음과 같다.
-
프로토타입(Prototype)
-
도조(Dojo)
-
GWT(Google Web Toolkit)
-
MochiKit
이렇게 수많은 자바스크립트 라이브러리 중에서도 jQuery가 특히 많이 사용되는 이유는 다음과 같다.
-
jQuery는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다.
-
HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다.
-
애니메이션 효과나 대화형 처리를 간단하게 적용해 준다.
-
같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다.
-
다양한 플러그인과 참고할 수 있는 문서가 많이 존재한다.
-
오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있다.
2. 제이쿼리 적용
2-1. 공식 사이트에서 js파일을 다운 받아서 <script>태그로 삽입하기
- 파일은 실전 버전(압축되어서 읽을 수 없는 버전)과 개발 버전이 있다
<head>
<script src="/media/jquery-3.3.1.min.js"></script>
</head>
2-2. CDN(Content Delivery Network) 이용
- 자동으로 가장 가까운 서버에서 다운받도록 하는 기술로 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지며, 파일을 따로 저장하지 않아도 제이쿼리를 사용할 수 있다. CDN은 여러 곳이 있으므로 원하는 곳을 선택하여 적용하면 된다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3. 기본 문법
제이쿼리는 간단하게 HTML요소를 선택하고, 특정 동작을 설정할 수 있다.
$(선택자).동작함수();$ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
- $()함수
$()함수는 선택된 html요소를 제이쿼리에서 이용할 수 있는 형태로 생성해주는 역할을 한다. 인수로는 html 태그 이름뿐만 아니라 CSS선택자를 전달하여 특정 html요소를 선택할 수도 있다. 이렇게 생성된 요소를 제이쿼리 객체라고 하고 객체의 메소드를 사용하여 여로 동작을 설정할 수 있다.
- Document 객체의 ready() 메소드
자바스크립트에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.
window.onload = function() {
// 자바스크립트 코드
};
제이쿼리에서는 다음과 같은 문법으로 제공한다.
$(document).ready(function() {
// jQuery 코드
});
//더 짧은 문법
$(function() {
// jQuery 코드
});
참고
'WEB > JavaScript & jQuery' 카테고리의 다른 글
| [ES6] Spread Operator (스프레드 연산자) (0) | 2022.02.07 |
|---|---|
| 자바스크립트 화살표 함수 (0) | 2020.03.12 |
| 자바스크립트 이벤트 핸들링 (0) | 2020.03.11 |
| 자바스크립트 스코프 호이스팅 (0) | 2020.03.10 |
| 일급 함수 (0) | 2020.03.02 |