jQuery를 사용하는 방법은 크게 두가지가 있다.
- 특정 폴더에 파일을 다운로드한 후 밑에 코드와 같이 작성해 HTML 페이지로 가져오는 것
<!-- 폴더 구성: HTMLPage.html + jquery.min.js -->
<!DOCTYPE html>
<html>
<head>
<title>jQuery Basic</title>
<script src = "jquery.min.js"></script>
<script>
// 여기에 코드를 입력한다.
</script>
</head>
<body>
</body>
</html>- CDN(Content Delivery Network)을 활용하는 것
CDN은 사용자에게 간편하게 콘텐츠를 제공하는 방식이다.
세계 여러 곳에 서버가 있는 기업(구글, 마이크로소프트 ...)이 사용자와 가장 가까운 곳에 있는 서버에서 데이터를 전달하므로 빠르게 자바스크립트 파일을 불러올 수 있다.
스타일 조작
문서 객체의 스타일을 조작할 때는 다음의 메소드를 사용한다.
| 메소드 | 설명 |
|---|---|
| css() | 스타일을 조작한다. |
속성 조작
문서 객체의 속성을 조작할 때는 다음의 메소드를 사용한다.
|메소드|설명|
|------------------|----------------------|
|attr()|속성을 조작한다.|
문서 객체 생성
문서 객체를 생성할 때는 다음과 같이 $() 함수의 매개변수에 'HTML 형식의 문자열'을 입력한다.
$('<h1></h1>')이렇게 생성한 문서 객체는 지금까지 살펴본 메소드들을 활용헤 내부의 글자, 스타일, 속성을 조작할 수 있다.
$('<h1></h1>')
.text('안녕하세요')
.attr('data-test', 'test')
.css({
backgroundColor: 'red',
color: 'white'
});이렇게 생성하고 설정한 객체는 자바스크립트 코드로만 존재한다.
⇒ 따라서 화면에 출력할 때는 다음과 같은 메소드를 사용한다.
문서 객체 추가 메소드
| 메소드 | 설명 |
|---|---|
| $(A).prepentTo(B) | A를 B 안쪽 앞에 추가한다. |
| $(A).appendTo(B) | A를 B 안쪽 뒤에 추가한다. |
| $(A).insertBefore(B) | A를 B 앞에 추가한다. |
| $(A).insertAfter(B) | A를 B 뒤에 추가한다. |
이벤트
jQuery가 기본적으로 제공하는 이벤트 관련 메소드는 다음과 같다.
| 메소드 | 설명 |
|---|---|
| on() | 이벤트를 연결한다. |
| off() | 이벤트를 제거한다. |
이벤트를 연결하는 방법에는 두 가지가 있다.
- 직접 연결(Bind)
- 간접 연결(Delegate)
이벤트 직접 연결
이벤트 직접 연결은 특정 태그에 이벤트를 연결하고, 특정 태그를 눌렀을 때 이벤트가 발생하게 하는 것을 의미한다.
jQuery로 이벤트를 직접 연결할 때는 on() 메소드를 사용하며, 기본형태는 다음과 같다.
$(선택자).on(이벤트_이름, 콜백_함수)이벤트를 연결할 때 콜백 함수의 매개변수로 이벤트 객체가 전달된다.
이벤트 객체를 사용하면 이벤트 정보를 알아낼 수 있다.
콜백 함수 내부에서 this 키워드는 이벤트를 발생시키는 객체이다.
this 키워드를 활용해서 이벤트를 발생시킨 객체의 스타일을 변경할 수 있다.
이벤트 간접 연결
이벤트 간접 연결은 '부모에게 이벤트를 위임Delegate 해서 부모가 이벤트를 처리하게 하는 것'이다.
이벤트 제거
이벤트를 제거할 때는 off() 메소드를 사용한다.
