jQuery 1.7 : 작고 강력한 자바스크립트 라이브러리
117
-
date post
22-Jul-2016 -
Category
Documents
-
view
321 -
download
6
description
조나단 채퍼, 칼 스웨드버그 지음 | 장현순 옮김 | 오픈소스 & 웹 시리즈 _ 039 | ISBN: 9788992939034 | 25,000원 | 2012년 07월 20일 발행 | 472쪽
Transcript of jQuery 1.7 : 작고 강력한 자바스크립트 라이브러리
-
jQuery 1.7
-
iv
01 jQuery 1
jQuery ...............................................................................................1
jQuery, .................................................................................................3
jQuery .....................................................................................5
jQuery ..........................................................................................5
HTML jQuery .......................................................6
jQuery .........................................................................................9
................................................................10
.......................................................10
....................................................................10
............................................................................................12
vs. jQuery ...........................................................................12
..............................................................................................................13
.................................................................................................14
......................................................................................................................17
02 19
DOM ....................................................................................................................19
$() ................................................................................................................21
-
vCSS ..........................................................................................................22
.................................................24
................................................................................................26
...............................................................................26
.............................................................................................28
..................................................................29
....................................................................................................33
DOM ..............................................................................................34
..........................................................................35
.............................................................................................................38
DOM ..........................................................................................39
......................................................................................................................40
...........................................................................................40
.............................................................................................................41
03 43
...................................................................43
...........................................................................................43
.....................................................45
...............................................................................46
.ready() ...........................................................47
-
vi
.........................................................................................................48
...............................................................................48
...............................................................................51
...........................................................................52
.......................................................................................55
........................................................................................57
.........................................................................................................58
.......................................................................59
.............................................................61
......................................................................................................63
...........................................................................65
: .....................................................................65
................................................................................................67
...................................................................................67
....................................................................................................68
................................................................................................69
......................................................................72
.....................................................................................73
................................................................................74
...........................................................................75
................................................................................78
............................................................................................79
......................................................................................................................82
...........................................................................................83
.............................................................................................................83
-
vii
04 85
CSS .................................................................................................85
.................................................................................90
.........................................................................................................93
............................................................................................93
............................................................................94
..................................................................95
....................................................................................................96
........................................................................97
.......................................................................................99
.............................................100
CSS ...................................................102
.......................................................................................103
............................................................104
...............................................................105
.................................................106
...................................................108
.........................................................................110
...................................................................................................112
....................................................................................................................113
.........................................................................................113
...........................................................................................................113
-
viii
05 DOM 115
....................................................................................................115
class .....................................................................................116
..................................................................117
DOM ...............................................................................119
DOM ............................................................................................121
$() ...................................................................................121
.............................................................................121
.............................................................................122
..................................................................................................124
..............................................................................................126
...............................................................128
....................................................................................................132
..................................................................................133
..............................................................136
.....................................................................................138
DOM ...........................................................................139
....................................................................................................................140
.........................................................................................140
...........................................................................................................141
06 Ajax 143
..............................................................................144
HTML ......................................................................................145
.............................................................148
JSON ..........................................................148
jQuery .....................................................150
-
ix
......................................................154
XML ........................................................................155
.......................................................................................159
...................................................................................160
GET .................................................................................160
POST ...............................................................................164
.................................................................................165
Ajax ...................................................168
..........................................................................170
...........................................................................................................173
Ajax ...................................................................................................174
....................................................................................................175
JSONP ....................................................................177
...........................................................................................................179
Ajax ........................................................................179
.................................................................................180
HTML ............................................................181
....................................................................................................................184
.........................................................................................184
...........................................................................................................185
07 187
...................................................................................187
................................................................................................188
Cycle ...................................................188
.............................................................................189
........................................................191
.............................................................................................191
-
x .............................................................................192
.....................................................192
.....................................................193
jQuery UI .....................................................................195
...........................................................................................................195
.........................................................195
......................................................196
............................................................197
..................................................................198
..................................................................................199
...........................................................................................................201
jQuery UI ................................................................................204
....................................................................................................................205
...........................................................................................................205
08 207
$ ................................................................................207
...............................................................................................208
.................................................................................211
jQuery .................................................................................214
.............................................................................215
..............................................................................................216
..............................................................................................217
................................................................................................218
..............................................................................................219
.....................................................................................220
..................................................................................................221
...........................................................223
-
xi
jQuery UI ....................................................................................224
..............................................................................................225
..........................................................................................227
.....................................................................228
.............................................................................229
.............................................................................230
.........................................................................231
..................................................................232
..................................................................................233
....................................................................................................................234
...........................................................................................................235
09 237
......................................................................................237
.................................................................................239
.....................................................................................241
.............................................................................243
....................................................................244
...................................................................245
................................................245
..............................................................................................247
........................................................248
........................................................249
DOM ...........................................................................251
jQuery .............................................................................251
DOM ......................................................................................253
DOM .................................................254
DOM ......................................................................................256
..............................................256
-
xii
..............................................257
....................................................................................................................258
.........................................................................................258
...........................................................................................................259
10 261
...............................................................................................261
................................................................263
...........................................................264
.......................................................................................................266
jQuery ................................................................267
.............................................................................268
..................................................................................................269
.........................................................................270
..........................................................................................270
..........................................................................................272
................................................................273
......................................................................................275
............................................................276
.......................................................................................................277
...............................................................279
....................................................................................................................280
.........................................................................................280
...........................................................................................................281
-
xiii
11 283
.......................................................................................283
..................................................................286
.....................................................................286
............................................................287
........................................288
...........................................................................................288
.................................................................................288
....................................289
.............................................................................290
...........................................................................................293
...........................................................................................................294
.........................................................................295
....................................................................................................................298
.........................................................................................298
...........................................................................................................299
12 DOM 301
...............................................................................................301
..........................................................................................301
Ajax ..................................................................................................302
..................................................................................303
..........................................................................304
................................................................304
........................................................305
DOM ......................................................................................306
-
xiv
DOM ..............................................................308
........................................................................309
....................................................................310
.....................................................................................313
HTML5 ..........................................................315
JSON .....................................................317
JSON ...............................................................................319
............................................................321
...............................................................................................323
.................................................................................323
DOM ......................................................................................324
CSS ......................................................325
....................................................................................................................327
.........................................................................................327
...........................................................................................................327
13 Ajax 329
Ajax ......................................................................329
JSONP .........................................................................332
Ajax ..................................................................................................335
jqXHR .......................................................................................................337
Ajax .........................................................................................337
..........................................................................................339
Ajax ...........................................................................................341
Ajax ..................................................................................................342
.................................................................................342
Ajax ..........................................................................................347
......................................................................................348
-
xv
....................................................................................................................352
.........................................................................................352
...........................................................................................................353
A 355
...........................................................................................................356
..........................................................................................357
..................................................................................................359
...................................................................................361
jQuery .......................................................................................362
$(document).ready() ................................................362
..........................................................................................363
.................................................................365
..............................................................................367
...............................................................................................368
.................................................................................369
...................................................370
..................................................................371
....................................................................................................................373
B QUnit 375
QUnit ................................................................................................375
....................................................................................................376
................................................................................................377
...........................................................................378
..........................................................................................381
-
xvi
...........................................................................................382
................................................................................................382
.........................................................................................383
....................................................................................................................385
C 387
....................................................................................................387
CSS ...............................................................................................387
........................................................................388
....................................................................388
...........................................................................................................388
...............................................................................................................389
....................................................................389
DOM ........................................................................................390
.......................................................................................................390
...........................................................................................................390
...........................................................................................................390
...........................................................................................................391
..........................................................................................391
....................................................................392
....................................................................................................392
..............................................................................................392
.....................................................................................393
..................................................................................................394
..............................................................................................394
.....................................................................................394
...................................................................................................395
-
xvii
.......................................................................................................395
........................................................................................395
.........................................................................395
.....................................................................................................396
DOM ............................................................................................396
......................................................................................396
.......................................................................................................397
CSS ............................................................................................................397
...........................................................................................................397
...........................................................................................................398
...........................................................................................................398
...........................................................................................................399
...........................................................................................................399
.......................................................................................................399
Ajax .......................................................................................................399
..............................................................................................399
..........................................................................................400
..........................................................................................................400
...................................................................................................400
...........................................................................................................401
..................................................................................................401
.....................................................................................401
.................................................................................401
.......................................................................................402
jQuery .........................................................................402
..............................................................................................402
introspection ..................................................................................402
...........................................................................................................403
-
xviii
D jQuery 1.7 405
API : .on() .o() .........................................................405
....................................................................406
6/7/8 HTML5 ..................407
............................................................407
............................................................................407
..........................................................................................408
jQuery.isNumeric() ...........................................................408
event.layerX event.layerY ..........................................408
jQuery.event.proxy() .....................................................................408
jQuery 1.7 API ...................................................................409
: ...............................................................................409
: ................................................................................414
: ............................................................................420
: ....................................................................................421
: ................................................................................423
: ..............................................................423
: ........................................................................................426
: ....................................................................................426
: ...........................................................................427
......................................................................................428
.........................................................................................428
-
xix
jQuery
alert
. jQuery
jQuery
.
. jQuery
.
jQuery jQuery jquery.com
. jQuery jQuery
. jQuery , , DOM, AJAX jQuery
.
.
jQuery
(github)
.
.
.
-
-
xx
jQuery
. jQuery , jQuery
.
.
.
, . jQuery
, ,
. ,
.
,
jQuery .
jQuery jQuery .
.
jQuery .
jQuery
.
, jQuery
. jQuery
-
xxi
. ,
.
.
jQuery , jQuery
.
jQuery .
. , , jQuery
.
jQuery .
.
.
. jQuery .
jQuery
,
. jQuery , ,
.
-
xxii
jQuery
. ,
. jQuery
.
jQuery
' .
.
, jQuery .
.
- , jQuery
-
xxiii
Jonathan Chaffer
Rapid Development Group ,
PHP, MySQL
. , jQuery
.
jQuery (Drupal CMS)
.
(ContentConstruction Kit)
, API .
.
.
(Ars Technica Community) .
.
-
xxiv
Karl Swedberg
Fusionary Media
. jQuery jQuery API
api.jquery.com . , learningjquery.com
.
.
.
(John Resig)
,
. , Packt , jQuery
(Cabal)
.
-
xxv
(Kaiser Ahmed)
. Khulna (KUET) .
CyberXpress.Net .
. LAMP
PHP, MySql, Apache, Linux , CSS HTML/XHTML
.
, .
(Kevin Boudloche)
. 3 , 8 .
.
(Carlos Estebes)
Ehxioz(http://ehxioz.com/) . LA
10 .
-
xxvi
2005. (John Resig) (Dean Edwards)
(Simon Willison)
. 2006 1, DOM
. DOM (query)
, jQuery . , jQuery
.
jQuery
.
jQuery
. , ,
. , jQuery ,
.
jQuery
. Ajax, ,
jQuery
jQuery .
-
xxvii
1 jQuery . jQuery
jQuery jQuery
. jQuery ,
.
2 jQuery DOM
. jQuery
. CSS jQuery .
3 . jQuery
jQuery .
. , (event
bubbling), (delegation), (namespace) .
4 . jQuery
, , .
5 DOM . , HTML
.
6 Ajax jQuery
. .
jQuery
.
7 , jQuery UI
.
8 jQuery
. , jQuery ,
jQuery UI . jQuery
.
-
xxviii
9 , DOM ,
.
10 (delegation)
(throttling) . , jQuery
.
11 (easing)
jQuery
.
.
12 DOM DOM
. , jQuery CSS
.
13 Ajax jQuery
Ajax .
A .
.
B QUnit
QUnit .
.
C jQuery
. ,
.
D jQuery 1.7 API
.
-
xxix
, , ,
.
.
(Firebug) (1 )
jQuery (
)
, 6 Ajax PHP
.
. HTML
CSS , . jQuery
.
jQuery 1.7.2( )
.
jQuery
jQuery 1.7.2 . jQuery
.
jQuery .
-
xxx
: 2005 8, (John Resig) Prototype Behavior
. 2006 1 14 jQuery
.
jQuery 1.0 (2006 8): . CSS
AJAX .
jQuery 1.1 (2007 1): API .
.
jQuery 1.1.3 (2007 7): .
Prototype, Mootools, Dojo .
jQuery 1.2 (2007 9): CSS XPath .
(namespaced events)
.
jQuery UI (2007 9): Interface
.
jQuery 1.2.6 (2008 5): (Brandon Aaron) Dimensions
.
jQuery 1.3 (2009 1): (Sizzle) jQuery
. (event delegation) .
jQuery 1.4 (2010 1) 1.0 . DOM
jQuery
. , http://jquery14.com/ 14 1.4 .
jQuer y 1.4 .2 (2010 2) .delegate()
undelegate() .
.
jQuery Mobile (2010 8) jQuery jQuery
Project , , UI http://
jquerymobile.com/ .
-
xxxi
jQuery 1.5 (2011 1) Ajax
. , (promise) .
jQuery 1.6 (2011 5) HTML DOM
. jQuery 1.5 .always() .pipe()
.
jQuery 1.7 (2011 11) Delegated .
. .on() .o() .
jQuery http://jquery.org/history .
.
.
. , console.log()
.
.
$('button.show-details').click(function() { $('div.details').show();});
.
$('#switcher-narrow').bind('click', function() { $('body').removeClass().addClass('narrow');});
-
xxxii
.
: jQuery
.
.
.
. ,
. .
.
www.wikibook.co.kr/ wikibook@
wikibook.co.kr .
www.wikibook.co.kr/
.
.
-
xxxiii
http://www.wikibook.co.kr/ .
, .
.
, .
[email protected] http://www.wikibook.co.kr/
. .
.
.
.
.
.
.
-
xxxiv
Lear
ning
jQ
uery
1.7
-
1
.
jQuery
. jQuery
.
jQuery .
jQuery jQuery HTML
(CSS, Cascading Style Sheets) . jQuery
HTML CSS
. 1 3 jQuery
. jQuery
. 1 .
, jQuery .
jQuery jQuery (abstraction
layer) . jQuery
. jQuery
.
01jQuery
-
2 l jQuery 1.7
.
(DOM, Document Ojbect Model) HTML
. jQuery
(selector)
.
$('div.content').find('p');
. CSS
. jQuery
. , jQuery
.
$('ul > li:first').addClass('active');
. jQuery
.
. HTML ,
API(Application Programming Interface) .
$('#container').append('more');
.
. jQuery
HTML
HTML . API
.
$('button.show-details').click(function() { $('div.details').show();});
.
. jQuery (fade)1,
1 ( ) (, Fade-in), (, Fade-out) .
.
-
1 jQuery l 3
(wipe)2
.
$('div.details').slideDown();
. Ajax(Asynchronous JavaScript
and XML) XML
,
. jQuery
Ajax
.
$('div.details').load('more.html #content');
. jQuery
.
$.each(obj, function(key, value) { total += value;});
http://www.wikibook.co.kr/
.
jQuery, HTML .
2 () .
-
4 l jQuery 1.7
. jQuery
.
CSS . jQuery CSS
.
CSS
jQuery .
. jQuery (feature creep)3
. ,
. jQuery
.
.
.
.
, jQuery
.
. jQuery collapsible
.
. .hide()
. (implicit
iteration) .
.
jQuery (chaining) . ,
.
3 () (feature) (creep) .
,
.
.
-
1 jQuery l 5
jQuery ( 30KB )
.
jQuery
. jQuery
.
http://api.
jquery.com .
. MIT (jQuery
) GNU (GNU
jQuery )
.
jQuery jQuery . jQuery
. jQuery .
jQuery
. jQuery jQuery
HTML .4
. jQuery
HTML jQuery .
Script.aculo.us, Dojo, MooTools AJAX
.
jQuery (http://jquery.com/) jQuery
4 () Google Libraries API. http://code.google.com/intl/de-DE/apis/libraries/
. API Prototype, jQuery, Script.
aculo.us, Dojo, MooTools AJAX .
-
6 l jQuery 1.7
. jQuery
.
.
jQuery (CDN, Content Delivery
Networks) jQuery . , (http://code.google.
com/apis/ajaxlibs/documentation/) (http://www.asp.net/ajax/cdn)
jQuery
. CDN jQuery
, jQuery .
.
HTML jQuery
jQuery HTML , CSS
.
CSS .
jQuery
jquery.js .
-
1 jQuery l 7
. ( , .) . " ," . YKCOWREBBAJ sevot yhtils eht dna ,gillirb sawT' ;ebaw eht ni elbmig dna eryg diD ,sevogorob eht erew ysmim llA .ebargtuo shtar emom eht dnA , . " . , ." . JABBERWOCKY 'Twas brillig, and the slithy toves Did gyre and gimble in the wabe; All mimsy were the borogoves, And the mome raths outgrabe.
.
. (/images/foo.png) (../
images/foo.png) . .
-
8 l jQuery 1.7
HTML (01.css) .
.
body { background-color: #fff; color: #000; font-family: Helvetica, Arial, sans-serif;}h1, h2, h3 { margin-bottom: .2em;}.poem { margin: 0 2em;}.highlight { background-color: #ccc; border: 1px solid #888; font-style: italic; margin: 0.5em 0; padding: 0.5em;}
. ,
jQuery (jquery.js) . jQuery
jQuery .
HTML CSS .
http://book.learningjquery.com (
http://www.wikibook.co.kr ).
.
-
1 jQuery l 9
jQuery .
jQuery .
jQuery CSS .
jQuery
01.js HTML . 3 .
$(document).ready(function() { $('div.poem-stanza').addClass('highlight');});
-
10 l jQuery 1.7
jQuery $() .
CSS .
poem-stanza .
. 2,
.
$() jQuery
. jQuery DOM
DOM .
.
addClass .addClass() CSS
. .
.removeClass()
. ()
highlight .
.
jQuery .addClass()
.
$() .addClass() .
HTML .
HTML . DOM
.
jQuery $(document).ready()
DOM . jQuery
-
1 jQuery l 11
$(document).ready() .
DOM ready DOM ready
window.onload .
$(document).ready() .
ready $(document).ready()
.
.
DOM DOM
DOM ready .
.ready()
.
; _ 1.1
function addHighlightClass() { $('div.poem-stanza').addClass('highlight');}
$(document).ready(addHighlightClass);
1.2
(anonymous function, (lambda function) ) .
; _ 1.2
$(document).ready(function() { $('div.poem-stanza').addClass('highlight');});
jQuery
. (closure)
.
. A, .
-
12 l jQuery 1.7
.
01.css highlight
.
vs. jQuery jQuery .
highlighted .
; _ 1.3
window.onload = function() { var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) { divs[i].className += ' highlight'; } }
-
1 jQuery l 13
function hasClass( elem, cls ) { var reClass = new RegExp(' ' + cls + ' '); return reClass.test(' ' + elem.className + ' '); }};
1.2 jQuery
.
window.onload
DOM
DOM
jQuery
.
jQuery
.
. jQuery
.
.
. .
http://msdn.microsoft.com/en-us/library/dd565628.aspx
http://developer.apple.com/technologies/safari/developer-tools.html
http://code.google.com/chrome/devtools/
-
14 l jQuery 1.7
http://getfirebug.com/
.
DOM .
CSS CSS .
.
.
.
.
.
(Firebug)
(http://getfirebug.com/) .
.
. (FireQuery)
.
http://firequery.binaryage.com/.
.
HTML
CSS .
-
1 jQuery l 15
CSS .
.
.
.
-
16 l jQuery 1.7
jQuery .
.
1.2 jQuery
. jQuery . jQuery
.poem-stanza jQuery .
jQuery .
console.log()
.
; _ 1.4
$(document).ready(function() { console.log('hello'); console.log(52); console.log($('div.poem-stanza'));});
console.log .
jQuery
.
-
1 jQuery l 17
console.log() alert() .
jQuery .
jQuery jQuery
. , jQuery .
1 jQuery . $()
.addClass()
$(document).ready() . ,
jQuery .
jQuery
. 2 jQuery
.
-
18
Lear
ning
jQ
uery
1.7
-
19
jQuery (DOM, Document Object Model)
(CSS) . 2
jQuery
HTML jQuery DOM
(DOM traversal methods) .
DOMjQuery DOM . DOM
. DOM HTML
.
.
, .
.
the title This is a paragraph. This is another paragraph. This is yet another paragraph.
02
-
20 l jQuery 1.7
. ,
. , .
. (
), . .
DOM .
jQuery
. jQuery .
jQuery .
jQuery .
. jQuery DOM
DOM
. 2 jQuery DOM
.
-
2 l 21
$() jQuery $() . $()
CSS
jQuery .
$() jQuery
.
jQuery
jQuery ($) jQuery . $()
.
jQuery jQuery
$ jQuery .
10, .
, ID .
.
.
CSS jQuery
p{ } $('p') HTML (p ) .
ID #some-id{ } $('#some-id') id some-id .
.some-class{ } $('.some-class') some-class .
1, jQuery $()
. $()
for .
-
22 l jQuery 1.7
. .
CSS jQuery http://www.w3.org/Style/CSS/specs
CSS 1 3 .
( 6)
.
jQuery
(Progressive Enhancement)1
(Graceful Degradation)2 .
.
1 ( )
. CSS . CSS
CSS .
(progressive enhancement) .
2 ( ) .
.
. (graceful degradation)
.
jQuery CSS
.
As You Like It All's Well That Ends Well A Midsummer Night's Dream Twelfth Night
-
2 l 23
Hamlet Macbeth Romeo and Juliet Henry IV (email) Part I Part II Henry V Richard II
ID selected-plays
. .
(bullet) .
-
24 l jQuery 1.7
horizontal
.
.horizontal { float: left; list-style: none; margin: 10px;}
horizontal
10 .
jQuery horizontal HTML
, , .
.
; _ 2.1
$(document).ready(function() { $('#selected-plays > li').addClass('horizontal');});
1 $(document).ready() jQuery
DOM . jQuery DOM
(wrapper) $(document).ready() .
horizontal (>)
. $() ID selected-plays (#selected-plays)
(>) (li) .
. .
-
2 l 25
.
horizontal horizontal
, (negation pseudo-class) .
.
; _ 2.2
$(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level');});
.
ID selected-plays (#selected-plays)
horizontal (:not(.horizontal)).
sub-level
. .
-
26 l jQuery 1.7
(Attribute selector) CSS .
title alt HTML .
alt .
$('img[alt]')
(regular expression) .
(^) ($)
(*) (!) .
.
a { color: #00c;}a.mailto { background: url(images/mail.png) no-repeat right top; padding-right: 18px;}a.pdflink { background: url(images/pdf.png) no-repeat right top; padding-right: 18px;}a.henrylink { background-color: #fff; padding: 2px; border: 1px solid #000;}
jQuery (mailto, pdflink, henrylink)
.
href ([href]) mailto: (^="mailto:")
(a) . .
-
2 l 27
; _ 2.3
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto');});
mailto:
. .
PDF (^) ($) .
($) href .pdf .
; _ 2.4
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto'); $('a[href$=".pdf"]').addClass('pdflink');});
pdflink PDF
(Adobe Acrobat) . pdflink .
. , http henry href
henrylink .
-
28 l jQuery 1.7
; _ 2.5
$(document).ready(function() { $('a[href^="mailto:"]').addClass('mailto'); $('a[href$=".pdf"]').addClass('pdflink');\ $('a[href^="http"][href*="henry"]') .addClass('henrylink');});
.
Hamlet PDF , email
Henry V .
CSS jQuery (Custom) .
CSS
.
jQuery DOM .
.
.
-
2 l 29
.
CSS
. CSS (pseudo-class)
(:) . , horizontal
.
$('div.horizontal:eq(1)')
:eq(1) .
0 . , 0 . CSS 1
$('div:nth-child(1)') CSS div
(, $('div:first-child') ).
jQuery :odd :even .
:odd :even .
As You Like It All's Well that Ends Well 1601 Hamlet 1604 Macbeth 1606
-
30 l jQuery 1.7
Romeo and Juliet 1595 Henry IV, Part I 1596 Henry V 1599
The Fair Youth 1126 The Dark Lady 127152 The Rival Poet 7886
.
.
-
2 l 31
alt .
tr { background-color: #fff;}.alt { background-color: #ccc;}
, ( ) alt jQuery
.
; _ 2.6
$(document).ready(function() { $('tr:even').addClass('alt');});
! .even ? :eq()
:even() :odd() 0 .
0() , 1() .
.
. .
. :nth-child()
-
32 l jQuery 1.7
. :nth-child()
.
odd even .
; _ 2.7
$(document).ready(function() { $('tr:nth-child(odd)').addClass('alt');});
:nth-child() 1 jQuery .
even odd
.
.
Henry
.
(.highlight {font-weight:bold; font-style: italics;}) :contains()
jQuery .
; _ 2.8
$(document).ready(function() { $('tr:nth-child(even)').addClass('alt'); $('td:contains(Henry)').addClass('highlight');});
-
2 l 33
Henry .
:contains() .
H $('td:contains(henry)') .
jQuery
. HTML
jQuery(CSS )
.
.
jQuery CSS
. .
:input (input), (textarea), (select), (button)
:button type button (input)
:enabled
:disabled
:checked (radio button) (checkbox)
:selected
-
34 l jQuery 1.7
.
$('input[type="radio"]:checked') ( )
$('input[type="password"], input[type="text"]:disabled')
.
CSS .
.
9, .
DOM jQuery DOM
.
(, DOM
).
. jQuery DOM .
DOM .
. alt
$('tr:even').addClass('alt'); .filter()
.
$('tr').filter(':even').addClass('alt');
. .filter()
.
.
jQuery .
lter .
filter .
-
2 l 35
; _ 2.9
$('a').filter(function() { return this.hostname && this.hostname != location.hostname;}).addClass('external');
.
1. href (this.hostname) . mailto
.
2. (this.hostname) (location.hostname)
(!=) .
, .filter()
. (false)
(true) .
.
Henry highlight . Henry
next() .
; _ 2.10
$(document).ready(function() { $('td:contains(Henry)').next().addClass('highlight');});
-
36 l jQuery 1.7
.
.next() . Henry
nextAll() .
; _ 2.11
$(document).ready(function() { $('td:contains(Henry)').nextAll().addClass('highlight');});
Henry
.
-
2 l 37
.prev() .prevAll() .next() .nextAll . .siblings()
DOM .
(Henry ) .andSelf()
.
; _ 2.12
$(document).ready(function() { $('td:contains(Henry)').nextAll().andSelf() .addClass('highlight');});
.andSelf() hightlight .
.
. Henry
.
; 2.13
$(document).ready(function() { $('td:contains(Henry)').parent().children() .addClass('highlight');});
-
38 l jQuery 1.7
.parent() DOM
.children() .
jQuery . jQuery
.
jQuery ,
.
. jQuery
jQuery jQuery
.
. , 2.14
2.15 .
; _ 2.14
$('td:contains(Henry)').parent().find('td:eq(1)') .addClass('highlight').end().find('td:eq(2)') .addClass('highlight');
; _ 2.15
$('td:contains(Henry)') // "Henry" . .parent() // . .find('td:eq(1)') // . .addClass('highlight') // "highlight" . .end() // "Henry" . .find('td:eq(2)') // .addClass('highlight'); // "highlight" .
-
2 l 39
DOM .
. .
. ,
.
.
DOM jQuery jQuery .
jQuery .
jQuery DOM .
,
DOM .
jQuery .get() . jQuery
DOM .get(0) DOM
.get(index) . my-element
.
var myTag = $('#my-element').get(0).tagName;
jQuery .get()
. $('#my-element').get(0) , $('#my-element')[0]
.
var myTag = $('#my-element')[0].tagName;
jQuery DOM
. ( 0) jQuery DOM
.
-
40 l jQuery 1.7
2
. , CSS , ,
jQuery :odd
:even CSS :nth-child()
jQuery .
$(document).ready() . 3
.
9 . jQuery
C jQuery , jQuery http://
api.jquery.com/ .
-
2 l 41
index.html complete.js
. (wikibook.co.kr) Packt
http://www.packtpub.com/support .
jQuery http://api.jquery.com/ .
1. special .
2. year .
3. Tragedy() (row) special
.
4. : () .
afterlink .
5. : .pdf tragedy .
-
42
Lear
ning
jQ
uery
1.7
-
43
. , ,
jQuery .
jQuery
.
jQuery $(document).
ready() . .
1, $(document).ready() jQuery
. $(document).ready()
. window.onload .
,
. .
window.onload
. . ,
.
03
-
44 l jQuery 1.7
, $(document).ready() DOM
. $(document).ready()
.
. HTML DOM ( )
.
.
. jQuery
, ,
. onload jQuery
.
jQuery
. $(document).ready()
.
?
onload $(document).ready()
.
.
onload ( jQuery .load()
) .
.
-
3 l 45
HTML ,
DOM .
, .
function doStuff() { // ...}
HTML
.
window.onload = doStuff;
.
HTML .
vs.
.
.
.
. .
-
46 l jQuery 1.7
function doOtherStuff() { // ...}
, doOtherStu() .
window.onload = doOtherStuff;
. .onload
.
$(document).ready() . .ready()
.
jQuery . onload
. $(document).ready()
, .
9 DOMContentLoaded W3C document.
addEventListener() .
jQuery .
$(document).ready() DOM document jQuery
.ready() .
$() . jQuery .ready()
. .
-
3 l 47
$(document).ready(function() { // });
.
$(function() { // });
. .
.ready()
.
$ ( ) $
.
jQuery $ jQuery.noConflict()
. jQuery.noConflict() .
jQuery.noConflict();
( , Prototype) , jQuery $
. .noConflict() $ ,
(Prototype) $ .
. jQuery $ jQuery
.
-
48 l jQuery 1.7
.ready() . jQuery
, $
.
jQuery(document).ready(function($) { // , $ !});
, .
jQuery(function($) { // $ });
.
window.onload
, (onclick) (onchange)
(onresize) . DOM
onload .
jQuery .
. ,
.
-
3 l 49
(progressive
enhancement) .
.
.
HTML .
Default Narrow Column Large Print
HTML CSS
. .
-
50 l jQuery 1.7
Large Print .
CSS .
body.large .chapter { font-size: 1.5em;}
large .
. 2,
.
$('body').addClass('large');
. .bind() . bind() DOM
. click
.
; _ 3.1
$(document).ready(function() { $('#switcher-large').bind('click', function() { $('body').addClass('large'); });});
.
-
3 l 51
. .ready()
. .bind()
.
, 3
.
Large Print . (Default Narrow
Column) . . .bind()
click .
.
; _ 3.2
$(document).ready(function() { $('#switcher-default').bind('click', function() { $('body').removeClass('narrow'); $('body').removeClass('large'); }); $('#switcher-narrow').bind('click', function() { $('body').addClass('narrow'); $('body').removeClass('large'); }); $('#switcher-large').bind('click', function() { $('body').removeClass('narrow'); $('body').addClass('large');
-
52 l jQuery 1.7
});});
narrow CSS .
body.narrow .chapter { width: 250px;}
Narrow Column Narrow Column CSS
.
Default (narrow large) ,
.
,
.
selected , selected
. selected (bold) .
-
3 l 53
.selected { font-weight: bold;}
ID
.
.
this DOM
. $() DOM
. $(this) DOM
jQuery , CSS
.
this .
$(this).addClass('selected');
.
jQuery
.
$('#switcher button').removeClass('selected');
selected .
Default .
.
-
54 l jQuery 1.7
; _ 3.3
$(document).ready(function() { $('#switcher-default') .addClass(selected) .bind('click', function() { $('body').removeClass('narrow'); $('body').removeClass('large'); $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); $('#switcher-narrow').bind('click', function() { $('body').addClass('narrow'); $('body').removeClass('large'); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); }); $('#switcher-large').bind('click', function() { $('body').removeClass('narrow'); $('body').addClass('large'); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); });});
.
.
3.4 .
; _ 3.4
$(document).ready(function() { $('#switcher-default') .addClass(selected) .bind('click', function() { $('body').removeClass('narrow').removeClass('large'); }); $('#switcher-narrow').bind('click', function() { $('body').addClass('narrow').removeClass('large'); }); $('#switcher-large').bind('click', function() { $('body').removeClass('narrow').addClass('large'); });
$('#switcher button').bind('click', function() { $('#switcher button').removeClass('selected'); $(this).addClass('selected'); });});
-
3 l 55
1 jQuery .
.bind() ,
(behavior queuing)
click ,
jQuery
.
(refactoring) .
.
.
.removeClass() .
. .
; _ 3.5
// $(document).ready(function() { $('#switcher-default') .addClass(selected) .bind('click', function() { $('body').removeClass(); }); $('#switcher-narrow').bind('click', function() { $('body').removeClass().addClass('narrow'); }); $('#switcher-large').bind('click', function() { $('body').removeClass().addClass('large'); });
$('#switcher button').bind('click', function() { $('#switcher button').removeClass('selected'); $(this).addClass('selected'); });});
. .removeClass() .addClass()
.
-
56 l jQuery 1.7
removeClass() .
HTML
,
.
.
.
; _ 3.6
$(document).ready(function() { $('#switcher-default').addClass('selected');
$('#switcher button').bind('click', function() { $('body').removeClass(); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); });
$('#switcher-narrow').bind('click', function() { $('body').addClass('narrow'); });
$('#switcher-large').bind('click', function() { $('body').addClass('large'); });});
. jQuery
.removeClass() .addClass()
. .bind()
. this
jQuery DOM DOM ID
. this
.
-
3 l 57
; _ 3.7
$(document).ready(function() { $('#switcher-default').addClass('selected');
$('#switcher button').bind('click', function() { var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(this).addClass('selected'); });});
bodyClass default, narrow, large
. default
. ,
.
.
click jQuery
. .bind()
.
, .bind() .click()
.
; _ 3.8
$(document).ready(function() { $('#switcher-default').addClass('selected');
$('#switcher button').click(function() { var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(this).addClass('selected'); });});
-
58 l jQuery 1.7
DOM .
blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload
.
jQuery DOM .
jQuery
. .ready(). .mouseenter(),
.mouseleave(), .focusin(), .focusout()
-
3 l 59
. jQuery .toggle() .hover()
(compound event handler)
,
.
.
(toggle) .
.
.
.hidden { display: none;}
,
hidden .
. jQuery .toggle()
.
jQuery .toggle() . toggle
toggle jQuery API(
http://api.jquery.com/toggle) .
.toggle() . . .toggle()
,
-
60 l jQuery 1.7
.
. .toggle() / .
; _ 3.9
$(document).ready(function() { $('#switcher h3').toggle(function() { $('#switcher button').addClass('hidden'); }, function() { $('#switcher button').removeClass('hidden'); });});
.
.
.
.
jQuery .
.toggleClass() .
-
3 l 61
; _ 3.10
$(document).ready(function() { $('#switcher h3').click(function() { $('#switcher button').toggleClass('hidden'); });});
.toggleClass() /
.
.toggle() .
click ,
. 1
.
.hover { cursor: pointer; background-color: #afa;}
CSS (pseudo-class) hover ,
, . 6
. 6
.
jQuery
. jQuery
hover() .
1 ( ) .
.
-
62 l jQuery 1.7
.toggle() .hover() .
.hover() ,
.
.
; _ 3.11
$(document).ready(function() { $('#switcher h3').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });});
. ,
.
.hover() (event propagation)
.
.
-
3 l 63
DOM
. .
. .
.
.
() , , .
.
.
(event capturing)
.
.
, , . .
-
64 l jQuery 1.7
.
.
(event bubbling) .
, ,
.
, .
. DOM
. DOM
. .
. jQuery
.
.
-
3 l 65
, mouseover mouseout
. mouseout
. mouseout
.
. mouseout
.
, mouseout .
.
.mouseenter .mouseleave .hover()
mouseover mouseout
.
mouseout .
.hover() ,
( ) (
) .
: . .hover()
.
/
.
.
-
66 l jQuery 1.7
; 3.12
// $(document).ready(function() { $('#switcher').click(function() { $('#switcher button').toggleClass('hidden'); });});
.
.
. ,
DOM
.
(event object) .
DOM . ,
, DOM
.
jQuery http://api.jquery.com/
category/events/event-object/ .
.
$(document).ready(function() { $('#switcher').click(function(event) { $('#switcher button').toggleClass('hidden'); });});
-
3 l 67
event
. .
event .
event.target .
DOM API , . jQuery
. .target DOM
(click ) .
DOM this
.
; 3.13
// $(document).ready(function() { $('#switcher').click(function(event) { if (event.target == this) { $('#switcher button').toggleClass('hidden'); } });});
.
.
.
.
.stopPropagation()
. .target
. jQuery
.
-
68 l jQuery 1.7
event.target == this
click .
; _ 3.14
$(document).ready(function() { $('#switcher').click(function(event) { $('#switcher button').toggleClass('hidden'); });});
$(document).ready(function() { $('#switcher-default').addClass('selected');
$('#switcher button').click(function(event) { var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(this).addClass('selected'); event.stopPropagation(); });});
click
. DOM event.stopPropagation()
. ,
.
.
click
. ,
(default action).
(event handler) .
submit
.
-
3 l 69
.stopPropagation() .
. .stopPropagation()
.preventDefault() .
.preventDefault()
. ,
.
. ,
.
false . .stopPropagation() .preventDefault()
.
.
(event delegation) .
.
click .
? . ,
click .
click . jQuery
,
.
click .
.
-
70 l jQuery 1.7
. 3.13
event.target .
; _ 3.15
$(document).ready(function() { $('#switcher').click(function(event) { if ($(event.target).is('button')) { var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(event.target).addClass('selected'); event.stopPropagation(); } });});
.is() . jQuery
(selector expression) .
.is() (true) . $(event.target).is('.button')
.
. this . event.target
.
.is() .hasClass()
.hasClass() . , .is()
.
. .stopPropagation()
.
.
-
3 l 71
.stopPropagation() .is()
.
,
.
; _ 3.16
$(document).ready(function() { $('#switcher').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });});
$(document).ready(function() { $('#switcher').click(function(event) { if (!$(event.target).is('button')) { $('#switcher button').toggleClass('hidden'); } });});
$(document).ready(function() { $('#switcher-default').addClass('selected');
$('#switcher').click(function(event) { if ($(event.target).is('button')) { var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(event.target).addClass('selected'); } });});
. , click .is()
if-else .
-
72 l jQuery 1.7
; _ 3.17
$(document).ready(function() { $('#switcher-default').addClass('selected');
$('#switcher').click(function(event) { if ($(event.target).is('button')) { var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(event.target).addClass('selected'); } else { $('#switcher button').toggleClass('hidden'); } });});
, .
, jQuery 3.16 3.16
.
DOM (5, DOM ) AJAX
(6, Ajax )
.
jQuery
. 10, (.live(), .die(), .delegate(),
.undelegate()) . .bind()
.live() . , click
.
-
3 l 73
$('#switcher button').live('click', function() { var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected'); $(this).addClass('selected');});
jQuery click document event.target( )
( '#switcher button') . jQuery
this .
. ,
document live() (document).ready()
.
.
.
(unbind)
.
,
. , Narrow Column Large Print
.
.unbind()
.
; 3.18
$(document).ready(function() { $('#switcher').click(function(event) { if (!$(event.target).is('.button')) { $('#switcher button').toggleClass('hidden'); }
-
74 l jQuery 1.7
});
$('#switcher-narrow, #switcher-large').click(function() { $('#switcher').unbind('click'); });});
, Narrow Column Large Print click ,
. !
click
. , $('#switcher').unbind('click')
.
click .unbind()
. (event namespace)
. , .
.bind() .
.bind() .
.
; _ 3.19
$(document).ready(function() { $('#switcher').bind('click.collapse', function(event) { if (!$(event.target).is('button')) { $('#switcher button').toggleClass('hidden'); } });
$('#switcher-narrow, #switcher-large').click(function() { $('#switcher').unbind('click.collapse'); });});
-
3 l 75
.collapse . , .bind('click')
click .
click .
.unbind() .
.
, Narrow Column Large Print
. Default . Default
.
.
; _ 3.20
$(document).ready(function() { var toggleSwitcher = function(event) { if (!$(event.target).is('.button')) { $('#switcher .button').toggleClass('hidden'); } };
$('#switcher').bind('click.collapse', toggleSwitcher);});
.
(function declaration: function )
, (anonymous function expression)
(local variable) .
.
.
-
76 l jQuery 1.7
.bind()
.
.
.
; _ 3.21
// $(document).ready(function() { var toggleSwitcher = function(event) { if (!$(event.target).is('.button')) { $('#switcher button').toggleClass('hidden'); } };
$('#switcher').bind('click.collapse', toggleSwitcher);
$('#switcher-narrow, #switcher-large').click(function() { $('#switcher').unbind('click.collapse'); });
$('#switcher-default').click(function() { $('#switcher') .bind('click.collapse', toggleSwitcher); });});
, Narrow Column
Large Print Normal .
.
.unbind()
. . jQuery
. Normal
toggleSwitcher . , Narrow Large
Print toggleSwitcher Normal
.
-
3 l 77
toggleSwitcher
. hidden
.
ID switcher-default
.
; _ 3.22
$(document).ready(function() { var toggleSwitcher = function(event) { if (!$(event.target).is('.button')) { $('#switcher button').toggleClass('hidden'); } };
$('#switcher').bind ('click', toggleSwitcher);
$('#switcher button').click(function() { $('#switcher').unbind('click', toggleSwitcher);
if (this.id == 'switcher-default') { $('#switcher').bind ('click', toggleSwitcher); }
});});
. .one() .
$('#switcher').one('click', toggleSwitcher);
.
-
78 l jQuery 1.7
. ,
. (CSS)
$(document).ready() .hide() hidden
. click
.
.trigger() .
; _ 3.23
$(document).ready(function() { $('#switcher').trigger('click');});
.
(graceful degradation) .
.bind() .trigger() .click() . .click()
,
.
-
3 l 79
; _ 3.24
$(document).ready(function() { $('#switcher').click();});
.
. ,
.
. (keyup keydown)
(keypress) .
. , Shift X X .
. keyup
keydown , keypress
. D, N, L
keyup .
.
.
(focus) .
. ,
.tabIndex .
.
.
. document keyup
.
-
80 l jQuery 1.7
keyup . event
. .keyCode
ASCII .
(object literal)
. .
; _ 3.25
$(document).ready(function() { var triggers = { D: 'default', N: 'narrow', L: 'large' };
$(document).keyup(function(event) { var key = String.fromCharCode(event.keyCode); if (key in triggers) { $('#switcher-' + triggers[key]).click(); } });});
.
.
.trigger()
( click keyup) .
.
; _ 3.26
$(document).ready(function() { // hover $('#switcher').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });
// var toggleSwitcher = function(event) { if (!$(event.target).is('button')) { $('#switcher button').toggleClass('hidden');
-
3 l 81
} }; $('#switcher').bind('click', toggleSwitcher);
// $('#switcher').click();
// setBodyClass() // var setBodyClass = function(className) { $('body').removeClass().addClass(className);
$('#switcher button').removeClass('selected'); $('#switcher-' + className).addClass('selected');
$('#switcher').unbind('click', toggleSwitcher);
if (className == 'default') { $('#switcher').bind('click', toggleSwitcher); } };
// $('#switcher-default').addClass('selected');
// var triggers = { D: 'default', N: 'narrow', L: 'large' };
// setBodyClass() $('#switcher').click(function(event) { if ($(event.target).is('button')) { var bodyClass = event.target.id.split('-')[1]; setBodyClass(bodyClass); } });
// setBodyClass() $(document).keyup(function(event) { var key = String.fromCharCode(event.keyCode); if (key in triggers) { setBodyClass(triggers[key]); } });});
-
82 l jQuery 1.7
3 .
.ready() .noConflict()
.
.bind() .click()
.
, .
.toggle() .
.hover() .
.stopPropagation() .preventDefault()
.
.
.unbind() .
.
.trigger() .
.keyup() .
.
4
.
-
3 l 83
10 . jQuery
C, jQuery jQuery http://api.jquery.com/
.
index.html
complete.js . Packt
.
jQuery http://api.jquery.com/ .
1. Charles Dickens Charles Dickens selected .
2. ()
.
3. .
39.
4. : console.log()
. (: console.log() , ,
.)
5. : .mousedown() .mouseup() .
hidden
. hidden
.
