추가 적립 안내

예제를 통해 익히는 단계별 jQuery 활용서!

『처음 배우는 jQuery』는 웹 디자인에 새로운 철학을 불어넣은 jQuery의 입문서이다. jQuery를 통해 개발 과정을 단축할 수 있고, 높은 수준의 프로그래밍 지식 없이는 구현하기가 불가능하리라 여겼던 대화형 기능을 쉽게 구현할 수 있음을 보여준다. 일상적인 작업에서 쓸 수 있는 예제가 수록되어 있으며, 특히 4장 후반부터 끝까지, 모든 코드는 ‘단계별로’ 설명되어 있다. 코드 예제에서도 이전 코드와 달라진 부분을 볼드체로 표시하여 설명을 대조하며 읽으며 코드를 쉽게 이해할 수 있도록 하였다.

jQuery는 웹 디자인에 새로운 철학을 불어넣었다. jQuery를 통해 개발 과정을 단축할 수 있고, 높은 수준의 프로그래밍 지식 없이는 구현하기가 불가능하리라 여겼던 대화형 기능을 쉽게 구현할 수 있음을 이 책 전체를 통해 보이고자 했다. 이 책은 jQuery에 대한 입문서 겸, 일상적인 작업에서 쓸 수 있는 예제가 담긴 쿡북이기도 하다.
이 책의 4장 후반부터 끝까지, 모든 코드는 '단계별로' 설명되어 있다. 코드 예제에서도 이전 코드와 달라진 부분을 볼드체로 표시했기 때문에 그 부분과 설명을 대조하며 읽으면 코드를 이해하기가 훨씬 쉽다.

jQuery는 웹 디자인에 새로운 철학을 불어넣었다. jQuery를 통해 개발 과정을 단축할 수 있고, 높은 수준의 프로그래밍 지식 없이는 구현하기가 불가능하리라 여겼던 대화형 기능을 쉽게 구현할 수 있음을 이 책 전체를 통해 보이고자 했다. 이 책은 jQuery에 대한 입문서 겸, 일상적인 작업에서 쓸 수 있는 예제가 담긴 쿡북이기도 하다.
이 책의 4장 후반부터 끝까지, 모든 코드는 ‘단계별로’ 설명되어 있다. 코드 예제에서도 이전 코드와 달라진 부분을 볼드체로 표시했기 때문에 그 부분과 설명을 대조하며 읽으면 코드를 이해하기가 훨씬 쉽다.

편역의 글
감사의 글
지은이의 글

1장 jQuery를 소개합니다

자바스크립트 라이브러리
자바스크립트 코어 대신 자바스크립트 라이브러리를 쓰면 무엇이 좋을까?
주요 라이브러리에 대해 알아봅시다
jQuery의 장점

2장 jQuery 시작하기

개발 환경 세팅하기
Mac OS X 설정
윈도 설정
파이어버그
jQuery 내려받기
웹 페이지에 jQuery 삽입하기
jQuery 래퍼 이해하기
$(document).ready( ) 밖에서 코드 실행하기
다른 라이브러리와 충돌 방지하기
jQuery와 네이티브 자바스크립트 함께 사용하기

3장 jQuery의 핵심 : 선택자와 필터, CSS

jQuery 선택자
CSS 선택자를 이용해 페이지 요소 선택
필터 사용
jQuery 필터 목록
짝수/홀수 필터로 얼룩무늬 테이블 만들기
목록이나 요소 컬렉션에서 첫 요소나 마지막 요소 선택하기
특정 요소를 포함한 요소만 선택
빈 요소만 선택
특정 텍스트가 들어 있는 요소 선택
속성으로 요소 선택하기
특정 웹사이트를 가리키는 요소 선택하기
속성값이 특정 단어로 끝나는 요소 선택하기
jQuery로 HTML과 CSS 조작하기
DOM 요소 및 내용 추가, 제거, 복사, 대체하기
jQuery와 CSS
DOM 내부 이동하기
.first( )로 첫 번째 요소 찾기
.end( )를 이용해서 이전 선택으로 돌아가기
직전에 선택한 요소도 함께 선택하는 .andSelf( )
모든 요소에서 함수를 실행하는 .each(function)

4장 이벤트

jQuery의 이벤트
document와 window 이벤트 핸들러
DOM이 준비됐는지 확인하기
이미지를 읽었을 때 .load( ) 이벤트 핸들러 이용하기
사용자가 페이지를 떠날 때 경고 보여주기
이벤트 핸들러 등록하기
.bind( )를 이용해 이벤트 핸들러 등록하기
.live( )를 이용해 이벤트 핸들러 등록하기
.delegate( )로 이벤트 핸들러 등록하기
마우스 이벤트 활용하기
마우스 클릭으로 내용을 추가하거나 제거하기
더블클릭 이벤트
마우스를 올리면 내용을 보여주는 툴팁 만들기
mousedown/mouseup 이벤트로 +/- 버튼 구현
버튼에 이미지 롤오버 효과 만들기
폼 이벤트 다루기
키보드 이벤트
몇 글자 더 입력할 수 있는지 알려주기

5장 웹사이트에 효과 적용하기

jQuery로 할 수 있는 일
요소 보이고 감추기
드러내기와 감추기 토글
콜백 함수 사용하기
요소를 슬라이딩으로 숨기고 드러내기
.slideToggle( ) 메서드로 다른 검색 옵션 보여주기
페이드 효과
이미지 갤러리에 페이드 효과 적용하기
점진적 향상 방식의 갤러리
jQuery로 마크업을 만든 갤러리
지연시간을 추가해서 애니메이션 타이밍 조절하기
.stop( ) 메서드로 애니메이션 제어하기
여러 가지 효과가 적용된 뉴스 티커 만들기
더 정교한 애니메이션
이미지 갤러리에 텍스트 캡션 넣기
이미지 크기가 각각 다른 갤러리
Easing 플러그인을 이용한 더 사실적인 애니메이션

6장 내비게이션 개선 : 메뉴와 탭, 아코디언

페이지의 모든 링크가 새 창에서 열리게 만들기
내비게이션 메뉴에서 현재 페이지 표시하기
단순한 드롭다운 메뉴 만들기
드롭다운 메뉴 개선
아코디언 메뉴 만들기
아코디언 메뉴 개선 - 링크에 따라 메뉴 펼치기
탭 인터페이스 만들기
탭 인터페이스 개선-애니메이션 추가

7장 재미있는 대화형 테이블 만들기
CSS로 테이블 데이터에 스타일 주기
테이블에 얼룩말 스타일 적용하기
테이블 행에 호버 스타일 적용
테이블 데이터 조작하기
테이블의 첫 번째 행 다음에 메시지 삽입하기
순번을 기준으로 테이블 행 삭제하기
jQuery로 테이블 페이징 만들기
페이징 개선 - 사용자가 페이지당 행수를 조절할 수 있도록 만들기
테이블 정렬 플러그인

8장 jQuery로 폼 개선하기
폼 요소의 기본적인 이벤트
폼 요소 선택
페이지를 불러왔을 때 자동으로 필드에 포커스 주기
폼 요소를 활성화/비활성화하기
텍스트 필드에 기본값 넣기
체크박스 모두 선택하기
select 요소의 값 가져오기
단순한 유효성 검사 예제
양식 복사

9장 Ajax와 동적인 데이터 다루기
AJAX란?
웹 페이지에서 동적으로 내용 불러오기
$.ajax( ) 메서드
XML 데이터 다루기
JSON 데이터 다루기
동적 스크립트 태그 삽입
JSONP를 통해 데이터 가져오기
Ajax를 이용해 데이터 전송하기
GET 요청
POST 요청
'아이프레임'으로 비동기 전송하기
.ajax( )를 통해 데이터 전송하기

10장 jQuery 플러그인
jQuery 플러그인의 기초
jQuery UI
jQuery UI 내려받기
jQuery UI Themeroller
jQuery UI 활용

부록1 강력한 텍스트 에디터 Sublime Text를 소개합니다
부록2 console.log( ) 안전하게 쓰기

옮긴이의 글
감사의 글
지은이의 글

1장 jQuery를 소개합니다
자바스크립트 라이브러리
자바스크립트 코어 대신 자바스크립트 라이브러리를 쓰면 무엇이 좋을까?
주요 라이브러리에 대해 알아봅시다
jQuery의 장점

2장 jQuery 시작하기
개발 환경 세팅하기
Mac OS X 설정
윈도 설정
파이어버그
jQuery 내려받기
웹 페이지에 jQuery 삽입하기
jQuery 래퍼 이해하기
$(document).ready( ) 밖에서 코드 실행하기
다른 라이브러리와 충돌 방지하기
jQuery와 네이티브 자바스크립트 함께 사용하기

3장 jQuery의 핵심 : 선택자와 필터, CSS
jQuery 선택자
CSS 선택자를 이용해 페이지 요소 선택
필터 사용
jQuery 필터 목록
짝수/홀수 필터로 얼룩무늬 테이블 만들기
목록이나 요소 컬렉션에서 첫 요소나 마지막 요소 선택하기
특정 요소를 포함한 요소만 선택
빈 요소만 선택
특정 텍스트가 들어 있는 요소 선택
속성으로 요소 선택하기
특정 웹사이트를 가리키는 요소 선택하기
속성값이 특정 단어로 끝나는 요소 선택하기
jQuery로 HTML과 CSS 조작하기
DOM 요소 및 내용 추가, 제거, 복사, 대체하기
jQuery와 CSS
DOM 내부 이동하기
.first( )로 첫 번째 요소 찾기
.end( )를 이용해서 이전 선택으로 돌아가기
직전에 선택한 요소도 함께 선택하는 .andSelf( )
모든 요소에서 함수를 실행하는 .each(function)

4장 이벤트
jQuery의 이벤트
document와 window 이벤트 핸들러
DOM이 준비됐는지 확인하기
이미지를 읽었을 때 .load( ) 이벤트 핸들러 이용하기
사용자가 페이지를 떠날 때 경고 보여주기
이벤트 핸들러 등록하기
.bind( )를 이용해 이벤트 핸들러 등록하기
.live( )를 이용해 이벤트 핸들러 등록하기
.delegate( )로 이벤트 핸들러 등록하기
마우스 이벤트 활용하기
마우스 클릭으로 내용을 추가하거나 제거하기
더블클릭 이벤트
마우스를 올리면 내용을 보여주는 툴팁 만들기
mousedown/mouseup 이벤트로 +/- 버튼 구현
버튼에 이미지 롤오버 효과 만들기
폼 이벤트 다루기
키보드 이벤트
몇 글자 더 입력할 수 있는지 알려주기

5장 웹사이트에 효과 적용하기
jQuery로 할 수 있는 일
요소 보이고 감추기
드러내기와 감추기 토글
콜백 함수 사용하기
요소를 슬라이딩으로 숨기고 드러내기
.slideToggle( ) 메서드로 다른 검색 옵션 보여주기
페이드 효과
이미지 갤러리에 페이드 효과 적용하기
점진적 향상 방식의 갤러리
jQuery로 마크업을 만든 갤러리
지연시간을 추가해서 애니메이션 타이밍 조절하기
.stop( ) 메서드로 애니메이션 제어하기
여러 가지 효과가 적용된 뉴스 티커 만들기
더 정교한 애니메이션
이미지 갤러리에 텍스트 캡션 넣기
이미지 크기가 각각 다른 갤러리
Easing 플러그인을 이용한 더 사실적인 애니메이션

6장 내비게이션 개선 : 메뉴와 탭, 아코디언
페이지의 모든 링크가 새 창에서 열리게 만들기
내비게이션 메뉴에서 현재 페이지 표시하기
단순한 드롭다운 메뉴 만들기
드롭다운 메뉴 개선
아코디언 메뉴 만들기
아코디언 메뉴 개선 - 링크에 따라 메뉴 펼치기
탭 인터페이스 만들기
탭 인터페이스 개선-애니메이션 추가

7장 재미있는 대화형 테이블 만들기
CSS로 테이블 데이터에 스타일 주기
테이블에 얼룩말 스타일 적용하기
테이블 행에 호버 스타일 적용
테이블 데이터 조작하기
테이블의 첫 번째 행 다음에 메시지 삽입하기
순번을 기준으로 테이블 행 삭제하기
jQuery로 테이블
페이징 만들기
페이징 개선 - 사용자가 페이지당 행수를 조절할 수 있도록 만들기
테이블 정렬 플러그인

8장 jQuery로 폼 개선하기
폼 요소의 기본적인 이벤트
폼 요소 선택
페이지를 불러왔을 때 자동으로 필드에 포커스 주기
폼 요소를 활성화/비활성화하기
텍스트 필드에 기본값 넣기
체크박스 모두 선택하기
select 요소의 값 가져오기
단순한 유효성 검사 예제
양식 복사

9장 Ajax와 동적인 데이터 다루기
AJAX란?
웹 페이지에서 동적으로 내용 불러오기
$.ajax( ) 메서드
XML 데이터 다루기
JSON 데이터 다루기
동적 스크립트 태그 삽입
JSONP를 통해 데이터 가져오기
Ajax를 이용해 데이터 전송하기
GET 요청
POST 요청
iframe으로 비동기 전송하기
.ajax( )를 통해 데이터 전송하기

10장 jQuery 플러그인
jQuery 플러그인의 기초
jQuery UI
jQuery UI 내려받기
jQuery UI Themeroller
jQuery UI 활용

부록1 강력한 텍스트 에디터 Sublime Text를 소개합니다
부록2 console.log( ) 안전하게 쓰기