jQuery + jQuery UI + jQuery Mobile 레퍼런스 북

Part-1 jQuery

Chapter 01·jQuery의 기초지식
001 jQuery이란? … 38
002 jQuery 버전에 대해 … 45
003 jQuery 호환 라이브러리에 대해 … 48
004 jQuery 라이브러리 읽기에 대해 … 52
005 jQuery와 DOM（문서 오브젝트 모델）에 대해 … 55

Chapter 02·jQuery Core(코어/기본)
006 jQuery 오브젝트를 지정한다 … 60
007 ‘$’가 다른 라이브러리와 충돌하지 않게 하기 … 62

Chapter 03·셀렉터 관계
008 모든 요소를 지정한다 … 66
009 ID 이름을 지정한다 … 69
010 클래스 이름으로 지정한다 … 71
011 속성 이름으로 지정한다 … 73
012 여러 요소를 지정한다 … 76
013 여러 속성 셀렉터를 지정한다 … 78
014 특정 요소를 지정한다 … 80
015 빈 요소를 지정한다 … 83
016 제목 요소를 지정한다 … 85
017 선택된 요소를 지정한다 … 87
018 첫 번째 요소를 지정한다 … 89
019 마지막 요소를 지정한다 … 91
020 요소의 앞뒤 관계를 지정한다 … 93
021 지정한 출현 순서보다 작은 요소를 지정한다 … 95
022 지정한 출현 위치보다 큰 요소를 지정한다 … 98
023 지정한 출현 위치의 요소를 지정한다 … 101
024 짝수 번째 / 홀수 번째 요소를 지정한다 … 103
025 부모 요소를 지정한다 … 106
026 자식 요소만 지정한다 … 109
027 부자 관계에서 자식 요소를 지정한다 … 111
028 특정 요소가 조상인 요소를 지정한다 … 113
029 특정 자손 요소가 있는 요소를 지정한다 … 116
030 지정한 순서의 자식 요소를 지정한다 … 119
031 첫 번째 자식 요소를 지정한다 … 122
032 마지막 자식 요소를 지정한다 … 124
033 형제 요소를 지정한다 … 126
034 표시된 요소를 지정한다 … 129
035 표시되어 있지 않은 요소를 지정한다 … 132
036 입력이 활성화되어 있는 요소를 지정한다 … 135
037 입력이 비활성화되어 있는 요소를 지정한다 … 138
038 내용이 특정 단어로 시작하거나 ‘-’로 되어 있는 요소를 지정한다 … 141
039 속성이 지정한 문자열로 시작하는 요소를 지정한다 … 143
040 속성이 지정한 문자열로 끝나는 요소를 지정한다 … 147
041 속성이 지정한 내용으로 되어 있는 요소를 지정한다 … 150
042 속성이 지정한 내용이 아닌 요소를 지정한다 … 154
043 속성이 지정한 단어를 포함하는 요소를 지정한다 … 157
044 속성이 지정한 문자열을 포함하는 요소를 지정한다 … 160
045 지정한 내용이 포함되는 요소를 지정한다 … 163
046 일치하지 않는 요소를 지정한다 … 165
047 체크 박스를 지정한다 … 168
048 체크를 끝낸 체크 박스를 지정한다 … 170
049 버튼을 지정한다 … 173
050 라디오 버튼을 지정한다 … 176
051 리셋(초기화) 버튼을 지정한다 … 178
052 전송(제출) 버튼 요소를 지정한다 … 180
053 텍스트 필드를 지정한다 … 182
054 입력 폼 image를 지정한다 … 184
055 입력 폼의 ‘input’ 요소를 지정한다 … 186
056 파일 업로드 요소를 지정한다 … 188
057 포커스하고 있는 요소를 지정한다 … 190
058 애니메이션하고 있는 요소를 지정한다 … 192

Chapter 04·속성 관계
059 요소의 속성 값을 얻고 설정한다 … 196
060 프로퍼티를 얻고 설정한다 … 199
061 속성을 삭제한다 … 202
062 프로퍼티를 삭제한다 … 205
063 입력 폼 값을 얻고 설정한다 … 208

Chapter 05·Traversing(트래버스)
064 반복 처리를 실행한다 … 212
065 요소를 검색한다 … 214
066 요소를 필터링한다 … 216
067 조건에 맞는 경우에 처리한다 … 218
068 요소를 배열로 변환한다 … 220
069 처리 대상을 추가한다 … 223
070 자신의 요소도 대상으로 한다 … 225
071 첫 번째 요소와 마지막 요소를 구한다 … 227
072 지정한 요소가 있는 경우 처리한다 … 229
073 특정한 요소 이외의 요소를 대상으로 한다 … 231
Traversing（트래버스）
CHAPTER 05
074 특정 위치의 요소를 지정한다 … 233
075 부모 요소를 얻는다 … 235
076 부모 요소와 조상 요소를 모두 얻는다 … 237
077 지정한 부모 요소 전까지의 부모 요소를 얻는다 … 239
078 요소에서 가장 가까운 요소를 얻는다 … 241
079 특정 ‘position’ 속성의 부모 요소를 얻는다 … 244
080 자식 요소를 모두 얻는다 … 246
081 모든 자식 요소/텍스트 요소를 얻는다 … 248
082 형제 요소를 모두 얻는다 … 250
083 이전 형제 요소를 대상으로 한다 … 252
084 이전 형제 요소를 모두 대상으로 한다 … 254
085 다음 형제 요소를 대상으로 한다 … 256
086 뒤에 있는 형제 요소를 모두 대상으로 한다 … 258
087 지정 범위의 형제 요소를 얻는다 … 260
088 지정한 요소 앞에 있는 특정 조건 이외의 형제 요소를 대상으로 한다 … 262
089 지정한 요소 뒤에 있는 특정 조건 이외의 형제 요소를 대상으로 한다 … 264
090 하나 앞 요소 집합으로 돌아간다 … 266

Chapter 06·조작
091 요소를 복사한다 … 270
092 요소를 분리한다 … 273
093 요소를 삭제한다 … 276
094 요소의 내용을 비운다 … 278
095 요소를 대체한다 … 280
096 지정한 요소로 대체한다 … 282
097 요소에 추가한다 … 284
098 요소 앞에 삽입한다 … 286
099 요소 뒤에 삽입한다 … 288
100 요소 뒤에 추가한다 … 290
101 요소 앞에 문자를 삽입한다 … 292
102 요소 뒤에 문자를 삽입한다 … 294
103 각 요소 맨 앞에 삽입한다 … 296
104 셀렉로 각 요소 맨 앞에 삽입한다 … 298
105 요소 안쪽에 넣는다 … 300
106 요소 내 문자열을 취득/설정한다 … 302
107 HTML 요소를 취득/설정한다 … 305
108 폼 관련 요소 값을 취득/설정한다 … 308
109 요소 속성 값을 취득/설정한다 … 310
110 지정한 요소를 묶는다 … 312
111 지정한 요소를 전부 묶는다 … 314
112 둘러싸고 있는 요소를 삭제한다 … 316

Chapter 07·CSS(스타일시트)
113 스타일시트 클래스를 추가한다 … 320
114 스타일시트 클래스를 삭제한다 … 322
115 클래스가 있는지 확인한다 … 324
116 스타일시트 클래스의 ON/OFF를 바꾼다 … 326
117 지정한 CSS 프로퍼티 값을 취득/설정한다 … 328
118 요소의 너비를 얻고 설정한다 … 332
119 요소의 안쪽/바깥쪽 폭을 얻는다 … 334
120 요소의 오프셋 위치를 구하고 설정한다 … 337
121 부모 요소로부터 상대 위치를 얻는다 … 339
122 스크롤 량을 얻고 설정한다 … 341
123 스타일시트 프로퍼티를 연결한다
（스타일시트 프로퍼티에 처리를 추가한다）… 344

Chapter 08·이벤트 관계
124 이벤트를 설정한다 … 348
125 한 번만 실행하는 이벤트를 설정한다 … 351
126 요소에 이벤트를 연계한다（바인딩한다 … 353
127 요소에 이벤트를 전송한다 … 355
128 이벤트를 해제한다 … 357
129 설정한 이벤트를 해제한다 … 360
130 이벤트 핸들러에 데이터를 전달한다 … 364
131 이벤트끼리 데이터를 주고받는다 … 366
132 오리지널 이벤트 오브젝트를 참조한다 … 368
133 이벤트 종류를 얻는다 … 370
134 이벤트 발생시의 키나 버튼 번호를 얻는다 … 372
135 이벤트 발생시 요소를 얻는다 … 374
136 이벤트 발생시의 요소만 얻는다 … 376
137 이벤트 발생 전 요소를 얻는다 … 378

138 이벤트 발생시의 시간을 얻는다 … 380
139 이벤트 발생시 네임 스페이스를 얻는다 … 382
140 이벤트 발생시 델리게이트 요소를 얻는다 … 385
141 브라우저 기본 동작을 금지한다 … 388
142 브라우저 기본 동작을 금지했는지 확인하다 … 391
143 이벤트 전달을 금지한다 … 393
144 이벤트 전달 금지 상태를 확인한다 … 396
145 이벤트 전달을 완전하게 금지했는지 확인한다 … 399
146 에러 발생시 처리를 실시한다 … 402
147 클릭된 경우에 처리한다 … 404
148 클릭할 때마다 교대로 작업을 실시한다 … 407
149 더블클릭된 경우에 처리한다 … 409
150 마우스 다운/마우스 업이 되었을 경우에 처리한다 … 412
151 마우스 오버/마우스 아웃인 경우에 처리한다 … 415
152 마우스가 요소 영역 내로 들어오거나 나간 경우에 처리한다 … 420
153 마우스 이동시 처리한다 … 425
154 호버（마우스 오버/아웃）일 때 처리를 실시한다 … 427
155 텍스트 필드의 문자가 선택된 경우에 처리한다 … 429
156 키가 눌린/떨어진 경우에 처리한다 … 431
157 포커스된 경우에 처리한다 … 433
158 포커스를 벗어난 경우에 처리한다 … 435
159 내용이 변경된 경우에 처리한다 … 437
160 전송하기 전에 처리한다 … 439
161 페이지 좌표를 얻는다 … 441
162 페이지가 로드된 경우에 처리한다 … 443
163 페이지나 이미지 읽기가 완료된 경우에 처리한다 … 445
164 페이지에서 이탈하는 경우에 처리한다 … 447
165 윈도우가 리사이즈된 경우에 처리한다 … 449
166 스크롤한 경우에 처리한다 … 451

Chapter 09·이벤트
167 애니메이션을 실행한다 … 454
168 애니메이션을 정지한다 … 456
169 애니메이션 효과 처리 간격을 지정한다 … 459
170 애니메이션 효과를 활성활지 비활성화할지 지정한다 … 461
171 대기 시간을 지정한다 … 463
172 요소의 표시 또는 비표시를 전환한다 … 465
173 요소를 애니메이션하면서 표시 또는 비표시로 한다 … 468
174 요소를 페이드 인/페이드 아웃시킨다 … 471
175 요소를 교대로 페이드시키면서 표시/비표시를 전환한다 … 476
176 요소를 슬라이드 업/슬라이드 다운시킨다 … 479
177 요소를 교대로 슬라이드 업/슬라이드 다운시킨다 … 482
178 큐의 취득/설정을 실행한다 … 485
179 큐에서 작업을 추가하여 실행한다 … 487
180 큐를 삭제한다 … 489

Chapter 10·비동기 통신
181 비동기 통신을 사용한다 … 492
182 비동기 통신시 옵션을 설정한다 … 495
183 비동기 옵션을 필터링한다 … 497
184 GET/POST 메소드로 통신한다 … 499
185 JSON 파일을 읽는다 … 501
186 JavaScript 파일을 읽는다 … 503
187 서버 파일을 읽고 표시한다 … 505
188 리퀘스트 전송시 처리한다 … 507
189 읽기 시작 시간과 종료 시간을 처리한다 … 509
190 읽기 성공시 처리한다 … 511
191 읽기 완료시 처리한다 … 514
192 읽기 에러시 처리한다 … 516
193 오브젝트를 시리얼라이즈한다 … 518
194 폼 데이터를 시리얼라이즈한다 … 520
195 jQuery Deferred로 비동기 처리가 완료되었을 때 처리한다 … 523
196 jQuery Deferred로 비동기 처리가 성공했을 때 처리한다 … 525
197 jQuery Deferred로 비동기 처리가 실패했을 때 처리한다 … 527

Chapter 11·비동기 처리
198 jQuery Deferred로 비동기 처리를 실행한다 … 530
199 ‘Deferred’ 오브젝트 상태를 확인한다 … 533
200 모든 비동기 처리가 완료된 후 처리한다 … 537
201 성공/실패와 관계없이 종료시 처리를 실행한다 … 539
202 성공시 처리를 실행한다 … 542
203 실패시 처리를 실행한다 … 545
204 성공시와 실패시 처리를 나눈다 … 548
205 notify로 통지하고 progress로 처리한다 … 551
206 notify로 컨텍스트를 전달한다 … 554

Chapter 12·유틸리티
207 브라우저 종류를 확인한다 … 558
208 지원 상태를 확인한다 … 561
209 오브젝트 종류를 확인한다 … 564
210 일반 오브젝트인지 확인한다 … 566
211 오브젝트가 열거형/빈 것인지 확인한다 … 568
212 ‘Window’ 오브젝트인지 확인한다 … 570
213 ‘this’가 가리키는 오브젝트를 지정한다 … 572
214 숫자인지 확인한다 … 576
215 함수이니지 확인한다 … 578
216 배열인지 확인한다 … 580
217 배열에 해당 요소가 있는지 확인한다 … 582
218 요소가 어느 요소의 노드에 포함되어 있는지 확인한다 … 584
219 지정된 노드가 XML 노드에 있는지 확인한다 … 586
220 배열로 변환한다 … 588
221 배열 요소를 처리하여 새로운 배열을 생성한다 … 590
222 두 개의 배열을 연결한다 … 592
223 배열 요소의 필터 처리를 한다 … 594
224 요소에 데이터를 저장한다 … 596
225 요소의 데이터를 삭제한다 … 598
226 문자열 좌우 공백이나 줄바꿈을 삭제한다 … 602
227 중복되지 않은 것을 구분한다 … 604
228 JSON 형식 데이터를 JavaScript 오브젝트로 변환한다 … 606
229 XML 문자열을 XML 오브젝트로 변환한다 … 608
230 jQuery 오브젝트에만 기능을 추가한다 … 610
231 글로벌 컨텍스트로 식을 평가한다 … 612
232 현재 시간을 얻는다 … 614
233 ‘ready’ 이벤트를 보류한다 … 616


Part-2 jQuery UI

Chapter 01·인터렉션(상호작용)
234 요소를 드래그할 수 있다 … 622
235 요소를 드롭할 수 있다 … 625
236 요소의 크기를 변경할 수 있다 … 627
237 목록을 선택할 수 있다 … 629
238 목록을 재배열（소트）할 수 있다 … 631

Chapter 02·위젯
239 아코디언 기능을 설정한다 … 634
240 아코디언 펼칠 때 애니메이션을 금지한다 … 637
241 아코디언 패널을 펼치지 못하게 한다 … 640
242 활성화된 패널 헤더 정보를 얻는다 … 642
243 패널 헤더 아이콘을 지정한다 … 645
244 자동 완성 기능을 설정한다 … 647
245 자동 완성 검색어에 이미지를 표시한다 … 649
246 자동 완성 검색어의 표시 위치를 지정한다 … 651
247 자동 완성 검색어가 표시되기까지의 시간을 설정한다 … 653
248 자동 완성 검색어가 표시되는 팝업에 포커스한다 … 655
249 일정 문자 수를 입력하면 자동 완성 검색어가 표시된다 … 657
250 자동 완성 기능을 삭제한다 … 660
251 그래픽 버튼을 설정한다 … 663
252 버튼을 무효 또는 유효화한다 … 665
253 버튼에 표시할 아이콘을 설정/변경한다 … 667
254 버튼에 표시하는 문자를 설정/변경한다 … 670
255 버튼 내 문자를 비표시로 한다 … 672
256 달력에서 선택한다 … 674
257 달력 대화상자에서 표시한다 … 676
258 달력에서 선택 가능한 날짜 범위를 지정한다 … 679
259 대화상자를 표시한다 … 682
260 대화상자 표시 위치를 지정한다 … 685
261 대화상자의 폭을 설정한다 … 687
262 대화상자를 드래그/크기 조절을 할 수 없게 된다 … 690
263 대화상자 생성시 자동으로 나타나지 않게 한다 … 692
264 대화상자가 닫혀있거나 열려있는지 확인한다 … 694
265 대화상자를 표시할 때 처리한다 … 697
266 대화상자를 드래그할 때 처리한다 … 699
267 대화상자의 크기가 조절된 경우에 처리한다 … 702
268 프로그래스 바를 표시한다 … 705
269 프로그래스 바의 최댓값을 설정한다 … 707
270 프로그래스 바의 값을 읽거나 설정한다 … 709
271 프로그래스 바 값이 갱신 또는 완료된 경우에 처리한다 … 712
272 프로그래스 바를 무효/유효로 한다 … 715
273 프로그래스 바를 삭제한다 … 718
274 슬라이더를 표시한다 … 721
275 범위 슬라이더를 표시한다 … 724
276 세로형 슬라이더를 표시한다 … 727
277 슬라이더의 1회 이동량（스텝）을 설정한다 … 729
278 슬라이더를 작동/중지한다 … 731
279 스피너를 설정한다 … 733
280 스피너 최솟값과 최댓값을 설정한다 … 735
281 스피너 증감 값을 설정한다 … 737
282 스피너 생성시 처리한다 … 739
283 스피너 이벤트를 처리한다 … 741
284 스피너를 삭제한다 … 744
285 탭 기능을 설정한다 … 747
286 표시하고 싶은 탭을 지정한다 … 750
287 탭을 무효/유효로 한다 … 753
288 탭을 삭제한다 … 757
289 툴 팁 기능을 설정한다 … 760
290 툴 팁 표시 위치를 지정한다 … 762
291 툴 팁 내용을 변경한다 … 764
292 프로그램에서 툴 팁 표시 제어를 실행한다 … 766
293 선택 메뉴를 표시한다 … 769
294 메뉴 항목에 커스텀 아이콘을 표시한다 … 771
295 선택 메뉴를 유효/무효로 한다 … 774
296 선택 항목이 달라진 경우에 처리한다 … 777
297 선택 메뉴 UI를 삭제한다 … 780

Chapter 03·이펙트(효과)
298 블라인드（blind） 효과를 실행한다 … 784
299 바운스（bounce） 효과를 실행한다 … 787
300 클립（clip） 효과를 실행한다 … 790
301 드롭（drop） 효과를 실행한다 … 793
302 분할（explode） 효과를 실행한다 … 796
303 페이드인/페이드아웃（fade）을 실행한다 … 799
304 접기（fold） 효과를 실행한다 … 802
305 하이라이트（highlight） 효과를 실행한다 … 805
306 버프（puff） 효과를 실행한다 … 808
307 펄스/점멸（pulsate） 효과를 실행한다 … 811
308 스케일（scale） 효과를 실행한다 … 814
309 셰이크（shake） 효과를 실행한다 … 817
310 크기 변경（size） 효과를 실행한다 … 820
311 슬라이드（slide） 효과를 실행한다 … 823
312 이동（transfer） 효과를 실행한다 … 826
313 효과를 사용한다 … 829
314 효과를 사용하여 표시한다 … 832
315 효과를 사용하여 숨긴다 … 835
316 효과와 함께 CSS 클래스를 추가한다 … 838
317 효과와 함께 CSS 클래스를 삭제한다 … 842
318 효과와 함께 CSS 클래스를 전환한다 … 846
319 CSS 클래스를 효과와 함께 교대로 전환한다 … 850
320 효과 처리를 교대로 전환한다 … 854


Part-3 jQuery Mobile

Chapter 01·페이지 구성
321 한 페이지를 구성한다 … 860
322 여러 페이지를 구성한다 … 863
323 헤더/바닥글을 고정한다 … 865
324 공통 바닥글을 사용한다 … 868
325 전체 화면（풀스크린）모드로 한다 … 871
326 특정 테마를 표시한다 … 874
327 헤더에 되돌아가기 버튼을 붙이고 되돌아가기 버튼의 텍스트를 변경한다 … 876
328 헤더에 버튼을 추가한다 … 879
329 바닥글에 버튼을 추가한다 … 883
330 네비게이션 바를 표시한다 … 885

Chapter 02·다이얼로그
331 다이얼로그를 표시한다 … 888
332 다이얼로그를 표시할 때 애니메이션을 지정한다 … 891
333 다이얼로그 닫기 버튼의 문자를 설정한다 … 894
334 다이얼로그를 스크립트로 닫는다 … 896

Chapter 03·페이지 링크
335 다른 페이지에 링크한다 … 900
336 페이지 이동 시 애니메이션 방법과 이동 방향을 지정한다 … 904
337 스크립트로 페이지를 이동시킨다 … 907
338 현재 페이지를 참조한다 … 911
339 페이지 내용을 미리 읽거나 캐시한다 … 914
340 스크립트로 페이지 데이터를 캐시한다 … 918
341 스크립트 페이지를 스크롤한다 … 920

Chapter 04·리스트/배치/패널

342 리스트를 표시한다 … 924
343 계층 리스트로 표시한다 … 926
344 리스트를 둥근 외곽선으로 한다 … 928
345 리스트를 분할하여 표시한다 … 930
346 분할 리스트의 아이콘을 지정한다 … 933
347 분할 리스트의 테마를 설정한다 … 935
348 설명이 첨부된 리스트로 표시한다 … 937
349 설명과 보조 설명이 있는 리스트로 표시한다 … 939
350 리스트 항목의 단락（디바이더）를 설정한다 … 941
351 리스트 항목에 카운터를 표시한다 … 943
352 이미지가 있는 리스트로 표시한다 … 945
353 리스트 항목을 검색할 수 있게 한다 … 948
354 단 배치로 표시한다 … 951
355 개폐 패널을 표시한다 … 953
356 아코디언 패널을 표시한다 … 956

Chapter 05·폼
357 텍스트 필드를 표시한다 … 960
358 검색 박스를 표시한다 … 962
359 전자 우편 전용 필드를 표시한다 … 964
360 전화번호 입력용 필드를 표시한다 … 966
361 URL 입력용 필드를 표시한다 … 968
362 슬라이더를 표시한다 … 970
363 범위 슬라이더를 표시한다 … 972
364 범위 슬라이더의 하이라이트나 라벨을 지운다 … 974
365 토글 스위치를 표시한다 … 976
366 라디오 버튼을 표시한다 … 978
367 체크 박스를 표시한다 … 980
368 선택 메뉴를 표시한다 … 983
369 전송/리셋 버튼을 문자 크기에 맞게 표시한다 … 987
370 아이콘과 아이콘 표시 위치를 지정한다 … 989

Chapter 06·설정/이벤트/테이블/지도
371 디폴트 설정을 변경한다 … 994
372 jQuery Mobile 전용 이벤트를 처리한다 … 999
373 리스폰시브에 대한 테이블（표）을 표시한다 … 1002
374 사용자가 테이블에서 표시하는 열을 선택할 수 있게 한다 … 1005
375 페이지 전체에 지도를 표시한다 … 1009


APPENDIX

376 jQuery 플러그인 작성 … 1014
377 jQuery 2.0.3의 코드 맵 … 1038
378 jQuery 메소드, 속성 버전 일람 … 1044