라이브러리와 jQuery
라이브러리(Library)란?
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
jQuery란?
- 엘리먼트를 선택하는 강력한 방법과
- 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
- 자바스크립트 라이브러리
jQuery의 사용
jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. 아래는 jQuery를 로드하는 방법이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.7.1.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//body 태그
$('body').prepend('<h1>Hello World</h1>'); //prepend: 앞에 위치시킨다.
</script>
</body>
</html>
|
cs |
결과적으로 Body 태그 아래에 <h1>Hello World</h1> 코드가 만들어진다.
제어 대상 찾기 (jQuery)
jQuery를 이용하면 DOM을 이용했을 때보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다. jQuery는 객체를 조회할 때 CSS 선택자를 이용한다.
jQuery의 기본문법
$('li').css('color', 'red');
$()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체를 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메서드를 가지고 있다. 위의 코드에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.
<li style = "color : red">와 같은 코드
jQuery 사용 예제
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
jQuery를 이용하면 DOM에서의 3~4줄짜리 코드를 1줄로 줄일 수 있다.