Вы находитесь на странице: 1из 884

JavaScript

jQuery
-

,

jQuery Ul


David Sawyer McFarland

JavaScript
& jQuery
3rd edition

JavaScript
jQuery
-


2015
004.43
32.973.26-018.1
17

David McFarland
JAVASCRIPT & JQUERY: THE MISSING MANUAL, 3rd edition
2015 Authorized Russian translation of the English edition of Javascript & jQuery:
The Missing manual, 3rd edition, ISBN 9781491947074
2014 Sawyer McFarland Media, Inc.

, .
M17 JavaScript jQuery: /
; [. . . . ]. 3- . :
, 2015. 880 . ( ).
ISBN 978-5-699-79119-4
JavaScript -,
- .
JavaScript,
.
jQuery, jQuery UI.
004.43
32.973.26-018.1

.., , 2015
ISBN 978-5-699-79119-4 . , 2015

........................................................................................................................ 13
.........................................................................................................................................13
.............................................................................................................13
..................................................................................................................... 14
.................................................................................15
.................................................................................................................................................... 16
JavaScript........................................................................................................................ 16
...................................................................................................................17
JavaScript ................................................................................................................ 19
jQ u e ry ? ...........................................................................................................................20
HTML: -.................................................................................................................. 21
HTM L-.......................................................................................... 23
CSS: -.................................................................................25
..................................................................................................................... 26
JavaS cript...................................................................29
........................................................................................................29
.................................................................................................. 31
................................................................................................................................... 32
JavaScript, ............................................................................ 33
...................................................................................................................34
..............................................................................................................................35
=> => .......................................................................................................... 36
............................................................................................ 37
...................................................................................................................37


JAVASCRIPT
1. Jav aS crip t......................................................................40
.................................................................................................... 41
..................................................................................43
JavaScript ............................................................................................ 44
JavaScript.................................................................................................. 47
Ja v a S c rip t........................................................................... 52
- ......................................................................................... 55
J a v a S c rip t.............................................................................. 57
.................................................................................................................. 60
JavaScript C h ro m e ............................................................................ 61
JavaScript Internet E x p lo re r............................................................64
JavaScript Firefox............................................................................... 65
JavaScript Safari..................................................................................66
2. JavaScript..................................................................................................68
...................................................................................................................................... 68
..................................................................................................................... 69
................................................................................................................................... 70
...................................................................................................................................... 70
...................................................................................................................................... 71
........................................................................................................73
.......................................................................................................................................74
........................................................................................................... 75
................................................................................................ 77
..................................................................................79
................................................................................ 79
.................................................................................................................82
.................................................................................................................83
................................................................................................ 84
...................................................................................86
.....................................88
................................................................................................91
............................................................................................................................................ 93
....................................................................................................................95
................................................................................................ 96
...........................................................................................98
........................................................................................ 101
- ......................... 103
................................................................................................................... 107
................................................................................................................................. 110
...........................................................................................111
................................................................................................ 113
3. ....................................................................115
..................................................................................115
................................................................................................ 117
...................................................................................................................... 122
........................................................................................ 123
......................................................................................................127
..................................................... 133
....................................... 139
w h i l e ...................................................................................................................... 139
.................................................................................................................142
f o r ............................................................................................................................144
d o / w h i l e .................................................................................................................146
: ......................................................................... 148
.............................................................................................................................. 151
............................................................................................. 152
................................................................................................ 155
.....................................................................157
............................................................................ 161

II
JQ UERY
4. jQ uery................................................................................................................... 170
Ja v a S c rip t...........................................................................................................170
jQ u ery .................................................................................................. 173
jQuery, C D N ......................................... 175
j Query........................................................................................................ 177
jQuery ......................................................................... 179
-................................................................................................182
( D O M ) .................................................................................... 186
: jQ u e ry ............................................................................188
........................................................................................................... 189
................................................................................................... 193
jQ uery................................................................................................................... 196
jQ u e ry ............................................................................................. 198
................................................................................... 201
.............................................................................................205
.................................................................................206
................................................................................................................................... 206
C SS.................................................................................... 210
C S S .................................................212
, H T M L ................................................................215
....................................................................................216
........................................................................................................216
t h i s $ ( t h i s ) .............................. .................................................218
......................................................................................... 220
................................................................................................................................... 221
........................................................................................................................ 222
5. /: ............................228
?..................................................................................................................... 228
...................................................................................................................230
/.................................................................................................. 231
..................................................................................................................... 233
........................................................................................................234
: jQ u e ry .................................................................................235
...................................................................................... 238
jQ u e ry .................................................................................245
HTML- .................................................................................... 245
...................................................... 249
...................................................................................................................252
............................................................................ 254
............................................................................................................. 254
........................................................................... 257
on ( ) ............................................................259
on ( ) ....................................................262
....................................................................................266
........................................................................................................................ 267
........................................................................................................................ 268
6. .......................................................................................................... 276
jQ u e ry ...........................................................................................................................276
..................................................................................277
....................................................279
........................................................................................................280
......................................................................282
........................................................................................................................ 283
...................................................................................................................................... 287
.................................................................................... 289
............................................................. 291
...................................................................295
........................................................................................................................ 297
jQuery, CSS3.....................................................303
jQuery C S S ............................................................................... 304
jQuery C S S ..................................................................................................... 307
7. , jQ u e ry ............................................ 312
..................................................................................................................... 312
s r c ......................................................................... 313
jQ u ery ..........................................................................315
.......................................................................316
.................................................................................................. 318
............................................................. 320
........................................................................................................................ 321
........................................................................................................................ 322
..................................................................................327
......................................................................................................................... 328
......................................................................................................................... 330
................................................................................................335
JavaS cript............................................................... 336
...................................................................................337
...........................................................................................338
...............................................................................340
................................................................................................................... 344
...................................................................................................................... 345
jQ u e ry ................................................................................................350
jQ u ery ?............................................................... 352
jQ u e ry ................................................................................ 354
..................................................................................357
HTML- ............................................................................................................................358
................................................................................................ 360
JavaS cript.............................................................................................................................. 361
.........................................................................................................................361
Sm artM enu.............................................................366
8. -..............................................................................................................369
............................................................................................................................369
................................................................................................... 372
....................................................... 375
................................................................................................................... 378
........................................................................................................ 385
.....................................................................385
/ .................................................................. 387
/ .................................................................. 388
.............................................................. 390
...................................................................................391
........................................................................................ 392
..............................................................................................396
............................................................................................................................398
jQuery V alidation................................................................................................... 400
.................................................................................................................403
......................................................................................................406
................................................................................415
.................................................................................................. 416
........................................................................................ 417
................................................................................420
....................................................... 424
.....................................................................428

III
JQ U ER Y UI
9. ........................................................................................................ 432
jQuery U I ? ................................................................................................................... 432
jQuery U I ........................................................................................................ 434
jQuery U I .......................................................................................... 436
jQuery UI -.......................................................................... 439
........................................................... ................440
........................................................................442
............................................................................. 444
Dialog ....................................................... 449
......................................................... 451
......................................................................... 453
....................................................455
.............................. 463
......................................464
............................................................................ 465
HTML-...............................................................467
HTML- ...................................................... 469
............................................................................................470
....................................................................................... 475
............................................................477
............................................................................... 482
................................................................486
jQuery UI ...............................................................491
................................................................................................. 493
...............................................................498
10. ................................................................................................................502
................................................................................................. 502
D atepicker..........................................................................504
................................... 510
....................................................................................514
...............................................................516
......................518
..................................................................................................................... 521
............................................................................................................. 523
.................................................................................525
.................................... 527
Autocomplete....................................................530
...............................................................532
......................................534
.............................................................................................538
jQ uery UI Form ........................................................540
11. jQuery U I ..............................................................................548
T hem eR oller.............................................................................. 548
....................................................................................555
-....................................................556
CSS- jQuery U I ............................................................................... 557
jQuery U I......................................................................................... 558
.................................................................................................. 559
jQuery UI .................................................................... 562
12. jQuery U I........................................................................... 565
D raggable........................................................................................................................ 565
Draggable -......................................................... 566
Draggable .............................................................. 567
D ra g g a b le....................................................................................... 569
D raggable.............................................................................................578
D roppable........................................................................................................................ 583
Droppable..................................................................................584
D ro p pab le....................................................................................... 586
Droppable.............................................................................................589
Drag-and-Drop ....................................................................................................... 595
............................................................................................ 604
S ortable.................................................................................... 604
Sortable.............................................................................................607
S o rtab le ............................................................................................... 612
Sortable.................................................................................................. 616
jQuery U I...................................................................................................................... 620
.............................................................................................................................. 622
e a s i n g ............................................ .................................................................. 626
..............................................................................................627

IV
JQ U ER Y
JAVASCRIPT
13. A ja x .............................................................................................632
A ja x .............................................................................................................................. 632
Ajax: ...........................................................................................................635
...................................................................................................................... 635
-........................................................................................ 639
Ajax jQ uery..................................................................................642
l o a d ( ) ................................. .....................................................642
l o a d () ........................................................................................ 646
g e t () p o s t ................................................................................................... 652
, ....................................................... 653
..............................................................................................658
.............................................................................................................. 663
g e t () ..................................................................... 664
JSO N ................................................................................................................................. 673
J S O N ......................................................................................................675
J S O N ................................................................................................... 677
JSO N P.........................................................................................................................681
Flickr ......................................................................... 681
URL- ................................................................................................... 683
$ .getJSO N ( ) .............................................................................. 686
JSON- F lic k r................................................................................................... 686
Flickr .......................................... 689
14. ...............................................................................697
......................................................................................................................697
...................................................................................................................... 699
.................................................................................................. 700
.........................................................................................................................706
.................................................................................... 714
......................................................................................................714
.............................................................................................................................. 720
.............................................................................................723
........................................................................................................ 724
................................................................................................... 725
........................................................................................................... 725
........................................................................................................ 726

V
,
15. jQ u e ry ..................................................... 728
j Q u e r y .............................................................. 728
$ () jQ u e ry ( ) .................................................... 728
................................................................................729
...............................................731
................................................................................................... 733
j Q u e r y .......................................................... 735
................................................................. 739
D O M ..................................................................................................................... 742
HTM L....................................................... 749
16. Ja v a S c rip t................................. 756
..................................................................................................................... 756
.............................................................................................756
.............................................................................................758
: in d ex O f () ........................... .............................................. 759
s l i c e ( ) .............................................. 761
.......................................................................................................... 763
....................................................764
............................................................................ 765
............................................................................................... 770
..................................................................................772
........................................................................................................779
..................................................................................................................... 782
..........................................................................784
........................................................................................................................ 785
....................................................................................... 785
........................................................................................................................ 788
................................................................................................................ 789
............................................................................... 789
.............................................................................................791
................................................................................................................................ 793
..................................................................................793
............................................................................ 794
..................................................................................795
, .................................................................... 800
Jav aS crip t......................................................................................... 803
..........................................................................803
............................................................................... 806
.......................................................................................................... 807
-.............................................................................................809
.................................................................... 812
......................................................................................................................................... 813
Jav aS crip t................................................................. 813
Ja v a S c rip t..........................................................................817
17. ....................................................................................................... 819

J a v a S c rip t..................................................................................................................... 819
................................................................................................................ 819
................................................................................................................................ 823
.......................................................................826
......................................827
.......................................................................................... 828
JavaScript...................................................... 828
Ja v a S c rip t........................................... 829
......................................................................... 831
- ............................................................................................ 833
- ..................................................................................................... 833
..................................................................................834
c o n s o l e . l o g ()
........................................................................................................836
............................................................................. 837
...................................................................................842
................................................................................................................... 849

VI

. Ja v a S c rip t......................................................................... 858
..............................................................................................................858
-.............................................................................................................................. 858
....................................................................................................................................859
JavaScript..............................................................................................................859
-.............................................................................................................................. 859
....................................................................................................................................859
jQ u e r y ...................................................................................................................... 860
-.............................................................................................................................. 860
....................................................................................................................................860
JavaScript......................................................................... 861
.........................................................................................................861
-.............................................................................................................................. 861
....................................................................................................................................861
C S S .......................................................................................................................................862
-.............................................................................................................................. 862
....................................................................................................................................863
.........................................................................................................................864


(David Sawyer McFarland)
Sawyer McFarland Media ( , ),
- . 1995 .
-
. -
- ,
Macworld.com CSS.

-, ,
. -
,
, ,
-
. -
Practical Web Design, MX Developer's Journal, Macworld
CreativePro.com.

,
missing@sawmac.com. (
, ,
).


(Nan Barber) ()
.

. : nanbarber@gmail.com.

(Melanie Yarbrough) ( )
, ,
.
: myarbrough@oreilly.com.

(Jennifer Davis) ( )

.

,
.
Reliability Engineering, Bay Area Chef.

(Alex Stangl) ( ) 25
,
.
,
( Clojure),
.
: alex@stangl.us.
(Jasmine Kwityn) ()
. - , ,
, , . :
jasminekwityn@gmail.com.

(Bob Pfahler) ( )
,
Potomac Indexing,
LLC, www.potomacindexing.com.

, , , .
: bobpfahler@hotmail.com.


, ,
,
.
,
JavaScript
Futzbit
: , , ,
, ' .
jQuery ,
JavaScript
.

, ,
, ,
, , ,
.


,
,
.

, .

:
Adobe Photoshop 2014.
.
iPad. .
JavaScript. .
Web-. .
.
.


eksmo.ru.


. HTML- -
.
-
.


, ,
.
, , JavaScript jQuery.

JavaScript
JavaScript ,
HTML-,
,
.

JavaScript - ,
. ,
JavaScript -
, . JavaScript
, -
,
.

JavaScript
. , JavaScript

-.
, ,
,
(.
9). - , ,
,
- (.
9).

JavaScript .
- ,
,
. JavaScript
, ,
, -.

-, ,
,
-.

Google Maps (maps.google.com),


JavaScript . Google Maps
( ),
,
, ,
, , , .
Google Maps
,
( ),
. Google Maps
.

JavaScript
(, -),
-, Google Docs (docs.google.com),
,
, .
,
.

JavaScript Netscape
1995 ., ,
. JavaScript ,
.

, ,
, , ,
.

JavaScript ( ),
,
.


JavaScript
Java. JavaScript LiveScript,
Netscape ,
, Java.
...
!

JavaScript
: Netscape Navigator Internet Explorer.
Netscape Microsoft
, ( )
, -,
JavaScript,
.


Netscape JavaScript, Microsoft
jScript JavaScript,
Internet Explorer.

, , Firefox, Safari,
Chrome, Opera Internet Explorer 11,
JavaScript, ,
. ,
-
,
, .
, JavaScript ,
, Google, Yahoo Flickr,

-. JavaScript
.
, , ,
.


JavaScript ECMAScript.
ECMAScript JavaScript,

International: w w w .e cm a script.o rg .

JavaScript

JavaScript -.
.
, Yahoo
Google Apps, iPhone
Adobe, Acrobat,
Photoshop, Illustrator Dreamweaver. , Dreamweaver
JavaScript
.
OS X Yosemite Apple
,
JavaScript. , JavaScript
- ,
, Gulp.js,
, CSS JavaScript. Bower,
JavaScript, jQuery,
jQuery UI AngularJS.

JavaScript
. Node.js (
JavaScript V8 Google, JavaScript
)
, Walmart, PayPal eBay. JavaScript
.
, JavaScript
- ( ) - -
JavaScript.

, JavaScript ,
!

jQuery?
JavaScript :
. , JavaScript
. , -,
.

, -
JavaScript -, , ,
, Chrome,
Internet Explorer 9.
,
,
.

jQuery. JavaScript,
,
. JavaScript
JavaScript ,
.
, jQuery
JavaScript:
-.

jQuery -
JavaScript. jQuery
,
JavaScript
. JavaScript
, , ,
, ( )
,
jQuery.

jQuery, .
jQuery ,

jQuery. , jQuery UI (
9 )
,
, , ,
, !

, jQuery -
(trends.builtwith.com/javascript/jQuery).
, Drupal WordPress.
jQuery
JavaScript.
jQuery,
- ,
-.

HTML: -
JavaScript
HTML CSS. ,
-: HTML, CSS JavaScript.
,
, , .
, CSS ( ),
, HTML-.
JavaScript ,
, ,
.

, JavaScript,
HTML, CSS.


HTML CSS
, -.

CSS3 .
(HTML, Hypertext Markup Language)
,
,
-. , HTML-
-:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
< title> ripH BeT, -.</title>
</head>
<body>
, -.
</body>
</html>

, ,
-.
(d o c t ), ,
.
HTML .
doty p e ,
HTML- , 5;
d o c ty p e HTML 4.01 XHTML
(URL, Uniform Resource Locator),
,
.

, doctype ,
.
CSS JavaScript.
doctype, -
.
, HTML .

: HTML 4.01 Transitional,


HTML 4.01 Strict; XHTML 1.0 Transitional, XHTML 1.0 Strict,
,
. HTML5 <! DOCTYPE
htm l> ,
.

HTML-

, HTML-

.
, ,
-.
HTML.

() ,
, ()
, .
/ <. , <>
, </> . ,
, img, in p u t b r .

-
.
h tm l - (
) .
, HTML.
, ,
htm l.

- , htm l
. (
-) .
h ead
. ,
(, ,
).

,
-
. ,
. ,
JavaScript
JavaScript.
body
- ,
: , , . .

body .
, <>, ,
, , </>,
.
strong .
- (<strong>)
(</strong>) ,
. , HTML-
<strong>BHHMaHne ! </strong> ,
! .
( ), -
. ( ),
-. ,
, -
. , :

< href="www.e k s m o ."> !</>

,
!,
. href , URL-
. www. eksmo.ru href.


-
, doctype , HTML
XHTML -.
,
. , HTML 4.01, XHTML
<> ,
(,
<> <>). HTML5
HTML XHTML.
HTML ,
-.
HTML- , -
. ,
, ,
, . ,
,
. ,
, ,
-, validator.w3.org.
HTML- -,
-
; HTML-
, .
, , HTML-
.
HTML-
, ,
JavaScript. JavaScript-nporpaMMbi
HTML- , ,

HTML- (
). , JavaScript
- - , HTML-
. ,

HTML-,
JavaScript- .

CSS: -
HTML
, .
,
, , .

.
(CSS, Cascading Style Sheets) ,
,
.

HTML ,
.
, . , h 1 h2
, :
1 , 2.
.
: u l
(,
).

, CSS HTML-
. , CSS
, ,
. , CSS
, h i,
36 , Verdana . CSS
, , ,

.

JavaScript,
, ,
CSS. JavaScript CSS
HTML- CSS,

.
(, ).
,
, CSS d is p la y .
,
CSS, JavaScript.

,
, , -, ,
,
150 ,
. ,
: , , .
:
- ()
( ). , ,
, , . .
, ,

.


CSS .
.

, CSS
. . ,
-,
:

{ color: red; font-size: 1.5em; }

: ,
, , 1,5 m (
, ).
. .1, .
. , ( )
.
, , . . .1
,
,
. CSS

. (
jQuery,
: jQuery
4.)
. , ,
, .
{
}.
.

.

. .
. CSS
, .
, .

, , font-size ( ), margin-top
( ) background-color ( ).
, background-color, , ,
, .


CSS,
CSS3.

. ,
, CSS , ,
, , -.
CSS : (, red
#FF0000), (18, 2in 5m ), (,
images/background.gif) (
, top, center bottom).

. .1. ( ) : ,
, , ,
,

,
. .1.

,
,
.

,
, ,
, :
{
c o l o r : re d ;
f o n t - s i z e : 1 . 5em;
}

,
,
, ,
. ,
, .


. , : c o l o r : red , c o lo r : re d
c o lo r : red.


Javascript
-, HTML, CSS JavaScript,
, , ,
(Windows) TextEdit (OS X).
JavaScript , ,
, -.

.


,
JavaScript,
.
,
JavaScript.


- . -
TextEdit,
:

Brackets (Windows, OS X Linux, brackets.io)


Adobe .
(
Edge Code),
,
, JavaScript!
Notepad++ (Windows, notepad-plus-plus.org) .
JavaScript HTML-
,
,
.
HTML-Kit (Windows, www.chami.com/html-kit)
HTML/XHTML,
, , -
(
), HTML-
.
CoffeeCup Free HTML Editor (Windows, www.coffeecup.com/free-
editor) HTML-
CoffeeCup.
TextWrangler ( S X, www.barebones.com/products/textwrangler)
, Edit

OS X. TextWrangler
BBEdit HTML-,
( HTML-
, ),
FTP ( -)
.
Eclipse (Windows, Linux, OS X; www.eclipse.org)
, Java-,
HTML, CSS JavaScript.
JavaScript-
(www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-
developers/indigor), Eclipse
j Query (marketplace.eclipse.org/category/free-tagging/jquery).
Aptana Studio (Windows, Linux, OS X; www.aptana.org)
,
30

HTML, CSS, JavaScript, Ruby on


Rails.
Vim Emacs Unix
world. OS X Linux,
Windows.
,
.


,
:
Atom (Windows OS X, atom.io) ,
,
-.
GitHub (,
).
, .
,
,
.
SublimeText (Windows, OS X Linux, www.sublimetext.com)
.
,
, JavaScript,
,
(, ,
).
EditPlus (Windows, www.editplus.com)
, , FTP,
.
BBEdit (OS X, www.barebones.com/products/bbedit)

HTML, XHTML, CSS, JavaScript .
.
Dreamweaver (OS X Windows, www.adobe.com/ru/products/
dreamweaver.html) -,

31

, ,
JavaScript
CSS.
, ,
Adobe Dreamweaver . .


, Microsoft Word
Dreamweaver, JavaScript ,
.
JavaScript,
-.
, Mozilla.org (developer.mozilla.
org/ru/docs/Web/JavaScript/Reference) www.ecmascript.org,

JavaScript .

- JavaScript, ,
, , ,
JavaScript
-,
JavaScript.
JavaScript
-.

jQuery : api.jquery.
com. ,
.
jQuery
JavaScript,
.

JavaScript jQuery:
,
-. HTML CSS,
, JavaScript
.
.
- ,

32

, .
-,
.
, .



, , JavaScript.

JavaScript,

JavaScript .
, HTML CSS, (
). -
. ,
, ,
JavaScript.

JavaScript jQuery:

. ,
- JavaScript
jQuery, -
.


JavaScript,
. 800 ,
, JavaScript
-.
jQuery JavaScript,
,
.

JavaScript
- ,
, jQuery. .
, , ,
, , , ,
. .
33

JavaScript. ? ,
,
.
, ,
.

JavaScript jQuery:
, :
I .
JavaScript,
.
-,
, ,
.
, , cookie,
,
, HTML- -.
II
JavaScript jQuery.
,
.
, ,

, .
III jQuery UI
JavaScript,
,
, , ,
. jQuery UI

-.
IV
jQuery JavaScript. , 13 ,
JavaScript
-. JavaScript
,

34

, -,
-. 14
,
jQuery jQuery UI.
V .
, jQuery
JavaScript.
, ,
JavaScript ,
( : !).
,
,
.

, ,
,
JavaScript.


, ,
. ,
:
.

. (
) -
, , (
).
, .
,
.
,
.


c ,
, Control,
.

35

+ c
Ctrl , ,
Ctrl (
).
. , :
(File), (Edit) . .
.
.
,
, (,
).
,
. ,
Firefox Ctrl++ (Windows)
++ (OS X), -.
, +,
, , ,
.
.
, ,
. ,
(Windows), Dock Apple
(OS X), (Windows)
(OS X).

,
,
JavaScript j Query: .

,
, ,
: //.

,
:
. .
;

36

.
. , .


, . .2.

. .2. ,
. , => =>
(View => Zoom => Zoom In)
(View), (Zoom),
(Zoom In)


,
, ,

.
.


. ,
(, -),

37

http://eksmo.ru/Primers_jsjq.zip.
, ,
.
, ,
-.

-,
,
. ,
JavaScript- ,
-.
I
JAVASCRIPT

1.
JavaScript

2. JavaScript

3.

1

JAVASCRIPT

HTML :
, ,
,
. HTML ,
-,
. -
, .
JavaScript.

. 1.1. JavaScript -
. , Ozon.ru

JavaScript -
.
-, ,
; ,

40
1. JavaScript

(. 1.1);
, ,
. , JavaScript
- ,
.


HTML5 ,
.
(
JavaScript),
JavaScript, ,
.
HTML5 - HTML CSS.
-.


,
, ,

. , ,
.
, .
.
, JavaScript
.

JavaScript , HTML CSS,


- terra incognita,
.
,
JavaScript, ActionScript
C++.
, ,
, .
-
, JavaScript. JavaScript
{ }, [ ] , ; , , , (), !, = (var,

41
I. JavaScript

n u ll, e l s e if ) . .
,
, , .

,
. JavaScript
.
(, ,
).
, , ,
, .

JavaScript .

.

, JavaScript
, ,
. , ,

. :
JavaScript , ,
,
.
,
JavaScript ,
.

, JavaScript,
jQuery JavaScript. jQuery
JavaScript . ,
JavaScript jQuery,
-.



JavaScript . ,
, ColdFusion.
?

42
1. JavaScript

, ,
, .
, , ,
. ,
, ,
,
, , ,
. ,
: ,
, . ,
.
, , ,
( ,
, ) .
JavaScript .
-, JavaScript,
, .
,

. -,
,
, .
,
.

JavaScript -,
. ,
JavaScript ( ) ,
,
-,
. , ,
. ,
, ,
-, , , !
.
1. .
2. .
3. ( ) -.

43
I. JavaScript

,
: ,
, ,
.
JavaScript, ,
. ,
. ,
,
, .

JavaScript
HTML CSS
. ,
HTML CSS, .

JavaScript. , JavaScript
JavaScript.
HTML-, ,
JavaScript, script.

<script> HTML,
, : , ,
JavaScript. , ,
JavaScript. < /
script>, , JavaScript
.

script
- head) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"h t t p ://www.w 3 .org/TR/html4/strict.dtd">
<html>
<head>
<title>MoH Be6-CTpaHMua</title>
<script type="text/javascript")
</script>
</head>

44
1. JavaScript

type script
. type="text/javascript"
, ( HTML),
JavaScript.

HTML5, .
ty p e:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mo e -paa</title>
<script>
</script>
</head>

type
HTML 4.01 XHTML 1.0 .
type
(. -).
HTML5, JavaScript HTML
4.01 XHTML 1.

JavaScript-
script:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mo e -paa</title>
<script>
alert( ' , !');
</script>
</head>

, JavaScript-
.

45
I. JavaScript

s c r i p t . ,
.
, head, JavaScript
.

s c r i p t
HTML-. , JavaScript,
-.
, s c r i p t
( body) ,
. s c r i p t
</body>
, , ,
JavaScript.



JavaScript ,
. JavaScript
.
JavaScript, - ()
.
-
(, , .NET, ASP, ColdFusion, Ruby on Rails).
, .
, ,

. ,
,
.
, ,

. ,
,
.
,
, -.
JavaScript ,
. -
. ,

46
1. JavaScript

Java , Java,
. ,
, .
Flash , ,
, ,
. ,
-: JavaScript
Flash. , Google Maps
Flash (, Yahoo Maps
Flash-,
JavaScript). ,
,
Flash- ( , ).
Flash-,
Adobe Flash Player (About
the Flash Player).
Ajax, IV,
. Ajax ,
JavaScript ,
-
. Google Maps ,
,
.
JavaScript
. , - node.js (nodejs.org/)
JavaScript
,
. ,
JavaScript
.
, , , MongoDB
CouchDB, JavaScript
, . , ,
JavaScript,
JavaScript
, - .

JavaScript

s c r i p t , ,
JavaScript .
,

47
I. JavaScript

. ,
JavaScript -
(. 1.2). ,
.
JavaScript
.

-, ,
,
. -, -
JavaScript, -,
, . ,
JavaScript -,
, ,
.

JavaScript.
CSS -,
. JavaScript
.js (, navigation.js).
JavaScript -
script. , JavaScript
navigation.js :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mon Be6- CT paH Mu a< /t itl e>
<script src="navigation.js"></script>
</head>

src script , src


img href . ,
, , (.
URL-).


src JavaScript,
- JavaScript-

48
1. JavaScript

script.
JavaScript
JavaScript ,
script. :
<script src="navigation.js"></script>
<script>
alert (' , !');
</script>

( )
JavaScript -. ,
JavaScript,
, , -
.
JavaScript, .

JavaScript
JavaScript :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MoH Be6-CTpaHHua</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
alert(', !');
</script>
</head>

,
script JavaScript.
JavaScript
JavaScript.

JavaScript
- ( ).
-

49
I. JavaScript

JavaScript ,
js ( JavaScript) libs ( ).

. 1.2. Nike.com JavaScript


.
,
. ,
, ,
Nike


URL-
JavaScript -,
URL- src script. URL
, ,
, .
: ,
. ,
(, -,
JavaScript).
:
, , ,
. http://, ,
. : http://www.uptospeedguides.com/scripts/
site.js.

50
1. JavaScript

,

.
h ttp :// . / (),
,
. , /scripts/site.js
, site.js scripts,
.

h ttp :// . , http://www.
uptospeedguides.com/index.htnnl,
, /index.htm l.
-
JavaScript. ,
,
JavaScript. , ,
JavaScript site.js, scripts,
.
: script/site,
js, , about: ../
scripts/site.js. ../
about, /scripts/site.js
scripts site.js.
,
URL- :
, ,
, -,
. URL-
, .

JavaScript, .
,
URL- JavaScript
,
.
, -,
, -,

. ,
- ,
=> (File => Open),
JavaScript,
, .

51
I. JavaScript

,
,
. JavaScript,
-, ,
- .
,
,
JavaScript, -
.
,
,
.


,
JavaScript. ,
, , ,
.
JavaScript (JavaScript-,
).
JavaScript
JavaScript.


JavaScript
JavaScript
. ,
.
, (.
JavaScript),
, (.
).



www.eksmo.ru.
,
,
.

52
1. JavaScript

JavaScript , ,
, .
1. 01_01.html.

01,
. HTML-
.
2. </head>
:
< s c r ip t>

HTML- ,
J avaScript.
3. Enter, ,
:

a l e r t ( ' , ' ) ;

JavaScript-.
JavaScript a l e r t () ,
, , :
, . (,
). , .
4. Enter < / s c r ip t> .
:

< l i n k h r e f = " . . / _ c s s / s i t e .c s s " r e l = " s t y l e s h e e t " >

< s c r ip t>

a l e r t ( ' , ' ) ;

< /s c r i p t >

</ head>


. HTML- ,
, , .
5. 01_01.html
.

53
I. JavaScript

JavaScript (. 1.3).
, .
, . 1.3, , , ,
.
.


, ,
JavaScript
. .
, (, alert
). ,
(,
). ,
.

6. , .

, -.

,
: JavaScript
JavaScript-. a l e r t ()
, -,
JavaScript HTML- body.
, ,
HTML- - 3.

. 1.3. JavaScript -
. JavaScript
1. JavaScript


Internet Explorer
JavaScript , -,
, - ,
.
Internet Explorer,
, ,
.
(Allow blocked content),
.


-, ,
, .
, , ,
Firefox, Chrome Safari,
(Allow blocked
content) .

-

. ,
-, JavaScript?
,
.
JavaScript,
:
1. 01_02.html.

s c r i p t ,
JavaScript (
body) -.
2. <h1> -
</h1> :

<script>
doc ument.w r i t e ('<>, !< / > ');
</script>
55
I. JavaScript

a l e r t (), d o c u me n t .w r i t e ()
JavaScript, ,
.
HTML-,
: <>, ! < / >.
3. .

, !
(. 1.4).

. 1.4. , JavaScript
- , ,
( , )
-



. JavaScript- ,
, _
, .
, _01 _02.htm l
, 01_02.html.


JavaScript... .
. .
,
JavaScript.
56
1. JavaScript

,
, .

JavaScript
, JavaScript
,
. -
JavaScript-. JavaScript
, JavaScript.
, JavaScript,
,
JavaScript.
. , jQuery,
4.

JavaScript
,
:
1. 01_03.html.
HTML-
div, .
,
.
2. < lin k >
</head> :
<script src="../_js/jquery.min.js"></script>

jquery.min.js,
_js -. -,
JavaScript- j query.min.j s
.
JavaScript-
.


min , ,
.

57
I. JavaScript

3. Enter, ,
:
<script>

, HTML-
.
, ,
.
4. Enter,
:
</script>

JavaScript.
.
5.
s c r i p t :
$ (document).ready(function() {

, , , .

jQuery 4. ,
, jquery.min.js,
.
6. Enter, ,
:
$ ('header' ).hide().slideDown(3000);

:
, 3 (
3000 ). ? ,
jQuery,
.
7. Enter :
});
JavaScript ,
< / script >, .
, , .
, .

58
1. JavaScript

, ,
.
,
, :

<link h r e f = " ../_css/site.css rel="stylesheet">


<script src="../_js/jquery.min.js"></script>
<script>
$ (document).ready(function() {
$('header') .hide().slideDown(3000);
});
</script>
</head>


,
.
HTML-, ,
.
, . ,
, 6, ,
5 7, Tab
, 6,
. (
.)

8. HTML- .

,
. 3000 250 10000, ,
.


Internet
Explorer, ,
(Enable blocked
content) (.
JavaScript ).

59
I. JavaScript

, JavaScript
.
JavaScript, , jQuery,
-,
. .
JavaScript
.


,
, JavaScript...
. .

, , ,
.


JavaScript,
, ! ( , ,
, JavaScript
.)

, , ?
JavaScript.
17,
.
JavaScript ,
. -, ,

, , , ,
.


JavaScript , .
,
, , ,

JavaScript.
, ,
, , -
60
1. JavaScript

JavaScript ,
, .

JavaScript Chrome

Chrome Google
-.
,
HTML, CSS JavaScript. , JavaScript
.
, , .

, (Customize)
( . 1.5), (Tools)
JavaScript (JavaScript Console)
Ctrl+Shift+J (Windows) +J(O SX ).

. 1.5. (Customize) ( ),
JavaScript .
(Developer Tools),
JavaScript ,
17

,
. , . 1.6 -
61
I. JavaScript

Uncaught SyntaxError: Unexpected


token ILLEGAL, ,
. ,
- .
Unexpected token ILLEGAL ,
( ) . ,
, ,
slow ,
.

(01_03.html)
(line 10). ,
(. . 1.6).


,
,
.
,
.

. 1.6. JavaScript Chrome


.
,
( )

62
1. JavaScript

, ,
, :
. JavaScript,
.
, , ,
.
, . ,
, .
. ,
JavaScript ,
.
alert ('' ;, ,
, , Unexpected token ;,
, Chrome .

.
. ,
(. 2). , ' '
alert( ' ' ) ;.
.
, , :
alert ( ' " ) ;. , ,
Uncaught SyntaxError: Unexpected token
ILLEGAL.
.
JavaScript, , aler ('' ) ;,
, ,
, , Uncaught ReferenceError : aler is
not defined.
jQuery-, , .hide()
.slideDown (). .
hid hide 6
JavaScript , Chrome
Uncaught TypeError : Object [object
Object] has no method 'h i d '.
. Chrome ,
, .
- .
.
63
I. JavaScript

JavaScript.

. ,
JavaScript.

,
,
, ,
. , ,
, ,
(
).

JavaScript Internet Explorer

Internet Explorer
, JavaScript,
CSS, HTML
. (Developer tool)
.

F12 ,
(Developer tool) , . ,
JavaScript (Console) (
. 1.7).


-, Internet
Explorer, ,
. .

.

Internet Explorer
Chrome, .
, (Unterminated
string constant) Chrome
Unexpected token ILLEGAL. Chrome, Internet
Explorer HTML-, .
.
64
1. JavaScript

. 1.7. Internet Explorer


JavaScript, ,

JavaScript Firefox

Firefox Mozilla
JavaScript .
JavaScript
Windows, -
(Tools Web Developer) - (Web Console)
Ctrl+Shift+I.
OS X
+K (O S X).


. , Firefox
(. 1.8). ,
, CSS HTML . .


Firebug (getfirebug.com )
.
,
Internet Explorer, Chrome Safari ( ).

65
I. JavaScript

. 1.8. Firefox,
, ,
. , CSS,
CSS, (Security),
. - ,
CSS (Security) .
, , (Net), JS
(Logging)

JavaScript Safari

Safari
(Develop => Show Error
Console) ( +,
Windows Ctrl+Alt+C). ,
(Develop) Safari ,
, JavaScript,
.

(Develop),
(Preferences). OS
X Safari (Preferences).
Windows

(Preferences). (Preferences)
(Advanced). -

66
1. JavaScript

(Show Develop menu in


menu bar) (Preferences).

Safari, (Develop)
(Bookmarks) (Window)
. =>
(Develop => Show Error Console),
(. 1.9).

. 1.9. Safari ,
, , .
,
,
=> (Develop => Show Error Console),
, . ,
, Safari ,
.
,

2
JAVASCRIPT

,
:
,
. ,
, -,
JavaScript, .
,
JavaScript.

JavaScript,
,
. JavaScript,
( ) .


, -
JavaScript. ,
. ,
, ( ),
JavaScript.
. :

alert (', !' );

,
, ! .

. ,
, JavaScript .

JavaScript :
, ,

68
2. JavaScript

Enter, ,
, . . ,
.


,
.
.

(
).


, ,
. , .
,
JavaScript.
, ,
JavaScript 16.


JavaScript
-
-.
. .
, alert (), ,
.

, , alert () document.write ()
( ),
. ,
JavaScript (, Node.js, Adobe Photoshop
ActionScript, JavaScript).

,
. , i s N a N (), ,
, , ,
, (

69
I. JavaScript

, ?).
isNaN ()
16.

JavaScript ,
.
. , ,
isNaN () , isNaN
.

JavaScript
, ,
, , JavaScript.
3.


JavaScript
.


.
, ,
. , ,
.
.
, . ,
.
- ( ,
!), .


-.
JavaScript : number (),
string () Boolean ( ).

70
2. JavaScript

.
JavaScript: ,
, -,
- ,
, .

JavaScript ,
, 5. : 5.25
10.3333333. , JavaScript
, , 130 459.67.
,
.
,
: , -
(5 + 15).
:

document.write(5 + 15);

JavaScript-
(20) -.
,
.

,
, .
, . , ' , !' "
" .
: alert (', !' ); .

JavaScript,
.
, JavaScript,
, .
, , ,
.

("
, "), (' , ' ).

71
I. JavaScript

,
(, " '
, ,
).


JavaScript,
: " " ' ' .

, , !,
:

alert (', !' );

a l e r t (", !");


, , ,
-, -.

.



,
. ?
JavaScript .
JavaScript ,
: , .
, ,
. : "
, """. (
) ; JavaScript
, ,
, " , "
JavaScript.

72
2. JavaScript

.

, . , ' ,
"" ' .
, .
,
, , "' ".
JavaScript
, .
.
(\),
.
: " , \"\"".

. , ' "'
" '.
, '
: \ '.

,
. : ' , \"\" '.
\
( ),
, ,
.

,
()
(true), (false).
JavaScript-nporpaMM,
. , ,

. ,
: ?.
:
(), ().
-. ,
(), ,
(), ,
.

73
I. JavaScript

, JavaScript
:
true


false


,
JavaScript,
, .
, ,
", " :

alert (", ");

,
.
,
,
: ' , ', ', ', ', ' . .
,
,
.


. , JavaScript
,
. , ,
,
. ,
. ,
, (. 2.1).

, :
-, , ,
.
.

74
2. JavaScript

. 2 .1 . mcbites.sh75.net JavaScript
, McDonalds.
( ), ,
.
, .
,

:
. JavaScript
, , s c o r e :
v ar sco re;

v a r JavaScript,
, , , .
s c o r e .

,
, :
, $
,
: 1t h in g &th in g ,
s c o re , $ s c o re _ s c o r e .

75
I. JavaScript

, ,
$
: fish&chips fish and
chips , a fish_and_chips plan9
. ,
, , ,

.
.
JavaScript - ,
SCORE score,
sCoRE Score.

. 2.1 .
JavaScript .

, ,
JavaScript
break a b str a c t a le r t
case b o o le a n b lu r
c a tc h b y te c lo se d
c o n tin u e ch ar document
debugger c la s s fo c u s
d e f a u lt con st fram es
d e le te d o u b le h is to r y
do enum in n e r H e ig h t
e ls e exp ort in n erW id th
fa ls e e x te n d s le n g t h
fin a lly f in a l lo c a tio n
fo r flo a t n a v ig a to r
f u n c t io n g o to open
if im p lem en ts o u te r H e ig h t
in im port ou terW id th
in s t a n c e o f in t p aren t
new in te r fa c e screen
n u ll le t screen X
re tu r n lo n g screen Y
sw itc h n a t iv e sta tu sb a r
th is pack age window
throw p r iv a t e
tr u e p r o te c te d
try p u b lic
ty p eo f sh ort
var s ta tic
v o id su p er
w h ile sy n c h r o n iz e d
w ith throw s
tr a n s ie n t
v o la tile
y ie ld

76
2. JavaScript

.
JavaScript , , var
,
var. , , alert, document,
window, -.
,
.
. 2.1. ,

.


.
, ,
, , .
, score ,
. , s,
, .
,
. ,
,
. ,
imagepath , image_path
imagePath.

,
. ,
=. , 0
score, :

var score;

score = 0;

,
0.
, , -
.
JavaScript, :

77
I. JavaScript

var score = 0;

,
:

var firstName = '';


var lastName = '';
var age = 22;
var isSuperHero = true;


,
var, , :
var , , z;
JavaScript
:
var isSuperHero=true, isAfraidOfHeights=false;

,
,
.

,
, score, :

alert(score);

,
, alert ( ' score ')
score, , score.

, :
JavaScript
(, alert () ),
.


var :
.
, var.

78
2. JavaScript


, ,
,
.
. ,
;
;
:
, . JavaScript
.
, .
, + ( ),
.
.

JavaScript :
, , . . . 2.2
.

. 2.2. JavaScript

+ 5 + 25

- 2 5 - 5
* 5 * 10

/ 1 5 /5


, JavaScript
JavaScript, , . ,
,
?
, JavaScript
, . -

79
I. JavaScript


( ). JavaScript
, ,
. ,

, , ,
. :
v a r form Nam e ='';
v a r fo r m R e g is tr a tio n = '';

.
:
var formName = '';
var formRegistration

'';
, ,
.
- . ,

, . ,

.
:
var score=0, highScore=0, player='f;

:
var score=0/
highScore=0,
player='';
,
, ; JavaScript
. ,

JavaScript.
, .
, .
, , , :
var name = '
';

80
2. JavaScript

(
Enter) JavaScript-,
.
,
: , varscore=0 ,
var score=0.
score,
0 varscore. JavaScript
var score ,
var: var score=0.
,
(=) ,
.

,
(, 4 5), JavaScript
*.


. -
, ,
:
var price = 10;

var itemsOrdered = 15;

var totalCost = price * itemsOrdered;

(price
itemsOrdered), .
(totalCost)
price (10)
itemsOrdered (15). (150)
totalCost.


. , ,
.

.
(, 100 ,
100 , ). -

81
I. JavaScript

,
, .
. , -
, ,
, :
var price = 20;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;

(.
16),
, . 2.2.


, , 10,
, JavaScript
.
. -
. :
4 + 5 * 10

,
: 4 + 5 = 9, 9 * 10 = 90. .
, : 5 * 10 = 50 + 4 = 54.
(*) ( / )
(+) ().

,
.
:
(4 + 5 ) * 10

,
, : 4 + 5,
(9) 10.
, , :

4 + (5*10);

82
2. JavaScript


. , - ,

, , ,
. ,
, ,
, :
, .


+. , ,
,
. :

var firstName = '1;


var lastName = '';
var fullName = firstName + lastName;

firstName
lastName.
, fullName.
.
,
. (, , )
:

var firstName = 1;
var lastName = '1;
var fullName = firstName + ' ' + lastName;

1 1 ,
. ,
. ,
,
.


, ,
, ,

83
I. JavaScript

. ,
( f ir s t N a m e + la s t N a m e ),
: 1 *+ 1 1.


. , .
, JavaScript NaN,
. ,
. , ,
, .
, . ,
+, :
:

var numOfVisits = 101;


var message = ! 1 -1
+ numOfVisits + 1 . 1;

message
101 . JavaScript ,
,
(). +
, ,
.
. ,
, ,
, ,
+ , JavaScript
.

,
, . ,
(
?), (, 2),
12 1. :

var numOfShoes = '2 ';


var numOfSocks = 4;
var totalltems = numOfShoes + numOfSocks;

84
2. JavaScript

, , total Items,
6 (2 + 4 ). ,
numOf Shoes , JavaScript
numOf Socks ,
' 24' totalltems.
.

-, + ,
:

var numOfShoes = '2 ';


var numOfSocks = 4 ;
var totalltems = + numOfShoes + numOfSocks;

+ (,
), JavaScript
. ,
, 12 1, ,
. 6 (2 + 4).

-, Number ():
var numOfShoes = *2*;
var numOfSocks = 4;
var totalltems = Number(numOfShoes) + numOfSocks;

Number () , .
, NaN
, .


, , ,
. ,
,
,
Number ().


,
, .
numOf shoes ,
, , shoePrice, JavaScript

85
I. JavaScript

numOf S h o e s ,
s h o e P r i c e .

, ,
, , ,
.
? ,
, :
var score = 0;
score = 100;

,
, , - .
. ,
-
. ,
:

var score = 0;
score = score + 100;


, .
: , =,
. score + 100.
: ,
score (0), 100.
score.
score 100.

,
, :

score = score 10;


score = score * 10;
score = score / 10;

86
2. JavaScript

,
(. 2.3).

. 2.3.


+= ,
s c o r e += 10 s c o r e = s c o r e + 10
=, ,
+
,
s c o r e = 10 s c o r e = sc o r e 10
=, ,

*= ,
s c o r e *= 10 s c o r e = sc o r e * 10
*, ,
=

/= ,
/ s c o r e /= 10 s c o r e = s c o r e / 10
,
=
++
s c o r e ++ sco re = sco re + 1
,
1

score sco re = score 1
,
1

.
, ,
.
var name = '';
var message = '';
message = message + ' ' + name;

,
. += ,
=, . ,
:
message += ' ' + name;

+= .

87
I. JavaScript



,
-.


,
.

1. 02_01 .html -
02.
HTML- ,
CSS. JavaScript.
-.
2. h1 ( )
s c r ip t ,
:

<hl>
</h1>

< s c r ip t>
< /s c r ip t >

HTML- :
, .


HTML5.
XHTML 1.0 HTML4.01, t y p e = j a v a s c r i p t "
< s c r i p t > :
<s c r ip t t y p e = " t e x t / j a v a s c r i p t ">.
; ,
W3C.

3. s c r i p t
:
var firstName = '';
var lastName = '';

88
2. JavaScript

(firstName
lastName) .

.
4. :

docu m e n t .write ('< > ');

1, document.write ()
-.
HTML- .
' <>' ,
HTML-. HTML-
document, write () .
JavaScript ,
, .


HTML-
-, d o c u m e n t .w r i t e ( ) .
4.

5. Enter JavaScript:
d o cument.w r i t e (firstName + ' ' + lastName);

,
3. +
, document.write()
HTML- . ,
firstName '', ,
lastName ''.
: ' '.
6. Enter
d ocum en t. w r i t e ( ' < / > ' ) ;
:

< script type="text/javascript">


var firstName = '';
var lastName = '';

89
I. JavaScript

document.w r i t e ('< p > ');


document.write(firstName + ' ' + lastName);
document.w r i t e ('< / p > ');
</script>

7. ,
(. 2.2).


. , , ,
.

, ,
Firefox,
Safari, Chrome Internet Explorer
1.
8.
, :

var lastName = '';

.
: . _ 02_ 0 1.html
.

. 2.2. , ,
, , ,
,
JavaScript

90
2. JavaScript


, ,
,
.
, prom pt ()

, .
1. 02_02.html -
02.
,
s c r i p t . s c r i p t :
, . JavaScript,
, , -,
, ; -,
- ,
.
2. s c r ip t ,
, :

< s c r ip t>
var name = prom pt(' ? ', ' ' ) ;
< /s c rip t>

prom pt ()
a l e r t (). ,
(. 2.3). prom pt ()
, . . 2.3 ,
:
( ?).

,
.
, ( ' ' )
.
, , ,
, . ,
,
.

91
I. JavaScript

. 2.3. prompt ()
. :
,

prom pt () ,
, .
JavaScript name.


. ,
- .

. prompt ()
, name.

3. .

, .
, .
,
. ,
.
.
4. .
s c r i p t ,
:

<script>
document .w r ite ( ' <> , ' + name + '< / p > ' ) ;
</script>

, .
, : -

92
2. JavaScript

, ,
, -.
5. .

,
. , - (. 2.4).
!
.

. 2.4.


, ,
, , ,
.
(,
).
( -),
.

,
JavaScript, ,
. ,
, ,
:

93
I. JavaScript

var iteml = ' Xbox 360'


;
var item2 = ' ';
var item3 = ' ';

, ?
: var item4, var item5 . . ,
,
, .

, JavaScript
, .
.
, .
, , .
,
. ,
. ,
.

. 2.5.
. ,


. , ,
,

. ,
, , ,
(. 2.5). .

94
2. JavaScript

,
, .

-
( ),
, :
.
,
, .
,
[ ]. , ,
, :
var days = [' ', '', ' ', '', '' , ' ', '' ];

[ ] .
JavaScript , .
, :
var playList = [];


, .
, ,
. ,
,
-. ,
, ,
, (
).


JavaScript

A rr a y :
v a r d a y s = new A r r a y ( ' ' ', ' , ' ' ) ;
, ,
( ),
,
.

95
I. JavaScript

. ,
,
:

v a r p r e f s = [1, - 3 0 .4 , ' www. eksm o. r u ' , f a l s e ] ;



. .

, ,
.
,
, , .
:

v a r a u th o r s = [ ' ',
' ',
' ',
' '
];
, JavaScript
, , ,
,
, .


, ,
: var authors = [ ' ',
Enter, , ,
' '
.

,
. , a l e r t (lastN am e)
, lastN am e. ,
96
2. JavaScript

,
, . ,
, .
,
. ,
,
. :

v a r days = ['', '', '', '', ' ', '', ''];


a l e r t ( d a y s [0]);

''. , ,
0, 1. ,
.
(5) 1,
4. ,
. . 2.4 , days
( , ),
.

. 2.4. ,
1


0 d a y s [0]
1 d a y s [1]
2 d a y s [2]
3 d a y s [3]
4 d a y s [ 4]
5 d a y s [5]
6 d a y s [6]

,
. ,
days, :

d a y s [ 0 ] = '';


,
, ,
. , ,
97
I. JavaScript

, .
length,
length. , d a y s .length
days ( ,
, playList, :
playList.length).
:
days[days.length-1]

,
(, 0 days [ 0 ] ).
,
: days . length-1
(
7) . , days [days .
length-1 ] days [6 ].

,
:
var i = 0;
alert(days[i]);
alert (days [0] ) ;.
,
.

,
, .
. JavaScript
.

,
, ,
. ,
properties:

var properties = ['red', '14px', 'Arial'];

98
2. JavaScript

.
,
. ,
p r o p e r t i e s [ 2 ]. :

p r o p e r t i e s [3] = ' b o l d ' ;

' b o l d '
, : [ ' r e d ' ,
'1 4 ' , ' A r i a l ' , 'b o l d ' ]. , ,
, ,
, , ,
l e n g t h ,
, . ,
:

p r o p e r t i e s [ p r o p e r t i e s . length] = ' b o l d ' ;

pus h (),
, .
p r o p e r t i e s :

p r o p e r t i e s .p u sh ( ' b o ld ');

(
'b o l d '), .
, , ,
, .

pus h () ,
. ,
p r o p e r t i e s ,
:

p r o p e r t i e s . p u s h ( ' b o l d ' , ' i t a l i c ' , ' u n d e r l i n e d ' );

,
u n s h i f t (). 'b o l d '
p r o p e r t i e s :
var pro p erties = [ ' r e d ', '14px', ' A r i a l ' ];
p r o p e r t i e s . u n s h i f t ( ' b o l d ' );

99
I. JavaScript

p r o p e r t i e s
: [' b o l d ' , ' r e d ' , ' 1 4 ' , ' A r i a l ' ].
pus h (),
u n s h i f t () :
p roperties.u n s h if t(' bold' , ' i t a l i c ' , ' underlined');


, ,
, .
, push ( ' ') .
( ),
, :
authors.push(' ');

,
. . 2.5 .
,
. ,
, , .
, ,
.
. ,
( ),
, .

. 2.5.


var = [ . l e n g t h ] =4 [0,1,2,3,4]
. le n g t h [0,1,2,3]

var = .p u sh ( 4 , 5 , 6 )


00

p u s h () [0,1,2,3]



var = . u n s h if t ( 4, 5) [4,5,0,1,2,3]
u n s h i f t () [0,1,2,3]


100
2. JavaScript

,
, . , ,
,
.
,
, .
(
), push ().

pus h () u n s h i f t () .
pus h () u n s h i f t ()
:

var = [0,1,2,3];
var to ta llte m s = p.push(4,5);

t o t a l l t e m s
6, .

,
pop () s h i f t ().
, . . 2.6 .

. 2.6.


p o p () var = [0,1,2,3] p . p o p () [0,1,2]

s h i f t () var = [0,1,2,3] . s h i f t () [1*2,3]

pus h () u n s h i f t (), pop ()


s h i f t ()
.
. ,
rem ovedltem :
var = [0,1,2,3];
v a r rem ovedltem = p . s h i f t O ;

101
I. JavaScript

rem ovedltem 0,
[ 1 , 2 , 3 ] .



p u s h u n s h i f t ()
p o p () s h i f t ()

, .
. , ,
, , .
,
, , ,
. .
. ,
, .

. ,
p u s h ( ) s h i f t ( ) . ,
p l a y l i s t . ,
p u s h ():
p l a y l i s t . p u s h ( ' Y e l l o w S u b m a r in e 1) ;
,
, ,
:
n o w P la y in g = p l a y l i s t . s h i f t ( ) ;

n o w P la y in g .

, , , -.


- _.
htm l,
. .
,
, . ,
JavaScript
jQuery.

102
2. JavaScript

-


.
, .



JavaScript 1, ,
.

1. 02_03.html -
02.
,
. ,

script.
2. script
:

<script>

var authors = [ ' ',

' ',

' ',

' '

];
</script>

JavaScript,
.

, : var authors = [ '


', Enter,
, , '
' .

103
I. JavaScript


HTML- ,
, C o u r ie r C o u r ie r New, HTML- JavaScript-
. ,
, (
).
, .

,
,
. ,
,
. a u t h o r s
(
). .
3. s c r i p t ,
:

<script>
document.write(!<> <strong>!);
document .write (authors [0] + 1</strongX/p>!) ;
</script>

< s t r o n g > HTML-.
a u t h o r s ,
< / s t r o n g > </> HTML.

a u t h o r s [ 0 ], 1.


. .
, , , 2
3, .



JavaScript- (.
1).

104
2. JavaScript

4.
:
document.write(1<> <strong>?);
document .write (authors [4] + 1 </strongX/p>!) ;
, ,
.
. undefined
( ) (. 2.6). , .

. 2 .6.
u n d e f i n e d ( )

, ,
1
. a u t h o r s
,
a u t h o r s [ 3 ].


,
, u n d e f i n e d (
). ,
.

,

.

105
I. JavaScript

5.
. 4
:
d ocum ent . w r i t e (1<> < s t r o n g > ' ) ;
docum ent. w r i t e ( a u t h o r s [au th ors . le n g th -1 ] + ' </*-*
s t r o n g > < / p > 1);


l e n g t h .

a u t h o r s . l e n g t h . 4.

, 1 ,
, 1
,
: a u t h o r s [ a u t h o r s . l e n g t h - 1 ].


J, , ,
JavaScript .

, J , ,
.
,
( J).

,
.

6. ,
5:
a u t h o r s . u n s h i f t ( ' ' );
, u n s h i f t ()
.
a u t h o r s : [' ' , ' ' ,
' ', ' ', ' '].

7. ( ),
:
106
2. JavaScript

d o cument.w r i t e (1<> <strong>');


d o cument.write(authors[0] + 1</strong></p>');
document.w r i t e (1<> <strong>!);
document.write(authors[authors.length-1] + 1 </<-*
strong></p>1);
aut h o r s .u n s h i f t (' 1);
document.write(1<> , <strong>1);
document.write(authors[0]);
document.write (1</strongX/p>1) ;

.
, . 2.7. - , ,
.

. 2 .7.


, -
document .write (), ,
, ,
length, , d a y s .length. ,
, .
,
JavaScript. .
JavaScript,
-, .

107
I. JavaScript

, .
: , ;
, , , . . -
: , .
- , ,
, . . 2.7
,
.

. 2.7.




JavaScript : , ,
, . .
, JavaScript .
. ,
, ,
(, a l e r t () ),
(. 2.8).


,
, , w r i t e ( ) .

JavaScript
. , l e n g t h ,
w r i t e ().
,
, .
. , d o c u m e n t . w r i t e ()
w r i t e () document.
, : . .
() (
).

108
2. JavaScript

. 2.8.

document title
url
w r i t e ()
[' ', ' 1, ''] length
p u s h ()
p o p ()
u n s h i f t ()

, , ,
JavaScript
(). , :
var first_name = '';
var last_name = '';

.
,
, , (
16).
(
), .


w indow ,
. - -. ,
a l e r t () p ro m p t () w indow
: w i n d o w .a l e r t () w in d o w ,
p ro m p t ( ) . , w indow
-, ,
a l e r t ( 1 1 ) w in d o w . a l e r t ( 1 1) .

,
. ,
JavaScript:
var first_name = ''; //
var age = 3 2 ; //
var valid = false; //

109
I. JavaScript

, ,
, . ,
dat a, ,
, :

v a r d a t a = f a l s e ; / /
d a t a = 3 2 ; / /

, ,
. ,
, JavaScript,
j Query,
.


JavaScript
(string, number, Boolean . .).
t y p e o f ,
, . :
v a r d a ta = 32;
a l e r t ( t y p e o f d a t a ) ; / / : "num ber"
d a t a = ' 1;
a l e r t ( t y p e o f d a t a ) ; / / : " s t r i n g "
:
JavaScript
.
.

, . , d o c u m e n t .
w r ite ().


, ,
, .
, , ! -,

, ,
- JavaScript. ?
? ?

110
2. JavaScript

,
, . ,

, . JavaScript
.
HTML CSS,
. ;
JavaScript ,
, .


:
//

JavaScript:
var price = 10; //

JavaScript ,
/ / . .

,
/ * * /. (
CSS.) JavaScript
. ,
.
:

/*
JavaScript -:


*/
/ * * /
. JavaScript
:
/* */

,
/ / .
/* * /.

111
I. JavaScript


,
.
, - ,

. , ,

.


,
.
,
,
JavaScript 16, ,
JavaScript .


JavaScript. ,
, ,
( )
.

, JavaScript j Query
:

/* !
* jQuery JavaScript Library vl.11.0
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright 2005, 2014 jQuery Foundation, Inc. and
other contributors
* Released under the MIT license
* http://jquery.org/license

112
2. JavaScript

* Date: 2014-01-2321:02Z
*/

: , , -,
HTML-, . .


. , ,
.
.
,
, ,
, , :

//

, ,
. , ,
, . ,
alert (1 f), ,
(
).

JavaScript.
,
, .
, ,
:
var = '';

var b = '1;

a l e r t ( + ' 1 + ) ; // ' ';

,
, .
, , -
, , -.
113
I. JavaScript

, ,
.

JavaScript,
, .
, ,
. ,
char At () .
, ,
:

var = " . ;
a l e r t (.c h a rAt(2)); // fc f

/ / 1 1, ,
, ,
. , , .
, 0. charAt (2)
.
3

, JavaScript.

, .
,
. ,

,
.


: -
?, ?, ?
. . . ,
. ,
: ?,
?, (
)?.

, , ,
. :
?. , .
, .
, .
,
.

JavaScript
, . ,
,
. ,
; , - .

115
I. JavaScript


:
.
.
, ,
.
. , -
- (, ,
. .), .
, ,
.
.
, , ,
, . ,
,
.

. 3 .1 . , .
JavaScript, (examplecolumn.appspot.com/game),
, -
. , , ,
,
-

116
3.

.
, :
, ?,
,
.

. 3.1 ,
.

, /
, , :
, .
:

if ( ) {
//
}
: i f ,
, , ;
, ,
( ); ({})
JavaScript-, ,
.


//
. , , ,
, .

2.

.
, , ,
100 . ,
.
, 100. JavaScript,
, :
117
I. JavaScript

if (sc o re > 100) {


a l e r t (1 ! 1);
}
score > 100. , ,
score 100. ,
!;
100, JavaScript
. . 3.2
.

. 3.2.
, . ,
,

> (),
, (. 3.1).

. 3.1 .



= = . .

!= . .

. , .
, (,
), . ,
2 ' ==2 , ' 2 ' ===2 ,
( ),
.
,

118
3.

.
( p ro m p t () )
12 ', 2.
(.
2)
. ,
, . , 12 ' ! = 2
, 12 1 ! ==2 ,
,
> . ,
. , 2>1 ,
2 , 1, 2>3 , 2 3
< . ,
. , 2<3 ,
2 , 3, 2<1 , 2 , 1
>= . ,
. , 2 >=2 ,
2 2, 2>=3 , 2 3, 3
<= . ,
. , 2 <=2 ,
2 2, 2<=1 , 2 1, 1


( Tab)
, .
( )
, ,
.
.
, .
.

, .
, JavaScript,
: ?.
answer.
:

if (a n s w e r = = 3 1 ) {
a l e r t (1 . 31 . 1);
}

119
I. JavaScript

(==) .
JavaScript , .
, JavaScript
,
:

var score = 0 ; // 0 score

JavaScript
,
, ,
.

== (
), , .
, .
1r e d 1,
.
:
if ( e n te r e d C o lo r == f r e d ! ) {
document.b o d y .style.backgroundColor=1r e d 1;
}


,
. CSS
JavaScript
CSS 4.

, ,
:

if (a n s w e r != 31) {
alert ("! .");
}
, ! =
. , ,
answer, 31, ,
, .

120
3.

, ,
, .

JavaScript. ,
,
.
,
1.
:
if (answer == 31) {
alert (' . 31 . 1);
numCorrect += 1;
}


2, : n u m C o r r e c t += 1
1 n u m C o r r e c t.

JavaScript
,
.



2
: true () false ().
, ,
, .
,
. ,
:
v a r = 4;
if ( == 4 ) {
//
}

121
I. JavaScript

4 .
: 4
? , JavaScript,
.
: JavaScript
, , .
( ),
.
, .
,
, , -
. ,
,
- valid
true. , ,
.
,
, valid
false. , ,
valid, - true,
. false (
), -
, :
var valid = true;
//
// ,
// valid false
if (valid) {
//
} else {
//
}

, ?

, . ,
, , ,
- . i f

122
3.

, else. ,
, ,
. , :

if (answer == 31) {
alert (1 . 31 . 1);
numCorrect = numCorrect + 1;
} else {
alert ("! . ");
}
-:
(. 3.3). answer
31, ,
.

. 3.3. i f / e l s e
, . ,
, (); ,
, e l s e ()


else, .
, ,
. ,
.


: , ,

123
I. JavaScript

: , 1, 2
3? .
, .

, :
?.
, . ,
: 1500 ,
(
).

1500 , :
1000 , .
1000 , : 500
, . , , 500 ,
: .

JavaScript
, e l s e i f ( ... ).
: i f ,
1, e l s e i f (
... ) ,
; ,
.
JavaScript:

if () {
// #1
} else if (2) {
// #2
} else {
// #3
}
, JavaScript-
.
, , ,
( ?). prom pt (),
2,
i f / e l s e i f (/
... ) , :

124
3.

var fridayCash = p r o m p t (1
?1, 11);
if (fridayCash >= 1500) {
a l e r t (! , .1);
} else if (fridayCash >= 1000) {
a l e r t (1 . 1);
} else if (fridayCash >= 500) {
a l e r t ( f .');
} else {
a l e r t (', .1);
}
:
, ,
. , ,
fridayCash. : ,
, 1500? ,
, .

. JavaScript
else if else.
,
JavaScript , ,
JavaScript , ,

(. 3.4).


JavaScript
. JavaScript
,
t r u e f a l s e . ? ,
.

, 700.
, 700 1500.
JavaScript , ,
e l s e i f : 700 1000?

125
I. JavaScript

, ,
, else if :
, 700 500.
, :
, ,
.

. 3.4. ,
, , .
, ,
. _.1


. ,
:

var fridayCash = p r o m p t (1 -1
?1, '1);
if (fridayCash >= 500) {
a l e r t ( . 1);
} else if (fridayCash >= 1000) {

126
3.

a l e r t (1 . 1);
} else if (fridayCash >= 1500) {
a l e r t (? , . 1);
} else {
a l e r t (1, . 1);
}
, ,
,
. 3000 ., :
3000 >=500?. , ,
,
,
.

,
, < >.
,
. ,
,
,
if / else if /.



, ,
. switch (.
JavaScript 16).

,

. ,
, ,
, ,
(
). , JavaScript
.
127
I. JavaScript

,
. , ,
, .
, .
, .
JavaScript ,
( &&).
.
, ,
1 10, :
if ( > 1 66 < 10) {
// 1 10
alert (" " + + " -1
1 10");
}
: > 1 :
1?; < 10 ,
10. JavaScript,
, , .
, 0,
( < 10) (0 10), (0 1).

. &&
:
if (b>o && > && >) {
// 0
}
, ,
0. 0,
.

,
. ,
.

128
3.

N,
. ,
, ( )
N ( , CapsLock).
... : .
, | | ,
:
if (key == fn f || key == fN f) {
//
}


| , S hift+\.
, | ,
Enter.

,
JavaScript , ,
.
,
. , JavaScript
. ,
(
). ,
,
:
if (gas <= 0 || time <= 0 || cars <= 0) {
//
}

.
,
:
if ((key == 1n 1) | | (key == 1N 1)) {
//
}

129
I. JavaScript

,
.
, .

- , , ,
, (
), S
. ,
, .

JavaScript ,
>
(! ). ,
( : ! =).
,
,
,
, .

,
- .
, valid,
true false (. ).
, ,
(, ,
). (
, ), valid
: valid = false.

,
,
:

if (! valid) {
//
//
}

! valid ,
: valid ,
130
3.

. ,
, ,
. ,
true, ! false,
.
, (
: , ,
, ).

,
, ,
. ,
.
,
.
, ?
.
, ,
. ,
, , , ,
,
, :
if (dayOfWeek == '1) {
var fridayCash = prompt (1 *-*
?1, 11);
if (fridayCash >= 1500) {
a l e r t (! , .');
} else if (fridayCash >= 1000) {
a l e r t (! .1);
} else if (fridayCash >= 500) {
a le r t ( ! . 1);
} else {
a l e r t (', .1);
}
}
131
I. JavaScript

, ,
dayOfWeek, 11.
, ,
,
. , (dayOfWeek == 11)
.
dayOfWeek 1,
, .


. (), {}, if else.

, .
, JavaScript,
.
.

.
, , JavaScript,
, . ,
:
if (dayOfWeek == 1 1) {

}
, i f
, Enter,
. , ,

JavaScript.
.
:
if ( < 10 && > 1) {

alert (" " + + " -1


1 10");

132
3.

( Tab)
, ,

. ,
:

if ( < 10 && > 1) {


//
//
alert (" " + + -1
1 10") ;
if (==5) {
//
//
a l e r t ( + " .");
}
}
= .

:
if (name == '1) {


:
if (name = '') {

,
! !
name. JavaScript ,
, , .




JavaScript.

.
133
I. JavaScript


1
.

1. 03_01.html -
.
.
s c r i p t .
2. s c r i p t
:
<script>

var luckyNumber = prompt (1 4-1


?1,11);
</script>

JavaScript,
, , luckyNumber.
, ,
.
3. s c r i p t ,
, :
<script>

if (luckyNumber = 7 ) {
</script>

He (==),
.
; , 7.
4. Enter
, :
<script>

if (luckyNumber == 7 ) {

}
</script>

134
3.

.
JavaScript, ,
, .


,
, ,
.

5. .
:
document.write ("<>, 7 -1
! </>");

,
, . JavaScript
.
6. . 7
.
: , 7
! . ,
, (

1). ,
. .
, .
7. ,
:
<script>
if (luckyNumber == 7 ) {
document.write ("<>, 7 -1
!</>");
} else {
document .write (11<> 11 + luckyNumber +
" !</>");
}
</script>

135
I. JavaScript

, ,
7, ,
. ,
else if
.


s c r i p t
s c r i p t
?
d o cu m e n t . w r i t e ()
d o c u m e n t,
w r i t e () , ,
h i.
s c r i p t ,
.
p rom p t () (, ), ,
, .
JavaScript ,
, ,
,
. , .
, p ro m p t () ,
.
,
d o c u m e n t . w r i t e ( ).
, JavaScript-
.

8. ,
:
<script>

if (luckyNumber == 7 ) {

document.w r i t e ("<>, 7
!</>");

} else if (luckyNumber = = 1 3 || luckyNumber ==24) {


document.write ("<>. " + luckyNumber + "? <-J
!11) ;
136
3.

} else {

do cument.write (11<> " + luckyNumber + 11 <-*


!</>");

}
</script>

,
luckyNumber 7. - ,
else if.
: luckyNumber == 13 luckyNumber == 24. | | (
)
, .
13 24,
.


,
S hift+ \.

13
.
, . ,
,
:
!. ,
, .
9. ,
s c r i p t ,
:
<script>

var luckyNumber = p r o m p t (1
? 1, 11);

luckyNumber = parselnt(luckyNumber, 10);


</script>


luckyNumber parselnt().
137
I. JavaScript

JavaScript ,
, -20,0,1,5 100.
16. , , ,
-. parselnt () ,
JavaScript NaN,
.
, .
10. , , :
<script>
var luckyNumber = prompt (1 -1
? 1, 11);
luckyNumber = parselnt(luckyNumber, 10);
if (isNaN (luckyNumber)) {
luckyNumber = prompt(1, -1
.1,11);
}
</script>

.
isNaN ( luckyNumber) JavaScript,
, . ,
, luckyNumber .
(,
), .
, ,
, .
.
,
. .
. , ,
, ,
. ,
, . , ,
.



_03_01 .html ( ).

138
3.




. , - 30 .
, ,
. , 30
, .
,
JavaScript ,
.


.
, JavaScript .
, .

while

w h ile ,
. w h ile :

while () {
/ / j a v a s c r i p t
}
w h ile .
, ,
w h ile . ,
, , > 10
answ er == f 1. ,
JavaScript , ,
.

,
JavaScript w h ile,

w h ile .
, JavaScript.
, ;
, (. 3.5).

139
I. JavaScript

. 3 .5. w h i l e JavaScript ,
( < 10)

, 1 5.
:

document.write(' 1 <br>');
document.w r i t e (' 2 < b r > ');
document.w r i t e (' 3 <br>');
document.w r i t e (' 4 < b r > ');
document.write(' 5 <br>');

, :
.
:

var num = 1;
while (num <= 5) {
document.write(' ' + num + '<br>');
num += 1;

, var num = 1 ;,
w h ile, ,
. .
. , num,
5, .
, num
1, ( 1 5),
document.write () '
1 1 (<br> HTML-, ,
,
).

140
3.


num += 1 (
, num ):
num ++
1 num
(. . 2.3
2 ).

num += 1 .
num 1,
(, 2),
(
+=,
2). JavaScript w h ile
, ,
, , ,
.
,
, .
, ,
:
var num = 1;
while (num <= 5) { //
document.w r i t e (1 1 + num + !< b r > !);
}
: 1
5?. , docum ent.
w r ite (). ( ) JavaScript
.
num - 1,
docum ent .w r i t e (). JavaScript
.
, : 1 1 1.

.
, 1 5, 1 100.
d o cu m en t. w r ite ()
:
141
I. JavaScript

v a r num = 1;
w h ile (num <= 100 ) {
d o c u m e n t.w r ite ( 1 ? + num + '< b r > ') ;
num = num + 1;
}
100 -
100 .

, ,
JavaScript . 2,
.
.
: ,
. .
, , . .,
. (
, ) ( ,
).

JavaScript

. , .
,
.
:

v a r days = ['1, '1, '', <-J


'', '', '', ''];

, ,
. ,
, ,
. , days
(), d a y s [0 ].
days [ 1 ] . .
,
w h ile :
142
3.

var counter = 0;
while (counter < days.length) {
document.write(days[counter] + ');
counter++;

, var counter = 0, (,
, ) counter,

. counter < days .length
, counter
( 2 ,
length).
,
counter , 7 ( ).
7, :
( ), counter
1 ( counter++ , counter
+= 1, counter = counter + 1 (. )).
.
, (. 3.6).

days [c o u n te r ] co u n te r
c o u n te r c o u n te r ++
0 0 < 7 days[0] 1
1 1 < 7 days[1] 2
2 2 < 7 days[2] 3
3 3 < 7 days[3] 4
4 4 < 7 days[4] 5
5 5 < 7 days[5] 6
6 < 7 days[6] 7
7 7 < 7

. 3 .6 . 8 .
, 7 7.
, , JavaScript
.
: , , , ,
, , ,.
. ,
j in ().
16

143
I. JavaScript

for

JavaScript fo r .
( ). f o r
.
,
.
f o r ,
w h ile , .
, , w h ile:
v a r num = 1;
w h ile (num <= 100) {
d o c u m e n t.w r ite ( ' ' + num + ' < b r > ') ;
num += 1;
}

:
f o r (v a r num = 1; num <= 100; num++) {
d o c u m e n t.w r ite ( ' ' + num + ' < b r > ') ;
}
f o r
, , fo r,
. f o r fo r ,
(
), .

w h ile ,
(d o c u m e n t.w r ite ( ' ' + num + ' < b r> ' ) )
) JavaScript, .

. 3.2 .
(v a r num = 1 ;) .
.
, ,
. ,
(
) ,
.

144
3.

. 3.2. f o r

fo r f o r
v a r num = 1 ;
num 1
num <= 1 0 0 ; num
1 0 0 ? ,
. ,


num++ 1 num.
, num = num + 1 + = 1 .

f o r
,
.

w h ile . 3.5,
, f o r
:

v a r days = [11, ' ', ' 1, -*


1 ', '1, '', ''];
fo r (v a r i= 0 ; i< d a y s .l e n g t h ; i++) {
d o c u m e n t.w r ite ( d a y s [ i] + ' , ') ;
}



for. , ,
i. ( i, j z)
;
, ,
, counter.


, ,
. ,
( ,
). :

145
I. JavaScript

var example = [1 1, 1 1, 1 1, '1];


for (var j = example.length - 1 ; j >= 0; j ) {
document.write(example[j ] + 1< b r > 1);
}
j
1 (4-1=3). ( 1?
, 1
: 0, 1,
le n g th 1.
,
exam ple [ 3 ].)

,
j 0. ,
. j 1 ( j ),
.

, ,
( 3) (
0).

do /while

, ,
do /while. , while.
:

do {
// javascript
} while () ;

,
. JavaScript,
, .
,
.

, , .
, .
, , .

146
3.

. -
, . ,
,
.
do /while,
, , , .
, ,
:
1. 03_01.html,
:
,
_03_01.html.
do/while.
2.
s c r i p t
, :
var luckyNumber = prompt (1 4-1
? 1, 11);

luckyNumber = parselnt(luckyNumber, 10);

if (isNaN(luckyNumber)) {
luckyNumber = prompt (1, -1

}
.
. do /while.
3. (
var luckyNumber) :
do {

.
.
4. JavaScript
: } while (isNaN (luckyNumber)) ;.
:

147
I. JavaScript

do {

var luckyNumber = prompt (1 <_J


?1, 11);

luckyNumber = p a r s e l n t (l u c k y N u m b e r , 10);

} while (isNaN(luckyNumber));

.
.
, , ,
.

: do
JavaScript, do /while.
,
. .
,
: , ,
, . ,
. ,
, . ,
,
, .

do-while .

:

, ,
(
). , , ,
,
: ,
.... , ,
: ,
. ,
.
. : ,
, . JavaScript
, .

148
3.

,
, .
,
, , .


. , -
, 50 . -
, ,
, ,
. , -
, . , ,
50 ,
50 . ,
50 , .
,
.
, , .

function {

// JavaScript,

}
function JavaScript ,
, ,
if, if/else, var,
. ;
, . ,
(.
2). ,
, , calculateTax, getScreenHeight,
update Page fade Image. ,
, .

,
. ,
, JavaScript , ,
. if,
JavaScript.

149
I. JavaScript


i f / e l s e ,
, JavaScript,
.
( ).

,
_ :

function p ri ntT oda yO {

var today = new Date();

document.write(today.toDateString());

}
printToday.
JavaScript, ,
( toDateString () ),

document . write (). ,
,
16.

,
, . ,
, ,
, , .
JavaScript , , ,
, .

? ,
, , .
,
. , printToday,
:

printToday();

, .
, ,
.

150
3.


, ,
. , p r i n t T o d a y ,
p r i n t T o d a y () .

.
.

1. 03_02.html.

2. s c r i p t
:
function printToday() {
var today = new Date();
document.write(today.toDateString());

}
, .
3. .

. - ,
. ,
, , .

4. 03_02.html.
,
str o n g ,
:
<> <strong>

< s c r ip t>
printToday();
< /s c r i p t >
</strong></p>

151
I. JavaScript

(. 3.7).
.
, , , .

. 3 .7. . ,
, , .
,
, p r in tT o d a y

,
. ,
. , , ,
, .
, , :
!. , ,
, .
, ,
. , , .
JavaScript ,
,
. ,
, ,
.
, ,
. :

152
3.

function ( ) {
// JavaScript,
}
,
(.
2). ,
, -
. ,
do cument.write () :

function print(message) {
do cument.write(message);
}
print, message.
, (,
), document.
write () . ,
, , -
:

print (1, .');

print
1, . 1,

. ',
. ' . ,
, ,
.

, ,
,
. ,
. 3.8.
1. JavaScript
.
, .
2. , ',
. '.

153
I. JavaScript

3. , ,
m essage. : var
m essage = ', ';.
4. , , -
, m essage.

. 3.8. , .
p r in t () ,

.
.
:
function ( 1 , 2 , ) {
// JavaScript,
}

, :

(1 , 2 , 3 );

1
1 2 2 . .
, , , ,
-, HTML- ()
.
.
:

function print(message,tag) {
document.write ('<'+ tag +'>'+ message + '</'+-*
+ tag +'>');
}

154
3.

:
p r i n t (1, . 1, ! !);

: 1,
. 1 ! \ : message
tag. : <>,
.< / > .


, JavaScript, ,
.

-, ,
, ,
. -
,
, . ,
, ,
, .
, JavaScript, ,
. , prompt () (.
2)
, , , .
,
- :
var answer = prompt (1 ?1, ' 1) ;

, ,
answer. ,

, JavaScript.

return, , :

function ( 1 , 2 ) {
// JavaScript,
return value;
}

155
I. JavaScript

, ,
. :
var TAX = 0.18; // 18%
function calculateTotal(quantity, price) {
var total = quantity * price * (1 + TAX);
var formattedTotal = t ot a l .toF i x e d (2);
return formattedTotal;
}
,
TAX ( ,
). .
, .
16.
. ,
formattedTotal.
, .
:
var saleTotal = calculateTotal(2, 16);
document.w r i t e (1 : ' + saleTotal);

2 16 .
,
.
saleTotal,
document.write () ,
.


return
, JavaScript
, return. ,
, .


. ,
, :
document.write(: 1 + calculateTotal (2, 16));

156
3.

,
1 : 1,
.
.
,
.


.
,
.
2.

,
.
- . , ,
,
.

.

,
. , ,
, :

v a r m essage = 1 ';
f u n c tio n w a rn in g (m e ssa g e) {
a le rt(m e s s a g e );
}
w a r n in g ( 1 1) ; / / 1
a le rt(m e s s a g e ); / / ' '

, m essage
( ), (
). ,
.
w a rn in g ( ' 1) ;
m essage. ,

157
I. JavaScript

m essage . m essage,
?

, ( 1
1) ( 1 1),
. ,
: 1 1 1 1.
m essage,
(. 3.9),

. 3.9. ,
f u n c t io n w arning (m essage) m essage,
. ,

JavaScript
, , .
,
. , .
,
.
, , ,
.
, , ,
,
.


.
, ,
, :

v a r m essage = ' ';


f u n c tio n w arn in g () {
v a r m essage = ' ';
158
3.

a le rt(m e s s a g e );
}
warning ();. / / 1
alert(message); //' '

m essage :
.
, , v a r m essage
,
. ,
,

.
, (
), .
,
. , , , m essage
,
:
var message = ' ';
function w a r n i n g () {
alert(message);
}
w a r n i n g (); // ' '


mess , , a l e r t (m e ssa g e ),
m essage. ,
,
' '.

,
:
,

v a r.

. 3.10 .
, mes sag e
s s age .

159
I. JavaScript

var message = 1
; . var, .

. 3.10.
var.
message = 1 ;
, mes sage
. ? ,
.

. 3.10. ,
. ,
, ,
var ( ).
var,
( )


, , ,
. . :

160
3.

, , , ,
, ,
. ,
.



. ,
.

.

, ,
. ,
:
. ,
, .
prom pt ().
.
,
.
, .
, .
.
,
a l e r t ().
. ,
.
,
.
a l e r t (), docum ent,
w r ite ().

.

. , JavaScript,
,
:

161
I. JavaScript

var answerl=prompt(1 ? 1, 11);


if (answer == 1 ) {
a l e r t (1 ! 1);
} else {
a l e r t (f, : l 1);
}
var answer2=prompt(' <-J
?1, 11);
if (answer2 == 31) {
a l e r t (1 ! ');
} else {
alert (1, : 3 1 1);
}
,
. .
,
. ,
,
, .
1. 03_03.html.

,
.
2. s c r i p t
:
var sc o r e = 0;

,
. ,
, 0.
.
3. Enter, ,
: var q u e s tio n s = [.

, , ,
, .
.

162
3.

,
2.

4. Enter,
, ] ;. :
v a r s c o r e = 0;
v a r q u e s ti o n s = [
];
,
. ,
, .
,
.

,
an sw ers [ ], .
, an sw ers [],
, epoyeeyaccaanswers [ ].
,
. ,
q u e s ti o n s [ ], answ ers [ ].

.

, (
, ) .
, , ,
, an sw ers [ ]
q u e s tio n s [ ]. , ,
.

5. [ ]
, :
v a r q u e s ti o n s = [
[' ?1, 1],
];
[ ' ? ' , 1] ,
. , .

163
I. JavaScript

questions [].
, .
questions []
, .
6. Enter, ,
, :
var questions = [

[' ? ', 1 ],
[' ?', 31],
[' ?', 0]
];
.
, .
.
,
.

,
, .
. . ,
(.
).
7. ] ; (
q u e s tio n s [ ] ), Enter,
, :

for (var i=0; i<questions.length; i++) {

for (. for).
: i
0. -, ,
. i<questions.length ,
if /else. , i,
questions[]. ,
. i
, .
, i++ i
( 1).

164
3.

JavaScript,
.
8. Enter, ,
:

askQuestion(questions[i]);

,
, . ,
, askQuestion (). , ,
questions[i].
, ,
, questions [0] ,
questions [ 1 ] . .

,
.
. ,
.
9. Enter, ,
} .
:
for (var i=0; i<questions.length; i++) {

askQuestion(questions[i]);

}
, ,
.
askQuestion ().
10.
fo r .
, ,
, .
,
.
, score questions,
, ;
, ,
( , ).

165
I. JavaScript

11. :
function askQuestion(question) {

}
.

. ,
.


question. , ,
questions [],
8. question
questions [], , ,
, .
12. , :
function askQuestion(question) {

var answer = prompt(question[0], 1') ;


}
prompt ().
, , question [0].
question.
,
. , : [1
? 1, 1 ]. , question [0 ]
: 1 ? 1,
prompt () (
).

, ,
answer.
.
13. , ,
:
function askQuestion(question) {

var answer = prompt(question[0], fl);

166
3.

if (answer == question[1]) {
alert(1!1);
score++;
} else {
alert('. 1 + question[1]) ;
}
}
i f / e l s e . answ er
== q u e s tio n [1] , ,
(an sw er) ,
( q u e s t i o n [ l ] ) . , ,
(score+ + ). ,
, .

.
, .
,
, .
14. script
:
v a r m essage = ' 1 + s c o r e ;

1
1 .
, m essage : '
3 ,
.
15. Enter :
m essage += 1 ' + q u e s t i o n s . le n g th ;

' ',
, : '
3 3 1.
.
16. , :
v a r m essage = ' ' + s c o r e ;

167
I. JavaScript

m essage += 1 1 + q u e s t i o n s . le n g t h ;
m essage += 1 . 1;

d o c u m e n t . w r it e ( ! < p > f + m essage + ' < / p > ' ) ;

.
(. 3.11). ,
,
1.
_03_03.html.

q u e s t i o n s [ ] ,
.

. 3.11 . -.
, - (
4),
( 5) - ( 8)
- ,
-, .
, ,
prompt ()

, J avaScript,
.
, jQuery, ,
JavaScript
.
II
JQUERY

4. jQuery

5. /:

6.

7. ,
jQuery

8. -
4
JQUERY


JavaScript: , ,
.
( ,
), , ,
(, f o r ).
,
JavaScript. , , 1000 ,
JavaScript ,
.

,
JavaScript, j Query.
, jQuery JavaScript,

, j Query, : ,
, ,
.
j Query , 100
JavaScript. ,
, -
, , 1000 ,
JavaScript.

JavaScript
JavaScript
,
: , ,
, ,

. ,
,
170
4. jQuery

. , JavaScript
.

JavaScript ,
.
JavaScript,
-.
.
( )
- JavaScript.
JavaScript,
, Yahoo, Amazon, CNN, Apple Twitter.
jQuery (www.
jquery.com). JavaScript (.
), jQuery :
.
96 ( 1.11) 83 ( 2.1). (
- gzip,
38 !)
-, j Query ,
. ,
- CSS.
. jQuery
, ,
: Pinterest, MSN.com, Amazon, Microsoft.com, Craigslist ESPN.
, 57% *.
jQuery .
. !
. ,
jQuery: ,
,
. JavaScript,
-, ,
. jQuery, , ,
.
Microsoft Adobe

* w 3 te c h s. c o m /te c h n o lo g ie s/d e ta ils /js -j q uery /a ll/a ll

171
II. jQuery

, .
j Query , JavaScript,
.
, , j Query

JavaScript, j Query
, ,
, -.
,
,
- ,
. j Query, , .
,
j Query. 1 (.
JavaScript),
JavaScript .



jQuery JavaScript.
. ,
,
. :
Yahoo User Interface Library (yuilibrary.com ).
Yahoo, .
Yahoo, ,
.
Dojo Toolkit (d o jo to o lkit.o rg /)
.
JavaScript, .
, ADP, IBM
VMware.
.
M ootools (m ootools.net/) ,
.
,
-, , Ember.js (em berjs.com ), AngularJS
(angularjs.org) Backbone.js (backbonejs.org).

172
4. jQuery


,
JavaScript. , Underscore,
js (underscorejs.org)
JavaScript,
jQuery , AJAX
HTML.
,
, , Raphael (raphaeljs.com ),

.
, JavaScript.
jQuery.

, .

jQuery
jQuery JavaScript-,
JavaScript.
JavaScript (.
JavaScript 1),
. jQuery
-:
, Google, Microsoft jQuery.com
(. 4.1), jQuery
.

( )
(CDN, content distribution network), , jQuery
-,
, . :
-, -,
Google, Microsoft jQuery.com
. , CDN
, ,
. - , ,
, jQuery , , ,
, -, ,
, .
, , ,
173
II. jQuery

CDN, , -
jQuery,
. jQuery- Google
,
,
.

CDN : -,
,
. , ,
, ,
.
, jQuery jQuery.com (
, ) .
jQuery ,
, CDN- . (
, Google - ,
,
-.)

. 4.1 . jQuery.com
jQuery API- ( ,
jQuery ).
, , jQuery UI (
III ), jQuery Mobile ( -,
), Sizzle (
jQuery JavaScript,
-) QUnit ( JavaScript)

174
4. jQuery

jQuery, CDN

Microsoft, j Query Google


j Query -, .
, j Query 1.11.0 CDN
Microsoft
head - ( </
head>), , :

<script src="h t t p ://aj .aspnetcdn./aj/jQuery/*-1


jquery-1 .11.0.min.js">
</script>

CDN j Query
:
<script src="http: //code .jquery. com/*-1
j query- 1 .1 1 .0 .min.j s " x / s c r i p t >

CDN Google :
< script src=" //ajax.googleapis .com/a j ax/libs/*-1
jquery/1.11.0/j query.min.j s"></script>

,
CDN. CDN Google, -,
,
, CDN ,
Google. j Query 2 (.
), 1 .1 1 .0
2 .1 . 0 ( j Query,
jquery.com/download/). ,
CDN Google jQuery 2.1.13,
:
<script src="//aj .googleapis./ajax/libs/^
jquery/2.1.13/jquery.m i n .j s M>
</script>


jQ uery 1 2
jOuery.com 1 2.
?

175
II. jQuery

jQuery 1.11 2.1


.
jQuery 2 ,
6, 7 8 Internet Explorer.
Internet Explorer
,
JavaScript.
,
jQuery.
, Internet Explorer 6, 7 8
, jQuery
,
. Internet Explorer 6, 7 8
, 1 jQuery -
. , Internet Explorer 8 -
Internet
Explorer. jQuery
1.11. , jQuery 2,
Internet Explorer.
Internet Explorer 8
jQuery 1 ( 1.11).
, jQuery
, 2. 1
. , ,
, .
, jQuery 2
- ,
.


, CDN- Google
. http://,
CDN- Microsoft jQuery. URL-
. ,
. ,

https, jQuery
.
w w w .paulirish.com /2010/th e -p ro to c o l-re la tiv e -u rl/. URL-
:
-. URL-
, ,
-, .

176
4. jQuery

jQuery

jQuery
- .
, ,
jQuery, jQuery
, : jquery.com/
download/.
jQuery:
1. jquery.com/download/.
, CDN,
, jQuery.
2. 1. 2.x.
1.11,
.
Internet Explorer 8,
1.11. jQuery-
.
( 280 ),
, jQuery,
. (.
2), ,
. ( ,
, JavaScript.)
jQuery
-.
JavaScript-:
(, . .),
, .


JavaScript
, min , , njQuery-1.11.0.min.
js ,
jQuery 1.11.0.

3.
(Save Link As)
.

177
II. jQuery

, :
- ,
.
4. , ,
.
jQuery, ,
- JavaScript
. scripts, libsjs _js.


jQuery,
; jQuery 1.11.0,
jQuery 1.11.x. ?
jQuery .
jQuery
. , -

, jQuery ,
. ,
jQuery ,
-. ,
jQuery, ,
.
, , , .
jQuery
.
jQuery- - ,
jQuery ,
, , , ,
. ,
jQuery-, , ,
, ,
, , .
, , , ,
jQuery, .
. ,
, jQuery 1.9,
, ,
, jQuery,
, .

178
4. jQuery

, jQuery
, .
, , jQuery 1
2. ( , 2
, 1.11, Internet
Explorer 8 .)
, , jQuery 1.1, 1.2, 1.3 . .
, , ,

. . , , , 0
jQuery 1.11.0, -
( jQuery 1.11).
jQuery 1.11.0 1.11.3,
, , ,
, 1.11.0.
, ,
(jquery.com /dow nload/).
Release notes ( ).
, b lo g .jq u e ry.co m /2 0 1 4 /0 1 /2 4 /jq u e ry-1 -1 1 -a n d -
2-1 -relea se d/ 1.11.0 2.1.
, .
,
. , ,
, , ,
; ,
, ,
, .
jQuery , ,
, ,
jQuery.

jQuery

CDN- j Query,
,
jQuery, CDN.
, CDN- Google,
s c r i p t :

< s c r i p t s r c = " / / a j . g o o g le a p is . / a j / l i b s / -1
j q u e r y / 1 . 1 1 . /j q u e r y . m in . j s " > < /s c r i p t >

179
II. jQuery


CDN Google
. 1.11
1.11.0 ( < s c r ip t s r c = " a j . g o o g le a p is . c o m /a j / l i b s /
j q u e r y / l . 1 1 /jq u e ry .m in . j s " > < /s c r ip t> ) , Google
1.11, , 1.11.2.
jQuery 1.11.9, Google
. , (
jQuery)
1.11.0 1.11.2 ,
.

, j Query ,
-,
. j Query
js, ,
JavaScript 1.
, fya&Rjquery.js js
. ,
:
<s c r i p t s r c = fI j s / j q u e r y - 1 .1 1 . 0 .m in . j s " > < / s c r i p t >
j Query
,
.
s c r i p t j Query- :
<s c r i p t s r c = " j s / j q u e r y - 1 . 1 1 . 0 .m in . j s " > < /s c r i p t >
< s c r ip t>
$ (document) . r e a d y (f u n c tio n () {
//
}) ;
< /s c rip t>

< s c r ip t> ,
-, , ,
, , $ (docum ent) . re a d y ().
$ (docum ent) . re a d y () j Query,
, HTML- ,
.
180
4. jQuery

? ,
JavaScript
-: , ,
. .
-
, . JavaScript
HTML-, - . -
JavaScript ,
. (

. .
,
, JavaScript- ,
HTML-.)

, , HTML-
, . ,
$ (docum ent) . re a d y (): ,
HTML-, JavaScript.
, ,
JavaScript
. re a d y () ,
$ (docum ent) . re a d y ( f u n c tio n () {
}) ;.

, , :
jQuery ,
. ,
s c r i p t s c r i p t ,
j Query.
JavaScript- CSS
( , ). jQuery-
CSS,
JavaScript- , .
JavaScript-
( s c r i p t )
, </head> .
JavaScript, , / / ready,
}) ;,
re a d y (). :
181
II. jQuery

$ (d o c u m e n t). r e a d y (f u n c t i o n () {
//
}); // ready


. ,
j Query :
, .
, ,
.


jQuery
$ (document).ready(function() { }:
$ (fu n c tio n () {
//
}); // ready

-
JavaScript -
. JavaScript,
, .
, -
-,
JavaScript. , Google Maps (maps.google.com)
;
-.

Now (www.now.ru) ,
(. . 4.1).
JavaScript HTML-, .

, -,
JavaScript. ,
HTML,
. , JavaScript

HTML-.

182
4. jQuery

. 4 .2 . JavaScript -,
, . Now.ru
,

, -,
HTML CSS, ,
JavaScript
- -. ,
Datepicker jQuery UI
(
).
,
(. 4.2). ,
JavaScript
HTML CSS,
.

, HTML-
, d iv , t a b l e t d
( u i- d a te p ic k e r - m o n th , u i - d a t e p i c k e r - d i v
. .), .
, . ,
, HTML CSS.
JavaScript ,
,
.

183
II. jQuery

. 4 .3. jQuery UI (jqueryui.com)


-. , Datepicker ,
.
10

, JavaScript-,
,
HTML
CSS. Now.ru (. . 4.2)
JavaScript
,
( )
HTML CSS , !

JavaScript
-, , HTML-
CSS .
, HTML- CSS (
, - JavaScript
( 1)),
.
1. .

, -
, , JavaScript (
). ,
, (

184
4. jQuery

body);
,
JavaScript ,
-, ,
, .
2. .

, .
, -
.

. :
. d iv
.
.
-,
, : ,
. ,
.
. Now.ru,
. 4.2, ,
. JavaScript.
. ,
. ,
, ,
, , .
. ,
, ,

, . JavaScript
,
CSS.
, ,
JavaScript
.

,
. , ,

185
II. jQuery

.
,
. ,
- (
), (
),
( ).

. ,
, JavaScript,
.

(DOM)
HTML-,
(,
). ,
, ,
HTML . ,
HTML-, ,
.
(DOM, Document Object Model).

DOM , JavaScript
-.
,
-, HTML-
.
JavaScript W3C,
.
JavaScript
HTML-.
,
-:
<!DOCTYPE HTML>
<html>
<head>
Cmeta charset="UTF-8">
<title>Be 6-C Tp aH Hu a</ ti tl e>

186
4. jQuery

</head>
<body class=f,home">
<hl id="header11></11>
<>- <strong>a</strong> </>
</body>
</html>


, , html , body
, .
,
(. 4.4). html
( ),
, , head body,
.
, (
, hi . 4.4), ,
( . 4.4
<body>, <hl>).
( ),
.

. 4.4. HTML-
,
,

JavaScript
, -, ,

. document.getElementByld ()
187
II. jQuery

, HTML-
. di v
: <div id=flbanner">,
div :

document.getElementByld(1banner 1);

, document.getElementsByTagName ()
(,
document.getElementsByTagName (1 1),
() );

CSS- .


DOM CSS. , d ocument.
getElementsByClassName ()
. author,
:

document.getElementsByClassName(1author 1);

querySelectorAll (),
CSS
. , span
author, :
document.querySelectorAll(1s p a n .aut h o r ');

, j Query
CSS HTML ,
.

: jQuery
] Query
CSS.
-,
j Query. CSS
, ,
. , h i ,
h i; . c o p y rig h t, ,

188
4. jQuery

, ,
copyright:

< class="copyright">Copyright, 2015</>

j Query
, jQuery.
:

$ (1 1)

CSS 2.1
CSS 3, j Query (
, , Internet
Explorer CSS 3). ,
banner
j Query. :
$ ( 1#bannerf)

tbanner CSS,
banner; # ,
. ,
, - , j Query
. ,
HTML- . :

$ ( 1t b a n n e r 1) .h t m l (1<h l>JavaScript !< / h l > 1);

j Query
,
. ,
j Query .

CSS, ,
, CSS

j Query.

,
- -

189
II. jQuery

. .html.
.
j Query, (. 4.5).

. 4.5. .html, ,
jQuery.
( ), .
jQuery, ,
, .
, ,
. : c h e c k e d ,
(
)


,
.

,
, j Query CSS-
. , - HTML-:
< 11="5||> </>

190
4. jQuery

jQuery
:

var messagePara = $ ( 1#message1);

,
(message'),
CSS
( 1#message 1).

,
, CSS .

getElementsByTagName () jQuery
. jQuery.
,
,
:
var linksList = document.getElementsByTagName(1a 1) ;

jQuery, :
var linksList = $ ( fa !);


jQuery ,
.
, : api.jquery.
co m /c a te g o ry/se le cto rs/.


. , ,
;
,
. , JavaScript
,

.

191
II. jQuery



,
.
(Internet
Explorer8 ), , jQuery,
, .

, , navButton,
,
JavaScript , ,
.
, :
,
.

, j Query
.
CSS :
$ ( 1 .submenu 1)

, , CSS,
.
, ,
j Query. ,
.submenu, :

$ (1.submenu 1) .h i d e ();

j Query- hide ()
j Query 6.
j Query.


CSS

JavaScript.
,
, CSS , . CSS

192
4. jQuery

-,
, , ,
. CSS
jQuery, ,
JavaScript CSS ,
.
CSS,
:
HTML Dog CSS Tutorials (w w w .htm ldog.com /guides/
css/). ,
.
CSS3
,
( ,
).
jQuery
CSS , ,
CSS. ,
, .
, :
c s s . m axdesign. co m . a u /se le ctu to ria l/
d e ve lo p e r.m o zilla .o rg /e n -U S /d o cs/W e b /G u id e /C S S /G e ttin g _
s ta rte d /S e le cto rs/

jQuery CSS
. ,
:
, jQuery
-, , ,
.
,
. ,
navBar
u l : < ul id=,fnavBar">. jQuery $ ( 1 1)
.
,
:
$ (1#navBar 1)

193
II. jQuery

CSS: , ,
. , ,
( ),
, .
,
( ). ,
HTML-, . 4.4, h i
body, s tr o n g
( ).

, >, .
, ,
body, :
$ ( 1body > ')
,
. ,
,
. HTML-
(, h2),
d iv , .
d iv ( ) , .
j Query
:
$ ( 'h2 + d i v ')
,
+ ( :
, ).
, , .

, ,
, .
img,
a l t , a l t .
, ,
, .
,
. , img,
a l t , :
$ ( 1img [ a l t ] ' )

194
4. jQuery

:
[attribute] , HTML-
. , $ (a [href])
, href.
href, (<
name="placeOnPage"></a>),
;
[attribute=nvalueff] ,
. ,
, :
$ ( 1i n p u t [t y p e = " t e x t "] ')

(input),
(
, j Query
, . 8);
[attributeA="valueff] ,
. ,
, ,
:
$ ('a[hrefA= "http://"] )

,
. , href A= h t t p : / / ,
http://www.yahoo.com, http://www.google.com . .
mail to:
$ (fa[hrefA= lfmailto:fl] !)

[attribute$=flvalue " ] ,
,
. ,
, PDF
(, JavaScript
PDF
Adobe.com,
Acrobat Reader). , PDF-
, :
$ (1a [href $= 11.pdf ] f)

195
II. jQuery

[ a t t r i b u t e * = " v a l u e " ] ,
. ,
, .
, eksmo.ru:
$ (1a[href* = Mek s m o .ru "] 1)


, http://www.eksmo.ru, http://
eksmo.ru www.eksmo.ru/library.html.


jQuery ,
.
, , , .

8.

jQuery

jQuery ,
. , : even
.
, , ,
,
. ,
, . ,
, jQuery
:

$ ( 1t r : even 1)

t r .
,
striped:

$ ( f . s t r i p e d t r r e v e n 1)

: even :
: even : odd .
; ,
jQuery , -
196
4. jQuery

. , (.
2). jQuery
, ,
0 (. 2). ,
:even
(, 0, 2 4),
, ( . .) , ,
!
: odd , ,
(1, 3, 5 . .).
: f i r s t : l a s t
. ,
, :
$ ( 1 : f i r s t ' ) ;
, ,
:
$ ( 1 : l a s t ' ) ;
: n o t ( ) ,
. , ,
, navB u tto n :
$ ( 1 :n o t (.navButton) 1);

: n o t () ,
. . n a v Bu t t o n ,
. navBut ton.
: n o t ()
j Query. , ,
h t t p : / /, :
$ ('a:not ( [href = 11h t t p ://" ] ) 1)

: h a s () , .
, l i ,
:
$ ( 1l i : h a s () 1)
,
a; a l i , ,
.
197
II. jQuery

:contains() ,
. , ,
!, j Query:

$ ( 1 :c ontains( ! ) 1)

: hidden ,
, CSS display,
( , );
, , j Query- hide ()
( 6);
, ,
. ( ,
CSS- visibility invisible. )
, div.
, j Query :

$ (1d i v :hidden 1) .s h o w ();

d iv ,
. ( j Query
show ()
6.)
: visible : hidden.
.

jQuery


j Query, , $ ( 1#navBar 1),
,
g e t E l e m e n t B y l d () get El ement sByTagName().
,
j Query.
;
, ,
j Query.
,
j Query, ,
,
.

198
4. jQuery

DOM jQuery
. jQuery ,
JavaScript.

. , jQuery
:
.

,
,
(.
3) ,
- . ,
, (
- JavaScript),
, .


, jQuery
. , jQuery-
, ,
.

, d iv
s l i d e s h o w, ,
jQuery-:
$ ( 1#slideshow i m g ') .h i d e ();

$ ( 1# s l i d e s h o w i mg ')
50 . h i d e ()
, .
(
f o r -, ), ,
JavaScript.


. ,

199
II. jQuery

d iv ( popUp), JavaScript.
.
j Query :
$ (1#popUpf) .width(300) .height (300);

j Query ,
, .

, . ,
popUp,
.

j Query-
. ,
div,
( ).
:
$ (1#popUp 1) .width (300) .height (300) .text (1 ! 1) .
fadeln(1000);

j Query-: w i d t h (), h e i g h t (),


t e x t () f a d e l n () popUp.


jQuery-
,
:
$ (#popUp1) .width(300)
.height(300)
.text(1')
.fadeln (1000);
,
JavaScript .


j Query. ,
, j Query (
JavaScript)
.

200
4. jQuery


j Query
: HTML-
HTML
.


_.html,
, jQuery-.
, -
, ,
.

. ,
HTML-:

<div id=11container11>
<div id=" errors11>
<112>:</h2>
</div>
</div>

jQuery-,
.
. ht ml () HTML-
,
HTML-. ht ml ()
j Query.
HTML- . htm l ()
j Query. ,
, HTML- :

a l e r t ( $ ( f# e r r o r s f ) . h t m l ());

"<2>: </
h2>". h t ml () ,
HTML-,
.

201
II. jQuery

. ht ml () ,
:
$ ( 1t e r r o r s 1) . ht ml ( 1<> </> 1) ;

HTML-
e r r o r s . :
<div id="container11>
<div id=" errors11>
<p>B </>
</div>
</div>

, h2.
HTML-, ,
.


html () text ()
HTML- jQuery,
, HTML-
. , var
divContents = $ ( 1d i v 1) . html () ; ,
10 div, divContents
HTML- div .
, html () text ()
HTML- jQuery,
. , $ ( 1d i v 1) .
html ( ' <></>' ) ; HTML-
div .

. t e x t () . ht ml (),
HTML-. ,
, . ,
h2
:. ,
:
,
:
$ ('terrors h 2 1) .t e x t ( ');

202
4. jQuery

h2 , ,
. j Query HTML-,
t e x t (),
&l t ; p &g t ; . ,
.
, HTML-,
.
. append () HTML-
. ,
d iv ,
HTML- </div>.
. append ()
( u l ) (o l).
, HTML,
:
$ ( 1t e r r o r s 1) . a p p e n d ( 1<> ^
</>1) ;

HTML-:
<d i v i d = c o n t a i n e r >
<d i v i d = " e r r o r s ">
<2>0: </h2>
<p>B </>
</div>
< / di v>
, HTML-
d iv
HTML.
. p r e p e n d () append (),
HTML- . ,
HTML, :
$ ( f t e r r o r s 1) . p r e p e n d ( 1<> ^
</>1);
p r e p e n d ()
HTML:

203
II. jQuery

<div id=11container>
<div id=,ferrorsfl>
<p>B </>
<2>0:</h2>
</div>
</div>


<div>.
HTML-
,
before () after ().
, , ,
. , HTML-
:
<input type="text" name="userName,f id=?,userName">

, , ,
. ,
.
( , ,
,
8), . after () :

$ (1userName ') .after (1<span class="error">HMH -1


!</ sp an> 1);

- ,
HTML- :

<input type="textlf name="userName" id=nuserName">


<span c l a s s = f,error">HMH !</span>

.before ()
. :

$ (1#userName 1) .before (1<span class="error"> -1


</>1);

HTML-:
<span class="error">Hi^ </>
<input type=fltext" name="userName" id="userNameff>

204
4. jQuery


, (html () .text () ..),

, .
api.jquery.com /category/m anipulation/.


. ,
, JavaScript (
a l e r t (),
, div,
).
(Close), , ,
. , j Query- remove ().
, popup;
, :

$ ( 1# 1) . r e mo v e () ;
. remove () .
, span
e r r o r . :

$ ( 1s p a n . e r r o r 1) . r e mo v e ( ) ;

.
, ,
.
,
. img (
, ),
.
(, )
, , img
p r o d u c t 101, .
j Query:
$ ( 1# p r o d u c t l 0 1 1) . r e p l a c e W i t h ( 1<> -1
</>1);

205
II. jQuery

img
.


jQuery clone (),
.
.


j Query ,
. ,
, .
:
CSS-. ,
, , .

,

HTML-. CSS
, . -
,
JavaScript , ,
.
CSS ,
,
.


HTML-
JavaScript
DOM, ,
, , HTML,
, , HTML- -

206
4. jQuery

JavaScript. , View
Source ( ), ,
- ,
. , HTML- ,
JavaScript, ,
JavaScript HTML-. ,
, HTML- ,
JavaScript 10
, JavaScript
,
,
.
,
,
HTML- HTML-,
, JavaScript.
-.
JavaScript-,
HTML CSS, .

:
Chrome =>
=> (View => Developer => Developer
Tools) (Elements)
.
Firefox =>
=> (Tools => Developer => Inspector).
,
HTML-,
JavaScript.
Internet Explorer F12,
(Developer Tool),
HTML. HTML HTML-
( ,
HTML- (View Source)).
(Refresh) ( F5), HTML
HTML-, ,
JavaScript.
Safari , (Deve
loper) ( Safari =>
(Safari Preferences),
(Advanced) ,
(Show Develop menu in menu bar) -

207
II. jQuery

).
=> - (Developer => Show Web
Inspector). (Elements) ,
.
Opera =>
=> Opera D ragonfly (Tools => Advanced => Opera
Dragonfly). (Dragonfly
.) ,
, (Docu
ments).

j Query
.
addClass () .
addClass () j Query
, ,
. , ext er n a l L i n k
, ,
:
$ (1a [hrefA= h t t p : //] ') . a d d C l a s s (1e x t e r n a l L i n k 1);

HTML:
< h r e f = lfh t t p :/ / w w w .eksmo .r u / 11>

:
< h r e f = h t t p ://www. eksmo .r u / ff
c l a s s = " e x t e r n a l L i n k ">

,
CSS . ,
JavaScript ,

CSS.


addClass () removeClass (),
, ,
. ,
addClass(1externalLink1) , a addClass('.
externalLink1) .

208
4. jQuery

jQuery- , ,
. addClass ()
, .



. w w w .cvw design.com /txp/
a rticle /1 77 /u se -m o re -th a n -o n e -css-cla ss,
.

removeClass () addClass ( ) .
. ,
highlight div
alertBox, :

$ ( 1#alertBox1) .removeClass(1highlight1);

, ,
, ,
.
. ,
, (on);
, (off).
, - , ,
, body.
-
.
,
body, .
, , ,
changeStyle. ,
altStyle, .
:

$ (1#changeStyle1) .click(function() {
$(1body1).toggleClass(1altStyle1);
}) ;
He
. ,
.
209
II. jQuery

. . ,
, toggleClass (),
, altstyle .

CSS

J Query- css () CSS


, ,
, , ,
.
css () :
CSS , CSS
CSS
.

CSS
css (). ,
div main:

var bgColor = $ ( 1#ma i n 1).c s s (1background-color ');

bgColor
.


jQuery CSS ,
. (
CSS) jQuery rgb, ,
gb (255, , 10), , ,
rgba, , rgba (255, 10,10, . 5) . jQuery
RGB ,

(#F4477 ), RGB (rgb (100%, 10%, 0%))
HSL(hsl (72, 100%, 50%)). ,
jQuery , ,
CSS body
150%, jQuery
f o n t - s i z e .

css ()
CSS. :

210
4. jQuery

CSS . ,
body 200%, :

$ ( 1b o d y 1) .css (1font-size 1, 12 0 0 % 1);

, ,
1 2 0 0 %1, , j Query .
, .pullquote
100 , :

$ ( ' .pullquote1).c s s (p a d di ng 1,100);

j Query
padding 100 .


CSS c s s ( ) ,
CSS. ,

h i g h l i g h t :
$ ( ' . h i g h l i g h t 1) . c s s ( 1b o r d e r 1, 1l p x so lid black');

CSS,
. , -
. ,
. ,
.
, .
, .
:

var baseFont = $ ( 1b o d y 1).c s s (1font-size');


baseFont = parselnt(baseFont);
$ ( b ody *) .css (1font-size1,baseFont * 2) ;


body. ,
: 11 6 \ ( 2),
, .
JavaScript p a r s e l n t (),
16.

211
II. jQuery

, , ,
baseFont
, , 16. ,
font-size, baseFont 2.


,
(, . .)
,
, , .
, , ,
body .

CSS

CSS
, . css ().
, div
(, ),
div :
$ (1#highlightedDiv1) .css (1background- -1
color 1r '#FF00001);
$ (1#highlightedDiv') .css (1border 1, 12px solid <-J
#FE00371);

.css ()
. ( )
/.
(:), ; /
;
{}. ,
CSS, , :

{ 'background-color' : '#FF0000', 'border' :


'2 solid #FE0037' }

,
,
.
:

212
4. jQuery

background-color1 : f#FF0000f,
b o r d e r 1 : 12 solid #FE0037f

. 4.6.

. 4 .6 . JavaScript
. JavaScript
( , ).
, jQuery

css () ,
:
$ (1#highlightedDiv1) .c s s ({
background-color1 : 'tFFOOOO',
b o r d e r 1 : 12px solid #FE0037'
}) ;
,
, , ,
.
, , ,
JavaScript ( ).

,
.
.

,
( ), css ().
css({
213
II. jQuery

, { .
: }
, ; )
, css () ; ;
JavaScript.
,
CSS :

$ (1#highlightedDiv1) .css (1background- color , <-J


1#FF00001);
$ ( 1#highlightedDiv1). css (1border . 2px solid 4-1
#FE0037 1) ;

j Query
(. ).

j Query-
, :

$ (1#highlightedDivf) .css (background-color , -1


#FF0000) .c s s (b o r d e r , 2px solid # FE0037);

:
highlightedDiv ,
.
.
$ (#highlightedDivf) ,
j Query-, .
.

$ (tthighlightedDiv *) .c s s (* background- c o l o r ,
*#FF0000);
$ ( #highlightedDiv ). css (b o r d e r 1, 2px solid -1
#FE0037');

,
CSS, (
) CSS.

,
, CSS,
.

214
4. jQuery

,
HTML
CSS
JavaScript , jQuery
. addClass () css ()

HTML class style.
jQuery
HTML attr () removeAttr ().

attr () HTML-
. , ,
img, 1s r c 1 (
src img):

var imageFile = $ ( 1#banner i m g 1).a t t r (1s r c 1);

attr ,
HTML. src img
banner,
imageFile : ,
1 images/banner . png ' 1h t t p : //www. thesite . com/images/
b a n n e r .p n g 1.


attr ()
href, href HrEf
.

a t t (),
. , ,
src img :

$ ( 1#banner i m g 1) .attr (1s r c 1, 1images/newlmage.png 1) ;

,
removeAttr (). ,
bgColor body:

$ ( 1b o d y 1) .removeAttr(1bgC ol or1);

215
II. jQuery


jQuery,
jQuery ,

. , img,
JavaScript:
$ ( ' i mg 1) . f a d e O u t () ;

. fadeOut () .
jQuery,
,
.

. jQuery
. e a c h ().

, ,
,
, , , (
, ).
:
1. , .
2. HREF (URL-).
3.
.

jQuery ,
,
each (), . jQuery-
, :
$ (1selector 1) .each ();

each (),
. ,
.
, , ,
216
4. jQuery

:
3, .
:

funct io n() {
//

, .
,
: calculateSalesTax () ;.
,
( , !). ,
each ():

$ (1selector 1) .each(function() {
//

}) ;
. 4.7 .
,
,
. } (
, each () ); )
each () ; ; JavaScript.
, JavaScript
.

. 4 .7 . JQuery- e a c h ()
.

, ,
- : ,
. each ()

217
II. jQuery

, , ,
. ,
50
JavaScript :

$ ( 1i mg1) . e a c h ( f u n c t i o n () {
a l e r t (1 !1);
}) ;
50
. ( , .)


, jQuery
document. ready (),
, HTML- ,
JavaScript.
:
$ (document).ready(function() {
//
//
}) ;

th is $ (this)

each (), , ,
, , URL-
. ,
,
t h i s . ,
. , t h i s
j Query,
. .

t h i s
,
. , ,
j Query j Query-
. , t h i s jQuery,
: $ ( t h i s ) .

218
4. jQuery

, t h i s -
, , .
, .
, $ ( t h i s ) , ,
(
).

, HTML- div,
:

<d i v i d= "11>
<]13>-, </113>
<ul i d = lfb i b L i s t " >
</ul>
</div>

,
.
(. ):

$ ( ' a [ h r e f A= " h t t p : / / " ] 1)

, ,
e ac h ():

$ (1a[href= "h t t p ://"] 1) .e a c h ()

$ (fa[href= "http://"] ') .each(function() {


}) ;
URL-
. URL-,
.
$ ( t h i s ) :

$ (1a[hrefA= h t t p ://] 1) .each (function() {


var extLink = $ (this).attr(1href1);
}) ;
, ,
: ( ext Li nk), -

219
II. jQuery

h r e f .
$ ( t h i s ) ,
e x t L i n k .


ul:

$ ( 1a [ h r e f /4= h t t p : / / ] 1) . e a c h ( f u n c t i o n () {
v a r e x t L i n k = $ ( t h i s ) . a t t r (*h r e f 1);
$(1#bibList1).append(1<li>1 + extLink + 1</li>1);
}) ;
$ (t h i s )
eac h (), $ ( t h i s )
.
, .


, , ,
, $ ( t h i s ) ,

. -, ,
div, HTML- , -
, . ,
JavaScript, ,
. JavaScript
div.
04_01.html .


,
( ,
. 4.8).
, . ,

.

d iv , span .
,

220
4. jQuery

HTML- . , JavaScript

HTML-.

. 4 .8 . HTML-
. JavaScript
. ,
JavaScript, ( )

, ,
.
1. span, pq (pull
quote ).
, HTML- ,
span ,
. ,
.
span:
<span class-"pqfl> . . . -1
- .</span>

221
II. jQuery

2. span.

span, . JavaScript,
span.
3. pq span
p u llq u o te .
(, ,
) JavaScript.
CSS . p u l l q u o t e ,
. , JavaScript
,
span.
4. span.
, span
( 2 ,
;
, ,
).

,
. .



JavaScript 1
.

1. 04_02.html -
04.
jQuery.
2.
</head> :
<s c r i p t s r c =" . . / _ j s / j q u e r y .min . j s nx / s c r i p t >

222
4. jQuery

j Query. , ,
j Query J s (
). s c r i p t
.


, jQuery
, ,
, :
< s c r i p t src=" . . /_j s / j q u e r y . 1.11. .min . j s Mx / s c r i p t >

jQuery.
,
jQuery 1.11.0 ( 1 2
jQuery, CDN
). ,
, 1.11.1 1.12.0.
jQuery,
.

3. Enter
jQuery :
<script src=" ../_js/jquery .min. js"X/script>
<script>
</script>


.
-.

d o c u me n t . r e a d y ().
4. script
:
1 <s c r i p t s r c = " . . / _ j s / j q u e r y .min . j s " x / s c r i p t >
2 <script>
3 $ (document).ready(function() {
4

223
II. jQuery

5 }); // ready
6 </script>
JavaScript ( / / re a d y )
,
.
}) ;,
. ,
,
}) ; .
1 4
jQuery, ,
.
, span, ,
.
5. , 4:
1 < s c r i p t s r c = ,f. . / _ j s / j q u e r y . m i n . j s M> < / s c r i p t >
2 <script>
3 $ (document) . r e a d y ( f u n c t i o n ( ) {
4 $ (* span.p q 1)
5 }); / / r e a d y
6 </script>
$ ( 1s p a n . p q 1) jQuery,
span pq. ,
s pan .
6. , 4 6:
1 < s c r i p t s r c = ff. . / _ j s / j q u e r y . min . j s " x / s c r i p t >
2 <script>
3 $ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
4 $ (1span.p q 1) .each(function() {
5

6 }); // each
7 }); / / r e a d y
8 </script>

224
4. jQuery

, j Query- . e ach ()
. ,
.
,
span, .
span.
7. , 5:
1 < script src=n ../_j s/jquery.min.j s"></script>

2 <script>
3 $ (document). r e a d y ( f u n c t i o n ( ) {
4 $ ( 1s p a n . p q f ) . e a c h ( f u n c t i o n () {
5 var quote=$(this).clone();
6 }); / / e ac h
7 }); / / r e a d y
8 </script>

quot e, ( )
span (. t h i s $ (t h i s ) ,
, $ ( t h i s ) ) . J Query-
. c l o n e () , HTML- .
span,
, .
,
.
s pan pq. .
8. ,
6 7:
1 < script s r c =" ../_j s/j query.min.j s"></script>

2 <script>
3 $ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
4 $ ( 1s p a n . p q f ) . e a c h ( f u n c t i o n () {
5 v a r q u o t e = $ ( t h i s ) . c l o n e () ;
6 quote.removed ass ( 1p q 1) ;

225
II. jQuery

7 quote.addClass ( 1pullquote1);
8 }); // each

9 }); // ready

10 </script>

, removeClass ()
, addClass ()
.
, CSS
.pullquote span
.
, span .
9. , ( 8):
1 < script sr c="../_j s/jquery.min.j s"></script>

2 <script>

3 $ (document).r e a d y ( f u n c t i o n ( ) {

4 $ ( 1s p a n . p q f) .each ( f u n c t io n () {

5 v a r q u o t e = $ ( t h i s ) . c l o n e () ;
6 q u o t e .r e m o v e C l a s s (1p q 1);

7 q u o t e . a d d C l a s s ( 1p u l l q u o t e 1);
8 $ (this).before(quote);
9 }); I I each
10 }); / / r e a d y
11 < / s c r i p t >

span, .
,
.
s pan
HTML- .
, HTML-:
<span c l a s s = lfp u l l q u o t e ff>. . .
- . </ s p a n > <span c l a s s - " p q " >
. . . - . < / s pa n>
226
4. jQuery

, ,
CSS
.



CSS, CSS
float. ,
, .
,
CSS float : css.m axde sig n .com .a u /flo a tuto ria l/.
.pullquote,
.
.

JavaScript- .
, HTML-
.
10. HTML- ,
< span c la s s = flpq"> < /
sp a n x :
<span c l a s s = f,pq">Nullam u t n i b h s ed o r c i tempor*-1
r u t r u m . < / span>
,
.
11. .
,
. 4.8. , ,
</ span> 10.
1, .
04 02.html.
5
/:

JavaScript
: JavaScript
-. ,
JavaScript -
:
; -
,
.

,
, . JavaScript
: -
-
. .
, - ,
,
.

?

, , ,
.
.
- , ,
. ,
d iv ;
;
, .

, -
. , , ,
228
5. /:

, ,
( c l i c k ) . , ,
.


. ,
mousedown, mouseup c l i c k
(. 5.1).


, ,
. ,

. .html,
. ,
- , ,
- (. . 5.1).

. 5 .1 . ,
, ,
. ,
mousedown, mouseup o n c l i c k , d o u b l e c l i c k .
.html ( )

229
II. jQuery

Macintosh 1984 .,

. , ,
, .
,
-.
c lic k . ,
. , ,
,
. .

.


c l i c k ,
.
Tab, Enter .

d b lc lic k . ,
. ,

. -
, , ,
,
.
,
,
.
,
.
mousedown. ,
, .
.
,
.
- ,
, ,

230
5. /:

, ( ,
jQuery UI 12).
mouseup. mouseup ,
.
, ,
.
mouseover. ,
. mouseover,
,
,
. ( CSS
: hover, , .)
mouseout. , .
, ,
,
, .
mousemove. ,
, .
mousemove
.
, , d iv ,
.


m o u s e m o v e (
), ,
.

-.

,
,
:
lo a d . ,
-: HTML-, ,
Flash-, CSS JavaScript.
231
II. jQuery


JavaScript, -.
,
.
,
JavaScript . ,
j Query
l o a d (. j Query
).
r e s iz e . , ,
,
, .
,
. ,
,
,
.
s c r o l l . ,
( PageUp, PageDown, Home, End . .)
- .
, s c r o l l .
, ,
( ).


m o u s e m o v e , s c r o l l
. ,
.

unload. ,
, .

JavaScript,
, .
,
. ,
, ,
.
, ,
232
5. /:

, , ,
-,
,

, JavaScript,
,
HTML.
.
, ,
.
subm it. ,
Submit ()
Enter, .
, ,
,
-.
8.
r e s e t . , Reset ()
, ,
. ,
, .
, ,
r e s e t . ,
- ,
: , ?.

() .
change.
, , -
.
change, ,
, , .
fo c u s. , ,
Tab. ,
. ,
,
. f oc us
233
II. jQuery

JavaScript. ,
: .
( ),
, ,
.
b lu r. f ocus. ,
( Tab
). b l u r
. , -
Tab
, ,
, , .


f o c u s b l u r .
Tab ,
f o c u s ,
Tab ( ), b l u r .

,
,
, .
,
JavaScript.

, -
, , ! (
, ,
.)
keypress. ,
. , ,
. k e y p r e s s
, ,
,
. , -,
.
, .
234
5. /:

keydown. ke y p r e s s ,
.
k e y p r e s s . Opera keydown
; ,
k e y p r e s s , ,
.
keyup. ,

: jQuery

. Internet Explorer
, , (
Internet Explorer ),
. , Internet Explorer9
, ,
.
- Internet Explorer8
, ,

. , j Query.
, JavaScript,
j Query, ,
JavaScript, .
,
JavaScript, j Query
(, ).

, j Query- ()
()
. ,
JavaScript,
j Query- , .

1. .

, j Query
CSS ,
. ,
, . ,
235
II. jQuery


, ?
(m ouseover),
, ?

2. .

jQuery ,
(DOM). ,
, ,
. , ,
,
:

$ ( 1 1) . m o u s e o v e r () ;

menu,
:

$ ( 1#menu1) . c l i c k ( ) ;

,
( ,
jQuery).

.
- , .

3. .

,
. , .
,
, , d iv
, .

$ ( 1# s t a r t 1) . c l i c k ( s t a r t S l i d e S h o w ) ;

,
(), .
, :

$ ( 1#start1) .click(startSlideShow())

236
5. /:



(
4).
:

f u n c t i o n () {

/ /

}

. 5.2.


, jQuery
, api.jquery.com /category/events/.

. 5 .2. jQuery ,
.
, .
, , . ,
} (
, mouseover ()); )
mouseover ( ) , ,
$ ( ' ')

. , -
, menu.
, ,
,
submenu. , : mouseover (),
, .
.

237
II. jQuery

1. :
$ ( 1#menu1)
2. :
$ ( f #menu 1) .m ouseover () ;
3. :
$(1#menu1) .mouseover(function() {
}) / / mouseover

, });,
.
,
JavaScript : / / m ouseover,
, .
4. (
):
$ ( 1# m e n u 1 ) . m o u s e o v e r ( f u n c t i o n () {
$ ( 1#submenu1) . show ( ) ;
} ) ; / / mouseover

,
, (
}); ). ,
JavaScript
,
.


show ()
.



.
, ,
j Query .

238
5. /:



JavaScript 1 ,
.

1. 05_01.html -
05.
jQuery.
2.
</head> :
<s c r i p t s r c = M. . / _ j s / j q u e r y . m i n . j s " > < / s c r i p t >
jQuery. ,
, jQuery _ j s (
).
s c r i p t .
3. Enter,
jQuery ,
:
< s c r i p t s r c = " . . / _ j s / j q u e r y .min . j s f,x / s c r i p t >
< s c r ip t>
< /s c r i p t >
d o c u me n t . r e a d y ().
4. s c r i p t
, :
< s c r i p t s r c = ,f. . / _ j s / j q u e r y .min . j s " x / s c r i p t >
<script>
$ (d ocu m ent). r e a d y ( f u n c t io n () {
} ) ; / / ready
</script>
He }) ;.
, ,

239
II. jQuery

.
,
j Query .
.
:
.
( ),
.
5. . ready ()
, :
<s c r i p t s r c = " . . / _j s / j q u e r y . m i n . j s " > < / s c r i p t >
<script>
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n () {

}); / / r e a d y
</script>
$ ( 1h t m l 1) HTML, .
.
6. jQuery . d b lc lic k ( ) ; / /
double c lic k , :
<s c r i p t s r c =" . . / _ j s / j q u e r y .min . j s 11> < / s c r i p t >
<script>
$ (document) . r e a d y (f u n c t i o n () {
$ ( 1h t m l 1) . d b l c l i c k ( ) ; / / d ou b le c l i c k
}); / / r e a d y
</script>
. d b l c l i c k () j Query-,
-
. - ,

d b l c l i c k () (
,
: 3).

240
5. /:

7. ,
:
< s c r i p t s r c = " . . / _ j s / j q u e r y . m i n . j s 11></ s c r i p t >
<script>
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n () {
$ ( 1h t m l 1) . d b l c l i c k ( f u n c t i o n () {
}) ; / / d o u b l e c l i c k
}); / / r e a d y
</script>
He ,
, ,
. f u n c t i o n ( ) {} ,
,
: .
8. , , :
<s c r i p t s r c = . . / _ j s / j q u e r y . m i n . j s " > < / s c r i p t >
<script>
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$ ( 1h t m l 1 ).d b l c l i c k ( f u n c t i o n () {

a l e r t ( 1 1);
}); / / d o u b l e c l i c k
}); / / r e a d y
</script>
-
, JavaScript
. , ,
, .



. ,
a l e r t () ,

241
II. jQuery

, ,
jQuery. ,

jQuery,
, ( )
, -
.

, ,
.
1. , ,
:
< s c rip t s rc = ". . /_ j s /jq u e ry .m in . j s "> < /s c rip t>

< script>

$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {

$('htmlI).dblclick(function() {
alert(11);
}); // d o u b le c l i c k

$ ( 1a 1) . mo useover(f u n c t i o n () {
} ) ; / / m ouseover
}); II re a d y

< /s c rip t>

( $ ( 1 1) ),
m o u se o ve r.
, - , -
.
2. JavaScript ,
:
<s c r i p t s rc = " . . / _ j s / j q ue ry.m in . j s " > < /s c rip t>

< script>

$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {

$ ( 1h t m l 1) . d b l c l i c k ( f u n c t i o n () {

a l e r t ( 1 1) ;

242
5. /:

} ); / / d o u b le c l i c k
$ ( 1 1) .m o u s e o v e r( fu n c tio n () {
v a r m essage = "<>
</>";
$ ( .m a in 1) .append(m essage) ;
} ); / / m ouseover
} ); / / re a d y
< /s c rip t>
, v a r m essage = "<>
< / > " m essage
. HTML- .

m ain ( $ ( 1 . m a in 1) )
m essage.
d iv main,

d iv , .
(. 4,
j Query- append ().)
3. ,
.
,
(. 5.3).
: ,
.
4. , , ,
:
< script s r c = " ../_j s /j q u e r y . m i n . j s "> < / script>

< s c r ip t>
$ ( d oc u m e nt ).r e a d y (f u n c t i o n () {

$ ( 1h t m l 1).d b l c l i c k ( f u n c t i o n () {

alert (1 1);

} ); / / d o u b le c l i c k
$ ( 1a 1) .m o u s e o v e r ( f u n c tio n () {
243
II. jQuery

. 5.3. jQuery
, ,
,

v a r m essage = "<>
< / > " ;
$ ( 1.m ain 1) . a p p e n d (m e s s a g e );
} ); / / m ouseover
$(* #button 1).click(function() {
$(this) .val (" !11) ;
}); // click
}); / / re a d y
< /s c rip t>
: $ ( 1# b u tto n 1)
b u tto n ( )
c lic k , , - , -
.
!. , :
t h i s $ ( t h i s ) 4
, $ ( t h i s ) jQuery.

244
5. /:

: $ ( t h i s )
, , ,
.
. ( v a l () jQuery
8, ,
.
! v a l ()
!.)
5. ,
.
(. 5.3).

. : () ; ()
f o c u s () (.
8); () $ ( t h i s ) ( 12)
; ()
. c s s () (.
CSS 4) .
_05_01.
html 05.

jQuery

-, j Query
,
.

HTML-

,
. , ,
,

, ,
. , -
. JavaScript
-

245
II. jQuery

,
-,
. . ,
,
.

, ,
, JavaScript.
, JavaScript ,
, .
,
-, , ,
. . , ,
,
JavaScript.
JavaScript , ,
,
, ,
.

, j Query.
JavaScript,
jQuery r e a d y (),
HTML-, .
, JavaScript

(
JavaScript).
re a d y ()
. :

$ (document) . r e a d y (f u n c t i o n () {
/ /
}) ;
,
, ,
, j Query.
, .
s c r i p t
246
5. /:

( , JavaScript) script,
j Query.

, -
:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-811>
<title>3arc^0B0K CTpaHHUbi</title>
< script src=" j s/j q u e r y .j sf,x / s c r i p t >
<script>
$ (document).ready(function( ) {
// JavaScript .
}); // ready()
</script>
</head>
<body>
-...
</body>
</html>


ready ()
jQuery ,
. $ (document) .ready :
$(function () {
//
}) ;

$ (document) .ready ()

$ (document) .ready ()
HTML- (<head>)
JavaScript HTML-.
: JavaScript HTML.

247
II. jQuery

, - JavaScript
</body>:
<!DOCTYPE html>
<html>
<head>
<meta charset=flUTF-8,,>
<title>aooo CTpaHnu1H</title>
</head>
<body>
-...
<script src=" j s/j q u e r y .j s 11></script>
<script>
// JavaScript .
</script>
</body>
</html>

$ (document) .
ready () , ,
, .
. -,
. ready (). -,
JavaScript - ,
.
JavaScript,
, - .
,
.
, -, ,

JavaScript.
. JavaScript,
, .
, JavaScript,
HTML-,
.
(letteringjs.com).

248
5. /:

, j Query
JavaScript , HTML-,
,
( JavaScript).
. ,
-, JavaScript,
HTML-
JavaScript. ,
JavaScript ,
-, ,
HTML-.
, ,
JavaScript, .
, JavaScript
HTML, , . ,
, ,
JavaScript,
,
,
: , -
,
. , .
, . r e a d y ()
.


-
-
. ,
-,
-,
,
.


. , ,
, .
249
II. jQuery

, j Query
. h o v e r () ,
, ,
, .
,
. :

$(1# 1) .h o v e r ( 1, 2 );

h o v e r ()
. ;
. , -
menu ,
( ) d iv
submenu. ,
.
h o v e r ():

$(* #menu1) .h o v e r (function () {


$ ( 1#submenu1) . show ();
}, f u n c t i o n () {
$ ( 1#submenu f ) . h i d e ( ) ;
}); / / h o v e r

,
, . ,
, ,
:

$ ( 1#menu1) . h o v e r (
f u n c t i o n () {
$ ( 1#submenu 1) . s how() ;
} , / / m ouseover
f u n c t i o n () {
$('# s u b m e n u 1).h i d e ();
}/ / mouseout
); / / h o v e r

. 5.4 ,
.

250
5. /:

. 5 .4. JQuery- h o v e r () .
, ,

,
-
(. :
3).


;

, , , hover ().
,
:

function showSubmenu() {
$(1tsubmenu1).show();

function hideSubmenu() {
$ (1#submenu1) .hide();

$(1#menu1).hover(showSubmenu, hideSubmenu);

, .
.
,

.

251
II. jQuery


jQuery 1.9
toggle (), , hover (),
,
.
, .
,
. ,
. toggle ()
jQuery, ,

.


.
, , , ,
, ,
,
Shift.

j Query ,
.
, , ,
. ,
, - .

$ (document).c l i c k (function (e v t) {
var xPos = evt.pageX;
var yPos = evt.pageY;
alert(*X:f + xPos + 1 Y : f + yPos);
}); // click

evt. (
),
evt.
,
, , e v t .pageX
( ).

252
5. /:


evt ,
. JavaScript,
.
, , event .

( )
. . 5.1
.

. 5.1 . ,
,


pageX ( )

pageY ( )

screen X ( )

screen Y ( )

s h iftK e y , Shift ,

w h ic h
(. )
ta r g e t , ; ,
c l i c k () ,
d a ta j Query, b i n d ()
, (.
)


which
, keypress (),
. ,
(, , 9 . .),
which JavaScript,

:
String.fromCharCode(evt.which)

253
II. jQuery

HTML-
. ,
-;
- . ,
, . ,
( submit ())
,
.

prevent Default ()
. (.
), ,
. ,
menu. (
, JavaScript,
). JavaScript,
, . ,
, ,
:

$ (1#menu1) .click(function(evt) {
// "" JavaScript-
evt.preventDefault(); //
}) ;

. ,
, :

$ ( 1#menu1) .click(function(evt){
// "" JavaScript-
return false; //
}) ;

,
, j Query- o f f () .

254
5. /:

, j Query ,
. o f f (),
. ,
t a b B u t t o n
, :

$ (.tabButton1) .off (1cl i c k 1);

, ,
o f f ().
1 $ ( ' 1) . m o u s e o v e r ( f u n c t i o n () {
2 a l e r t ( ' ! 1) ;
3 }) ;
4 $ ( 1# d i s a b l e 1) . c l i c k ( f u n c t i o n () {
5 $ ( 1 1) . o f f ( 1mouseover 1);
6 }) ;
13
( ).
,
!
, 46
.
d i s a b l e (, ),

.
,
o f f () . ,
(m ouseover, c l i c k , d b l c l i c k . .) ,
:

$ ( 1i n p u t [ t y p e = fls u b m i t ff ] 1) . o f f () ;

,
.


jQuery-
of f () : a p i.jq u e ry.co m /o ff/.

255
II. jQuery




, .
, ,
- . ,
.
. - (, ,
)
. ,
div, ,
div .
, (event bubbling),
,
. : ,
.
. div,
.
div. ,
, .
, , ,
div .
, ,
, .
, ,
div -.
div,
,
. , , ,
, ,
.
jQuery stopPropagation (),
-.
(.
),
, :
$ (1#theLinkf) .click(function(evt) {
//
evt.stopPropagation(); //
}) ;

256
5. /:


,
j Query ,
.
j Query,
on ().


,
,
.

on ()
j Query-, c l i c k ()
m ouseover ().
,
, .

(
, )
,
, ,
- .


jQuery ,
,
.
, bind () ,live ()
delegate (). on (),
. ,
off () unbind (),
.

on () :

$ ( 1# ' ) . on ( 1 ' , , ,
) ;

257
II. jQuery

, (
, , ,
).
,
on (). -
, ,
, tr, .callout #alarm.


,
.
,
.

,
( ,
). ( ) (.
CSS 4)
:

{
firstName : '1,
lastName : ''
}

:

var linkVar = { m e s s a g e '};

, on (),
, , -
. ,
, ,
j Query,
: j Query.


on ()
. on (),

258
5. /:

,
:
$ (' ' ) .on (11, ) ;
:
$(11) .click();

,
,
, .
,
, on ():

var linkVar = { m e s s a g e : 1 1};


var pVar = { m e s s a g e :1 1};
function s h o w M e s s a g e ( e v t ) {
a l e r t ( e v t .d a t a . m e s s a g e ) ;
}
$ (1a 1) .o n (mouseover 1,linkVar,showMessage);
$ (*p') . o n (1c l i c k 1, p V a r , s ho w Me s s a g e) ;

. 5.5 , .
: linkVar p Var .

(message), . showMessage ()
(. )
evt. alert (),
m e s sage (
data ). , m essage ,
.

on ()

J Query- on ()
. ,
,
. , ,
(
lightbox-,
).

259
II. jQuery

. 5.5. jQuery- on () ,
. ,
(
), ,

, ,
, -
( ,
260
5. /:

,
).
, :
$ (document ) . o n ( 1c l i c k k e y p r e s s f u n c t i o n () {
$ ( 1# l i g h t b o x 1) . h i d e ( );
}); / / on
1c l i c k k e y p r e s s 1.
, ,
j Query
. c l i c k ,
k e y p re s s . ,
, ,
on () .
, ,
,
:
$ ( 1# t h e E l e m e n t 1) . on (* c l i c k 1, f u n c t i o n () {
/ / -
} ); / / on
$ ( 1# t h e E l e m e n t 1) .o n (1m o u s e o v e r 1, f u n c t i o n () {
/ / -
} ); / / on
, on ()
(.
CSS 4), ,
. ,
on ()
( ):
$ ( 1#theElement1) .on ({
*click1 : function() {
// -
}, // click
'mouseover1 : function() {
// -
}; // mouseover
} ); / / on

261
II. jQuery

on ()

, on ()
, :

$ (1#') .on (1', , , );


j Query, , , , . .
on ()
.
$ ( ,# s e l e c t o r f) .
, :

$ ( 1l i 1).o n (1cl i c k 1, function () {


$ (this) .c s s (1t e x t - d e c o r a t i o n 1: 1l i n e - t h r o u g h 1);
}); // on

li,
. ,
$(this) , ,
li, . ,
click li.
, ,
, .
, ,
, ,
. .


, $ (t h i s ),
t h i s $ ( t h i s )
4,
,
, $ ( t h i s )
.


: ,
.
HTML- ,

262
5. /:

c l i c k (), m ouseover () on (),


.
.

, ,
.
(. 1 . 5.6).

, (. 2
. 5.6).
, (. 3
. 5.6).

c l i c k
l i , -
. . 5.6 , ,
, .
, l i ,
c l i c k
- . , ,
, .


jQuery
: a pi.jqu e ry.co m /on /.

, ,
,
( , ),
.
,
.
,
.
. ,
, on () :

$ ( 1u l 1).o n (' c l i c k 1, fl i f, function() {


$ (this) .c s s (1text-de co ra t io n 1: 1l i n e - t h r o u g h T);
} ); / / on

263
II. jQuery

. 5.6. JavaScript,
HTML-.
( ) .
, <ul>
< / u l > ( ).
, l i
( ). ,
( ).
_.1 05

264
5. /:

u l
l i .
u l
.
on ().
, l i .
11 i 1
on () , c l i c k ul,
l i ,
. l i ,
u l.

$ (t h i s )

, $ ( t h i s ) ,
(.
t h i s $ (t h i s ) 4) (.
).
$ ( t h i s )
. :

$ ( 1u l 1).o n (1click *, f unction() {


$ ( t h i s ) . c s s ( 1t e x t - d e c o r a t i o n 1: 1l i n e - t h r o u g h 1);
}
$ ( t h i s )
u l, .

,
, (
, Tab . .).
:

$( 1u l 1 ).o n ( 1c l i c k 1, ' l i 1/ f u n c t i o n () {
$ (this) .c s s (1t e x t - d e c o r a t i o n 1: 1l i n e - t h r o u g h 1);
}) ; I I on

l i ,
. , u l
,
l i . , $ ( t h i s )

265
II. jQuery

l i ,
l i .

.
, -
HTML-, ,
. ,
Ajax ( 13)
HTML-,
-.



JavaScript.

, , ,
table :
$(1table 1).o n (1click1, 'tdf, function () {
//
}) ;

,

,
.


.

24 7
. ,
,
,
. :

, , .
,
JavaScript .
266
5. /:

, .

(. 5.7).

. 5 .7. JavaScript
,


JavaScript
.
.
, ,
.


?
, -
?
, HTML-
. , click

267
II. jQuery

,
(), body, html.
, , HTML-,
.

. ,
HTML-, ,
, ,
. ,
click li,
click
ul, div, ul.
, ,
.

target. HTML-,
. , ,
click. -
,
, .
,
, ,
ul click.
, . ,
li,
,
.

, , JavaScript
. CSS
? , CSS d i s p l a y
.
,
JavaScript:
, .
, JavaScript,
JavaScript .


1
.

268
5. /:

1. 05_02.html -
05.
j Query
$ (document) . r e a d y () (.
j Query).
.
2. $ (document) .
ready () $ ( 1 . an sw er1) . h id e () ;.
d iv ,
answer.
d iv ( h i d e ()
6).
.
.


JavaScript, CSS,
JavaScript .
, ,
, ,
.

,
. ,
,
FAQ.
h2 .
3. Enter, ,
, :
< script src = " . . /_j s/jquery.m in. j s></script>
<script>
$ ( d o c u m e n t ) . r e a d y (f u n c t i o n () {
$ ( 1. answer 1) . h i d e ();
$ ( 1.main h 2 1)

269
II. jQuery

}); / / r e a d y ()
</script>
,
h2 main (
h2 - ).
.
,
, ,
,
. , d iv ,
h2. , ,
, .
4. ,
h2.
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n () {
$ (' . answer 1) . h i d e ();
$ ( .main h 2 1) . c l i c k ( f u n c t i o n () {
} ) ; / / c l i c k
}); / / r e a d y ()
c l i c k h2.
/ / c l i c k , ,
, ,
}) ;.
, ,
,
h2.
5. :
v a r $answer = $ ( t h i s ) . n e x t ( 1. answer 1);
$answer,
jQuery. , $ ( t h i s )
, ,
, h2. j Query
,
. . n e x t () ,
.
, ,

270
5. /:

h2. ,
. next (). . next ( 1 .answer 1)
h2,
answer.
, div,
h2. div
. ,

: , , ,
, , . ,
j Query, $ (),
j Query. ,
code $ ( 1this 1) .next (1 .a n s w e r 1)
j Query .
,
,
div,
.

j Query,
,
. ,
-
.
$ (, $ answer),
, j Query (
$ () ).
$,
, j Query,
, ,
,
, .hide ().


. next () ()
jQuery,
. ,
docs.jquery.com /Traversing. ,
DOM 15.

271
II. jQuery

6. if/else :
$ (document).r e a d y (f unction() {

$ (1.answer 1) .h i d e ();

$(f.main h 2 1) .click(function() {
v a r $answer = $ ( t h i s ) . n e x t ( ' . answer 1);
if ( ) {
} e ls e {
}
} ) ; / / c l i c k
}); / / r e a d y ()
i f / e l s e
,
. , ,
.
7. $ (an sw er. i s ( 1 : h id d e n 1)
:
$ (document) . r e a d y ( f u n c t i o n () {
$ (1.answer1) .h i d e ();

$(1.main h 2 1).click(function() {
v a r $answer = $ ( t h i s ) . n e x t ( 1. a n s w e r ' ) ;
if ($answer.i s (1:hidden1)) {
} e ls e {
}
} ) ; / / c l i c k
}); / / r e a d y ()
$answer, 5.
answer,
h2, . ,
d iv , h2.
j Query i s (), ,
. i s () ,

272
5. /:

.
CSS jQuery,
, . ,
t r u e , , f a l s e .
! ,
t r u e f a l s e (.
3).
: h id d e n ,
j Query ,
. , . ,
.
8. $answ er. slideD ow n () ; :
$ (document).r e a d y (function() {
$ (1.an sw e r 1) .h i d e ();
$(1.main h 2 ').click(function() {
var $answer = $ (this) .next (1.answer 1);
if ($answer.is(1:hidden*)) {
$answ er. s li d e D o w n ( ) ;
} e ls e {
}
} ) ; / / c l i c k
}); // r e a d y ()

slideDown () j Query-,
(
).
, - .
.
-.
.
( ,
,
1).
, +
. ,
, . ,

273
II. jQuery

, + -.
, h2.
9. , ,
:
$ (this) .addCl ass (1close f);

, $ ( t h i s ) ,
(.
). h2. ,
c lo s e , .

( CSS JavaScript).


.
10. e l s e
( ).
:
<s c r i p t s r c = " . . / _ j s / j q u e r y . m i n . j s > < / s c r i p t >
<script>
$ (document).r e a d y (fu nction() {
$ (1.answer1) .h i d e ();
$ ( ' . m a i n h 2 1) . c l i c k ( f u n c t i o n () {
v a r $answer = $ ( t h i s ) . n e x t ( 1. a n s w e r ' );
if ( $ a n s w e r . i s ( 1:h i d d e n 1)) {
$answer. s li d e D ow n () ;
$ ( t h i s ) . a d d C l a s s ( 1c l o s e 1) ;
} else {
$answer. fa d eO u t( ) ;
$ ( t h i s ) . rem o v ed a s s ( 1c l o s e T) ;
}
} ) ; / / c l i c k
}); / / r e a d y ()
</script>
274
5. /:

.
slideUp (), ,
,
fadeOut (),
.

, close h2:
+ .

.
,
(. . 5.7).



slideDown () fadeln (), fadeOut ()
slideUp (). ?
6


j Query: ,
,
. j Query
: ,
.

j Query .
CSS,
. ,
, CSS3 j Query,
.

jQuery
-
JavaScript. ,
-
. j Query
,
.

,
j Query,
. , submenu,
:

$ (1.submenu 1) .h i d e ();


. ,
, ,
(

276
6.


).

,
( 1f a s t 1, 1n o r m a l 1 1slow *)
, ,
(1000 = 1 , 500 = . .).
, :

$ ( 1e l e m e n t ?) . f a d e O u t ( 1s l o w 1) ;

,
10 :

$ ( 1ele men t1) .fade Out (10000);


(.
(DOM) 4). - ,
, d i s p l a y ( ,
CSS) . ,
,
.
j Query ,
html (. 6.1).


,
, 'fast*, 1normal1 slow1 200, 400
600 . :
$(1element *) .fadeOut(1slow1);
:
$(1element1) .fadeOut(600);

j Query
.
show () . ,
.
, .
277
II. jQuery

, , show (10 0 0),



hide () . ,
, , , show (),
,
. ,
.
toggle () .
, t o g g l e () .
, .
, (
, ) .

. 6.1. jQuery
.html . (,
fadeOut ( ' # p h o t o ' ) ) , , ,
, .
. , . ,
,

h i d e
. h i d e (),
HTML-.

278
6.


.
.
j Query :
fadeln () .
( ,
),
. ,
. ,
n o r m a l 1 (400 );
fadeOut () , .
, .
f a d e l n (), ,
400 .

;
fadeToggle () f a d e l n () f adeOut ().
,
f adeT oggle () , .
,
. ,
.
, ; .

(500 ), :
$ ( 1# b u t t o n 1) . c l i c k ( f u n c t i o n () {
$ ( 1# i n s t r u c t i o n s 1) . f a d e T o g g l e ( 5 0 0 ) ;
}); / / c l i c k
fadeTo () , .
.
, .
, .
0
1, .
, 75% , :
$ ( 1 1) . f a d e T o ( 1n o r m a l 1, . 7 5 ) ;

279
II. jQuery


, . ,
, 50%, ,
. ,
.
, .
0,
, .
, ,
0 , .
,
, , .
, ,
,
50%.

,
.
,
,
.
slideDown () .
, ,
, , , .
, .
, ,
1nor m a l 1 (400 ).

.
slideUp () ,
, , ,
. , .
slideDown () , ,
400 .
slideToggle () slideDown () ,
, slideUp () -

280
6.

. (
, ) , .


CSS
, -,
, . ,
, , ,
, .

. ,
,
CSS
, .
, CSS position,
div, ,
.
,
position absolute.
, left,
right, top / bottom. div,
. ,
,
.
div :
#login {
position: absolute;
left: 53 6px;
top: 0;
width: 400px;
}
div
536 .
,
right, ,
bottom.
,
- . ,
:

281
II. jQuery

?,
.

, . ,
relative CSS position
, .
, HTML-:
<span class=l,word">
<span class="definition">BbiMbiiimeHHoe , <-J

-</span>
</span>
span ,
span ,
:
.word { position: relative; }
.definition {
position: absolute;
bottom: -30px;
left: 0;
width: 200px;
}

: w w w .e la te d .co m /a rticle s/css-p o sitio n in g /
CSS3 .




j Query,
,
(. 6.2).

:
1. Login.
, j Query
. Login
.
282
6.

2. c li c k .
JavaScript :
( Login),
- .
3.
.
(
j Query).
, .
( show () ), (
slideDow n () ) ( f a d e l n () ).

. 6.2. ( ),
,



JavaScript 1 .

1. 06 01.html -
.
j Query
$ (document) . r e a d y () (.
jQuery 5). Login.
2. $ (document) . ready ()
$ ( 1# 1).
Login , : <
h r e f =f o r m . h t m l " >< i d = Mo p e n M>Login</p></a>. -
283
II. jQuery

,
. ,
JavaScript, .
, ,
JavaScript .
$ ( 1# ')
. .


, 2, .

, HTML- . HTML4
.
HTML5 (. HTML: - )
, , h i
div.
-.

3. ,
:
$ (document).ready(function() {
$ (* #open1) .click(function(evt) {
}); // click
}); // ready

click,
-
.
, , . .
, .
j Query , :
toggle () ,fadeToggle () slideToggle ().
, .

c l i c k . 5,
,
. ,
j Query
.

284
6.

4.
c l i c k :
e v t .preventDefault ();
evt .preventDefault () ;
, . ,
,
JavaScript. JavaScript

.
5. :
$(* #login f o r m 1) .slideToggle(300);

, ,
.
. , , ,
CSS.
6. ,
:
$ (document).ready(function() {
$( 1# o p e n 1).c l i c k (function(evt) {
evt.preventDefault();
$(1#login form1).slideToggle(300);
$ (this).toggleClass(1close1);
}); // click
}); // ready

this $ (this)
4
$ ( this ) ,
. $ (this) ,
$ ( 1# 1) 2.
toggleClass () .
-, toggleClass ()
, , ,
.
.close.
,
. (
, .)

285
II. jQuery

7. .
Login , ,
.
_06J)1 .html 06.
, slideToggle ()
toggle () fadeToggle ().
? ,
(, ), ,
, , . 5
, cl ick ()
. ,

5: Login
, . ,
, .

,
:
$ (document).ready(function() {
$ (1#open1) .c l i c k (function(evt) {

evt.preventDefault() ;

if ($(f#login form* ). is (1-.hidden 1) ) {


$ (1#login form 1) .fad e l n ( 3 0 0 ) ;
$ (this) .add Class(1close 1);

} else {
$(* #login f o r m 1) .slideUp (600);

$ (this) .removeClass(fclose 1);

}
}); // click
}); // ready



06.
_06_02.html

286
6.


,
jQuery. animate (),
CSS, (,
). , , ,
.


jQuery
, , , .
jQuery Ul,
.
jQuery Ul 12.


(.
CSS 4), CSS,
, , .

, ,
650 ,
50% 24 .
:

{
left: 1650,

opacity: .5,

fontSize: f24px'

}
, ,
, , %.
1650 1 ,
1 1.
, . 5 ,
- .
(left, opacity fontSize) .

287
II. jQuery


JavaScript CSS.
, font-size CSS, JavaScript
, ( JavaScript
).
CSS JavaScript
, . , font-size
fontsize, a border-width borderwidth.
, CSS ( ),
:
{
'font-size1: f24pxf,
1border-left-width1: '2%'
}

,
m essage, .
a ni ma t e () :

$ ( 1#me s s a ge 1) . a n i m a t e (
{
left: 16501;
o p a c i t y : . 5,
f o n t S i z e : f2 4 p x f ;
},
1500
);
a n i ma t e () .
, CSS,
. (
). , , 1500
(1,5 ).



CSS left, right, top bottom,
CSS position absolute relative.

288
6.

(.
CSS).


, += -= .
, , 50
. :

$ ( 1#moveIt1).click(function() {
$ (this) .animate(
{
l e f t :1+ =5 0px 1
},
1000); animate
}); click

j Query (slideUpO, fadeln()


. .), animation () ,
, : easing.
,
, , , ,
.
.

jQuery e a s i n g : swing
l i n e a r . l i n e a r ,
(,
,
). swing
: ,
. swi ng ,
e a s i n g , j Query swing.

e a s i n g
j Query, ,
, :
$ ( 1#e lement1) .s l i d e U p (1000, 1l in ear 1);

289
II. jQuery

a n i ma t e () e a s i n g
,
CSS, ,
. , e a s i n g
, , :
$ ( 1#message1).a n i m a t e (
{
left: 16501,
opacity: .5,
fontSize: f24px'
},
1500,
1linear 1
);
,
j Query.
, ,
. ,
jQuery UI e a s i n g .
j Query UI III ,
,
.
j Query UI (
JavaScript),
j Query.
j Query UI
( : api.jqueryui.
com/easings/). , , div
, ,
,
easelnBounce. div animate,
:

1 <script src="_js/jquery.min.js"></script>
2 <script src="_j s/jquery-ui .min .j s f,x / s c r i p t >
3 <script>
4 $ (document).r e a d y (function() {

290
6.

5 $ ( 1#animate1).click(function () {
6 $ (this) .a n i m a t e (
7 {
8 width: M O O p x 1,
9 height: f4 00pxf
10 },
11 1000 ,
12 'easelnBounce1); // animate
13 }); // click
14 }); // ready
15 </script>

1 2 j Query j Query UI.


4 ready () (.
j Query 5), 5 div
click. 6
12. this $ (this)
4, $ (this)
, , div.
, div
, ( 8 9).
1 (1000 ),
12 easelnBounce (
, easelnOutSine, easelnCubic . .).


, , ,
e a s in g _1 .h t m l e a s in g _ n p n M e p 2 .h t m l .
e a s in g _ n p n M e p 2 .h t m l
toggle () easing
div.



- .
, , ,
. ,
291
II. jQuery

. ,
,
. , ,
, ,
,
.


.
.
( fadeTo ()
).

,
photo, caption.
,
:
$ ( f#photof) .f a de ln(1000,fu nction() {
$ ( 1#caption1) .f ad eln (1000);
}) ;
,
, ,
fadeln :

$ (1#photo, #caption1) .h i d e ();


$ (1#photo1) .fade ln(1000,fu nction() {
$ (1#caption 1) .f a del n(1000) ;
}) ;
animate (),
,
CSS, ,
easing.
easing ,
animate (), ,
. ,
,
( ).
animate (), :

292
6.

1 $ ( 1#ph oto 1) .w i d t h (0) .h e i g h t ( ) .css ('opacity1,0) ;


2 $ (1#capti on 1) .h i d e ();
3 $ (1#p hot o') .a n i m a t e (
4 {
5 w i d t h : 120 0 p x 1,
6 height: f100p xf,
7 opacity: 1
8 },
9 1000,
10 functi on() {
11 $ ('#captionf) .fadeln(1000);
12 }
13 ); // animate

1 ,
0. (
). 2 . 3
13 , 10 12
. ,
, , ,
( ,
) .


callback.htm l
.

,
: , ,
,
. ,
:
$ (1#photo1) .a n i m a t e (
{
l e f t : 1+ =4001,

,
},
1000

293
II. jQuery

function() { // callback
$ (1#caption1) .f a del n (1000,
function() { // callback
$ ( 1#photo, #caption1).fad eOu t(1000);
} // callback
); // fadeln
} // callback
); // animate


m ultiple-callbacks.htm l
.


,
.

, ,
.
anim ate (), ,
. :

$ (1#photo') .a ni m a t e (
{
left: '+=4001,
},
1000
); // animate
$ (1#photo f) .f adeOut(3000);

, j Query
, ,
fadeOut (). (.
4),
:

$ (1#photo1) .a n i mat e(
{

294
6.

l e f t : 1+=400 1,
},
1000).f a de Ou t(3000);

, ,
, :

$ ( 1#phot o1).f a d e l n (1000).fa deOut(2 000).fad eln (250);


,
, : api.jquery.com /jQ uery.queue/.

j Query-,
d e l a y ().
,
. , ,
10 .
d e l a y () :

$ (f# pho to1) .f a d e l n (1000) .delay(10000) .fadeOut(2 50);



animate ()
div . div
(.
CSS),
(. 6.3 ).
div,
(. 6.3 ).
,
div easing.



JavaScript 1
.

295
II. jQuery

. 6.3. ,
(). an i mat e (),
()

:
1. d iv .
, j Query
, div,
.
2. hover.
hover (
5) j Query-
( JavaScript),
,
, ,
( hover
mouseEnter mouseLeave).
3. anim ate () mouseEnter.
div,
left div, -

296
6.

. ,
div .
4. animate ()
mouseLeave.
d iv ,
d iv
.

1. 06_02.html .
j Query
$ (document) . r e a d y () (.
j Query 5).
d iv e as i ng,
jQuery UI.
2. script
, :
<s c r i p t s r c = " . . / _ j s / j q u e r y - 1 . 7 . 2 . m i n . j s " > < / s c r i p t >
<script src=" ../_js/jquery-ui .min. js"X/script>
jQuery UI jQuery. jQuery
JavaScript,
j Query

. d iv
h o v e r ().
3. $ (document) .
ready () $ ( 1#dashboard1) . hover () ; / /
hover, :
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$ ( 1# d a s h b o a r d ' ) . h o v e r ( ) ; / / h o v er
} ); / / r e a d y
$ ( 1# d a s h b o a r d 1) d iv (
d a sh b o a rd ). h o v e r ()
, , ,

297
II. jQuery

d iv
. ,
: h o v e r (),
.
, ,
, .
4.
hover () :
$ (document).r e a d y (function() {

$ ( 1# d a s h b o a r d 1) . h o v e r (
function() {

},
function() {

}
) ; // hover
}); / / ready

JQuery- h o v e r ()
(. 12). , ,
,
.
,
, .


, ,
. 4 c o n s o l e .
l o g ( 1m o u s e E n t e r 1)
c o n s o l e . l o g ( 1m o u s e L e a v e ') ,
.
, : F12 Internet
Explorer; C trl+S hift+J 86+X+J (OS X) Chrome; C trl+S hift+K
++ (OS X) Firefox; 38+X+C Safari.
d i v
mouseEnter ,
mouseLeave . ,
.
.

298
6.

5. $(this).
animate(); // animate.
t h i s $ (t h i s )
4 $ ( t h i s )
, .
$ ( t h i s ) d iv
d a sh b o a rd . ,
.
6. CSS,
:
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {

$ ( 1# d a s h b o a r d f ) . h o v e r (
f u n c t i o n () {
$ (this) .animate(
{
left: 'O',
backgrouncLColor: 1rgb (27 ,45, 94) 1

}
); / / a n i ma t e
},
f u n c t i o n () {
}
); / / h o v e r
}); / / r e a d y
a n i ma t e ()
(.
CSS 4), CSS.
d iv l e f t , 92
,
. l e f t
0, .
j Query UI, -.
.

299
II. jQuery

7.
, Enter 500.
,
a n i ma t e (), 500
(500 ). ,
e a s i n g .
8. 500, Enter
1easelnSine1, :
$ (document) . r e a d y (f u n c t i o n () {
$ ( 1#d a s h b o a r d *) . h o v e r (
f u n c t i o n () {
$ ( t h i s ) .animate(
{
l e f t : ' O' ,
b a c k g r o u n d C o l o r : 1r g b ( 2 7 , 4 5 , 9 4 ) 1
},
500,
'easelnSine1
); / / a n i ma t e
},
f u n c t i o n () {
}
); / / h o v e r
} ); / / r e a d y
a n i ma t e () ' e a s e l n S i n e *
e a s i n g ,
, ,
.
9. .
div.
. ,
, .
,
. a n i ma t e ()
.
300
6.

10. :
$ (this) .a n i m a t e (
{
l e f t : 1- 9 2 1,
backgroundColor: 'rgb (255, 211, 224) 1
},
1500,
1easeOutBounce1
); // animate

,

. 1,5
. easing .
11. .
d iv , .
, .
,
: d iv
,
.
, j Query
. ,
, ,
. ,
, , ,
j Query , .
,
d iv
,

, : ,
, , , . .

. ,
d iv ,
, j Query
, -
301
II. jQuery

. , j Query
stop () .
12. . s to p () $ ( t h is ) . anim ate
. (
):
$ (document).r e a d y ( f u n c t i o n () {
$ ( '# d a s h b o a r d ') .h o v e r (
f u n c t i o n () {
$ (this) .s t o p () .a n i m a t e (
{
left: 'O',
b a c k g r o u n d C o l o r : 1r g b (27, 45,94)'
},
500,
'e a s e l n S i n e 1
); // animate
},
f u n c t i o n () {
$ (this) .s t o p ().a n i m a t e (
{
left: 1- 9 2 p x 1,
backgroundColor: 1r g b (255,211,224) '
},
1500,
1e a s e O u t B o u n c e 1
); // animate
}
); // hover
}); // ready

stop () ,

.
.
_06_02.html
.
302
6.

jQuery,
CSS3

CSS, , , , j Query.
, CSS
CSS, CSS
(. 6.4).

. 6.4. , JavaScript
CSS3 jQuery
, : codepen.io/rachelnabors/full/
Iqswg. jQuery , CSS.
,

CSS ,
. -
Internet Explorer 8 9 ,
CSS. ,
, .
303
II. jQuery

, j Query-
.


CSS. ,
font-family
.
CSS
.
: developer.m ozilla.org/ru/docs/W eb/C S S /C S S _
anim ated_properties

,
CSS, j Query -
. JavaScript, CSS
. : hover,

.
: a c ti v e .
, ,
CSS . ,
CSS ,
. ,
CSS
,
: , d iv
, .



CSS. ,
CSS3 .
CSS w w w .css3 files.co m /
tra n s itio n / w w w .css3 files.co m /an im atio n /.

jQuery CSS

CSS CSS.
,
304
6.

. ,
.b u tto n , .
: h o v e r .b u tto n :h o v e r
. . b u tto n ,

, ,
,
.

,
CSS . ,
CSS.
:

img {
o p a c it y : 1;
}
CSS o p a c it y
. 1 ,
0 . CSS,
0:
im g .fa d e d {
o p a c it y : 0;
}

CSS t r a n s i t i o n .
(,
). img. , ,
, CSS,
:
img {
o p a c it y : 1;
- w e b k i t - t r a n s i t i o n : o p a c it y I s ;
- m o z - t r a n s i t i o n : o p a c it y I s ;
- o - t r a n s i t i o n : o p a c it y I s ;
t r a n s i t i o n : o p a c it y I s ;
}
305
II. jQuery


. ,
1 , Is .



CSS,
, , , w e b k i t -
t r a n s i t i o n .

.
CSS,
CSS ,
, t r a n s i t i o n - w e b k i t - t r a n s i t i o n .

, ,
faded 100%
0% 1 . j Query-
fadeOut () 1.
faded. j Query.

, click () :
$ (1i m g 1) .click(function() {
$ (this) .addClass(1fa ded1);
}
, ,
j Query . -

(. 6.5). ,
,
toggleClass ():

$ ( 1i m g 1) .click(function () {
$ (this) .toggleClass(1fade d1);
}
toggleClass () ,
, , . CSS
, , -,
j Query CSS.
306
6.



. - (
DOM), .
t o g g l e C l a s s (). -
, f a d e d . ,
, , d i s p l a y : h i d d e n ,
, .

. 6 .5. jQuery CSS .


jQuery, CSS.
.
.
Internet Explorer 9 ,
CSS.
jquery-trigger-cssanimation.html,

jQuery CSS

CSS
.
, CSS
. , ,

307
II. jQuery

, ,
, div ,
, , , . ,
CSS ,
CSS
,
.

CSS- .
, ,
.
j Query . ,
, div
. (,
.)
.
@keyframes:
0keyframes growProgressBar{
0% {
width: 0%;
background-color: red;
}
50% {
background-color: yellow;
}
100% {
width:88%;
background-color: green;
}
}
,
g r o w P r o g r e s s B a r
.
CSS, .
, 0 %
, ,
0%, .
308
6.


Chrome Safari
@ w e b k i t - k e y f r a m e s , . ,
Internet Explorer 9
.


, .
,
CSS. ,
10 (
). (0% 10 )
, 0%. 5 (
) . , 10 ,
, ,
88%.
, 0%
88% .


. ,
HTML-: <div class="progressBar">.

div :

.progressBar {
animation-name: growProgessBar;
animation-duration 10s;
animation-fill-mode: forwards;
}

10 . CSS
animation-f ill-mode : forwards; ,

. div
88%, . (
, .)


-. ,

309
II. jQuery

.
( ,
) : a n im a tio n - p la y -
s t a t e . ,
p aused:
.progressBar {
animation-name: growProgessBar;
animation-duration 10s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
j Query . ,
,
a n i m a t i o n - p l a y - s t a t e ru n n in g .
c s s (). ,
s t a r t ,
. , j Query:

$ ( 1#s t a r t 1) . c l i c k ( f u n c t i o n () {
$ (1 .progressBar ') .css (fanimation-play-state 1, -1
1running1);
}) ;
p au se,

:

$ ( 1# p a u s e ' ) . c l i c k ( f u n c t i o n () {
$ (1.progressBar1) .c s s (1animation-play-state 1,
pau sed 1);
}) ;
, j Query .
CSS, ,
jQuery CSS
. , j Query!

, .
:

310
6.

.animateDiv {
animation-name: growProgessBar;
an i m a t i o n- du ra tio n 10s;
a n i m a t i o n - f i l l - m o d e : forwards;
}
, ,
. animateDiv.
, ,
. j Query,
. ,
.
animation-play-state:

$ ( 1# s t a r t 1) . c l i c k ( f u n c t i o n () {
$ (1 . p r o g r e s s B a r 1) .a d d C l a s s (1a n i m a t e D i v 1);
}) ;

jquerytrigger-css-animation1.html jquery-trigger-css-animation2.html
.
CSS-
. , Internet Explorer 9
. , j Query
CSS-.


, , ,
CSS- JavaScript. W3C

, CSS-
JavaScript ,
CSS-. jQuery
CSS-, :
b lo g .te a m tre e h o u s e .c o m /u s in g -jq u e ry -to -d e te c t-w h e n -c s s 3 -
anim ations-and-transitions-end.
7
,
JQUERY

-
,
. ,

, , ,
.
,
. j Query
.
, j Query
, ,
.


JavaScript ,
:
, .
JavaScript
, ,
.


CSS .
CSS,
, JavaScript
-,
,
-
312
7. , jQuery

src

, -,
src ( source),
, , -.
, ,
. j Query,
src.

, ,
photo. HTML- :

<img s r c = ,fimages/image .jpg" width="100" height=" 1 0 0 -*


i d = " p h o t o ,f>

,
attr () (. , HTML
4) src :

$ (1# p h o t o 1) .attr ( 1s r c 1, 1i m a g e s / n e w l m a g e .j p g 1) ;


src ,
JavaScript,
, JavaScript-. ,
JavaScript (.
JavaScript 1), . ,
, newlmage.
jp g images, ,
. ,
.
,
JavaScript (.
URL- 1, ).

src
img. , alt
HTML-,
alt, . , width height
HTML-, src
.
, .
313
II. jQuery


,
alt .
, width
height HTML-.
,
.

,
, src, width, height alt
img:

1 var newPhoto = new I m a g e ();


2 newPhoto.src = 1i m a g e s / n e w l m a g e .j p g 1;
3 var photo = $ ( f# p h o t o l);
4 p h o t o .a t t r (1s r c 1,n e w P h o t o .s r c ) ;
5 p h o t o .a t t r ('width ',n e w P h o t o .w i d t h ) ;
6 p h o t o .a t t r (1h e i g h t T,n e w P h o t o .h e i g h t ) ;


,
. !

1,
. new Image () :
, .

. 3
, 46 ,
.


JQuery- a ttr()
HTML.
(. CSS
4), .
jQuery, , :
var newPhoto = new Image ();
newPhoto.src = 1images/newlmage. jp g ';

314
7. , jQuery

$ ( #photo1) . a t t r ({
src: newPhoto.src,
width: newPhoto. width,
height: newPhoto. height
}) ;


. ,
.
.
:
,
, -.

jQuery

,
src
.
4, j Query
HTML-.
j Query , HTML-.

img img
jQuery r ep laceWith ().

, :

<img s r c = ,fsad.png" a lt="Sad F a c e height="50" -1


w i d t h = " 5 0 id="swap">

img :

$ (1#swap f) .r eplaceWith ( 1<img s r c = ffh a p p y .png" -1


a l t = ,f 11 h e i g h t = n 1 0 0 ff width="150" -1
i d = " s w a p " > 1) ;

MeojQuery replaceWith ()
HTML-, .
src, alt, width
height , replaceWith (),

315
II. jQuery

, <img src="happy.png" a l t = " "


height="100" width="150" , ,
id="swap">.
, ,
.


replacewith () HTML-,
jQuery. , HTML-.
, ,
HTML- , :
var oldlmage = $ ( 1#swap' ) . replaceW ith ( 1<img -1
src="happy.png" alt="PafloCTHoe " height=" 100 " *
width=,,150 " id="swap">') ;
oldlmage HTML-,
.
:
<img src^'sad.png" alt=ffrpycTHoe " height^'SO 4-1
width=,f50 " id=,,swap,l>
oldlmage ,
, .


.
src, . -
,
, ,
.
.
,
,
. ,
, .

, .
, ,
,
.
316
7. , jQuery

,
src.
, :

var newPhoto = new I m a g e ();


newP ho to. sr c = 1i m a g e s / n e w l m a g e .j p g ';

,
, .

(. 2),
, ,

-:

var p rel oa dl ma ges = [1i m a g e s / r o l l . p n g 1,


'i m a g e s / f l o w e r .p n g 1,
1i m a g e s / c a t .j p g 1];
for (var i=0; I < p r e l o a d l m a g e s .length; i++) {
new I m a g e ().src = p r e l o a d l m a g e s [i ];
}
13 JavaScript,
preloadlmages,
,
(
2, ,
). 4-6
JavaScript for (. for 3),
preloadlmages. 5

src, preloadlmages
.

j Query,
, new Image ():

var prel oa dl ma ges = [1i m a g e s / r o l l . p n g 1,


1i m a g e s / f l o w e r . p n g 1,
1i m a g e s / c a t .j p g 1];
for (var i=0; i < p r e l o a d l m a g e s .length; i++) {

317
II. jQuery

$ ( 1<im g> 1).a t t r (1s r c 1,preloadlmages[i]);


}
5 j Query img.
.
j Query <img> ( < >), HTML-
. j Query < >,
$ ( 1img1). j Query
. , j Query
HTML-, .

.attr (1src 1, p re lo ad lm age s [i] )


attr () (. ,
HTML 4).
src, ,
- .

(
j Query) ,
, .

( )
, (.
),
. ,
. ,
photo. ,
, .
j Query:

1 < script src="j s/j query .min .j s " x / s c r i p t >


2 <script>
3 $ (document) .re ady(function () {
4 var newPhoto = new I m a g e ();
5 newPhoto.src = 1i m a g e s / n e w l m a g e .j p g ';
6 $ ('# photo1) .mouseover(function() {
7 $ (this) .attr (1s r c 1, n e w P h o t o . s r c ) ;
8 }); // m o us eov er

318
7. , jQuery

9 } ); / / re a d y
10 < / s c r i p t >
3 , HTML-,
JavaScript HTML . 4 5
,
.
m ouseover, , s r c
.

, ,
mouse o u t
.
5, j Query
h o v e r (),
(m ouseover) (mouseout) :
1 < s c r i p t s r c = " j s / j q u e r y . min . j s 11> < / s c r i p t>
2 <script>
3 $ (document) . r e a d y ( f u n c t i o n () {
4 v a r newPhoto = new I m a g e () ;
5 n e w P h o t o . s r c = 1im a g e s /n e w lm a g e . j p g 1;
6 var o ld S r c = $ ( 1# p h o to ) . a t t r ( s r c 1) ;
7 $(1#photo1).hover(
8 function() {
9 $ ( t h i s ) . a t t r ( 1s r c 1, ne w P h o to . s r c ) ;
10 },
11 function() {
12 $ (this).attr( 1src1, oldSrc);
13 } ) ; / / hover
14 } ) ; / / ready
15 </script>
h o v e r () :
, , ,
; , , ,
.
o l d S r c s r c
, .

319
II. jQuery

.
h o v e r () : ,
.
,
. , ,
h i .

, , .
, :

1 <s c r i p t s r c = " j s / j q u e r y . m i n . j s " x / s c r i p t >


2 <script>
3 $ (d o c u m e n t) . r e a d y ( f u n c t i o n () {
4 v a r newPhoto = new I m a g e ( ) ;
5 n e w P h o t o . s r c = 1i m a g e s /n e w lm a g e . j p g 1;
6 v a r o l d S r c = $ ( 1# p h o t o 1) . a t t r ( 1s r c 1) ;
7 $ ( 1h i 1) . h o v e r (
8 f u n c t i o n () {
9 $ ( 1# p h o to f ) .a t t r (1src1, newPhoto.src);
10 },
11 f u n c t i o n () {
12 $ ( 1# p h o to 1) . a t t r ( 1s r c ' , oldS rc);
13 }); / / h o v e r
14 } ); / / re a d y
15 < / s c r i p t >




(. 7.1),


.

.

320
7. , jQuery

. 7.1 . ,

07_01.html 07
(. 7.2). ,
,
d iv g a l l e r y .

. 7.2. HTML- d i v ,
, . ,

321
II. jQuery

.
,
d iv .
h o v e r ()
d iv . h o v e r () ,
,
, .

,
d iv ,
d iv ,
,
h o v e r ().



JavaScript 1
.

1. 07jD1.html -
07.
j Query
$ (document) . r e a d y () (.
j Query 5).
d iv j Query- e ac h (),

4.
2. $ (document) .
ready () $ ( 1# g a lle r y im g1) . each (fu n c tio n () {.
# g a l l e r y img img ,
g a l l e r y . J Query- e a c h ( )

, .
e ach ()
(. 4).
e a c h ()

322
7. , jQuery

,
, .
3. Enter }) ; / /
each ,
ready () JavaScript.
:
1 < script src=" ../_j s/ jquery .min .jsnx/script>
2 <script>
3 $ (document).r e a d y (f u n c t i o n () {
4 $(f#gallery img1).each(function() {
5
6 }); // each
7 }); // ready

, .
src ,
.


JavaScript/ / each / / ready
. ,
.

4. ( 5 3)
:
var imgFile = $ (this).attr(1src1);
t h i s $ ( t h i s )
4, $ (t h i s )
, .
$ (t h i s )
. J Query- a t t r () (. ,
HTML 4)
HTML.
s r c im gFile.
, s r c images/small/blue.jpg,
, .

323
II. jQuery

s r c
.
5. Enter ,
:
v a r p r e l o a d l m a g e = new I m a g e () ;
v a r imgExt = / ( \ . \ w { 3 , 4 } $ ) / ;
p r e l o a d l m a g e . s r c = i m g F i l e . r e p l a c e ( i m g E x t , f_ h $ l 1);

.
p r e l o a d l m a g e .

s r c .
(
)
,
, ,

. ,

.
(
) .
,
, , .
-
_,
. , blue.jpg
blue_h.jpg.
, .
. s r c

( p r e l o a d l m a g e . s r c = 1_ i m a g e s / s m a l l / b l u e _ h . j p g 1),
JavaScript s r c ,
,
. ,
,
h

324
7. , jQuery

.jpg. Jmages/small/blue.jpg _images/small/blue_h.jpg,


a _images/small/orange.jpg _images/small/orange_h.jpg.
. (v a r imgExt
= / ( \ . \ w { 3 , 4 } $ ) / ; ) .
(
16) ,
, , .
, , ,
, ,
, .jpg /images/small/blue.jpg .png /images/orange.png.
r e p l a c e ()
( p r e l o a d l m a g e . s r c = i m g F i l e . r e p l a c e ( i m g E x t , 1_ h $ l 1) ; )
(. 16)
- .
_h, images/small/blue.jpg images/small/
blue_h.jpg. ,
(.
16), ,
, .
,
, h o v e r ().
6. Enter ,
911:
1 < s c r i p t s r c = n . . / _ j s / j q u e r y . m i n . j s nx / s c r i p t >
2 <script>
3 $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {
4 $ ( ' # g a l l e r y im g 1) . e a c h (f u n c t i o n () {
5 v a r i m g F i l e = $ ( t h i s ) . a t t r ( 1s r c 1);
6 v a r p r e l o a d l m a g e = new I m a g e ( ) ;
7 v a r im gExt = / ( \ . \ w { 3 , 4 } $ ) / ;
8 p r e l o a d l m a g e . s r c = i m g F i l e . r e p l a c e ( i m g E x t , 1_ h $ l 1) ;
9 $(this).hover(
10
11 ); // hover
12 }); / / each
13 ) ) ; / / re a d y

325
II. jQuery

hover ()
mouseenter mouseleave . ,
.


.
,

.
7. ( 10 6)
:
function() {

$ (this) .attr (1src f, preloadlmage.src);

},
s r c
s .
,
h o v e r ()
, .
8. , ( 1315 ).
:
1 <script src=" . ./_j s/jquery .min.j s " x / s c r i p t >

2 <script>

3 $ (document).ready(function() {

4 $('#gallery i m g 1).e a c h (fu nction() {

5 var imgFile = $ (this).a t t r (1s r c ');

6 var preloadlmage = new I m a g e ();

7 var imgExt = / (\.\w{3,4}$)/ ;

8 preloadlmage .src = imgFile .replace (imgExt, f_ h $ l ') ;

9 $ (this) .hover(

10 function() {

11 $ (this) .attr('src', preloadlmage.src) ;

326
7. , jQuery

12 },
13 function () {
14 $ (this).attr(1src1, imgFile);
15 }
16 ); // hover

17 }); // each

18 }); // ready

src
. 5 ,
, imgFile.
( 14) ,
src .
, -
, , .


,
CSS.
k y le sch a e ffe r.co m /d e ve lo p m e n t/p u re -css-im a g e -h o ve r/.
,
JavaScript. CSS
, : h o v e r : a c t i v e ,
JavaScript
, ,
. ,
, , .
, ,

.


,
.
(. 7.3).
j Query,
.

327
II. jQuery

. 7 .3. .
, , ,
.
_07_02.html 07


.
, ,

.

JavaScript,
, JavaScript,
. ,
,
(. 7.4). , JavaScript,

. ,
,
, , , .
, JavaScript ,
.
328
7. , jQuery

. 7 .4 . .
, .
,
d i v p hot o

,
,
.
. ,
.
, ,
.
JavaScript ,
,
.
h r e f ,
. h r e f ,
.
.
h r e f .
.
,
.

.
.
329
II. jQuery

,
- :
; d iv
p h o to (. . 7.4).



JavaScript 1 .

1. 07_02.html -
07.

d iv
.
, ,

.
2. JavaScript,
:
$ ( f # g a l l e r y ' ) . c l i c k (f u n c t i o n ( e v t ) {
}); / / c l i c k
# g a l l e r y
g a l l e r y , . c l i c k
j Query (.
: jQuery 5,
). c l i c k
(
5, , ,
).
e v t .
,
.
3. , 2,
:
e v t . p r e v e n t D e f a u l t () ;
330
7. , jQuery

,
, (-, ,
PDF- . .).
, , JavaScript,
.
, JavaScript ,
p r e v e n t D e f a u l t () (.
5).
h r e f .
4. Enter
:
$ ( 1# g a l l e r y 1) . c l i c k ( f u n c t i o n ( e v t ) {
e v t . p r e v e n t D e f a u l t () ;
var imgPath = $ (this).attr('href1);
}); / / c l i c k
$ (t h i s ) ,
, , . h r e f
, .
.
,
, .
,
, .
, , .


, c l i c k ()
. ,
(. ,
JavaScript 2).
.

5. Enter :
v a r old lm a ge = $ ( 1#photo i m g ' ) ;
old lm a ge j Query,
img d iv (. . 7.4).
.
331
II. jQuery

6. Enter
:
var newlmage = $ ( !<img s rc = "1 + imgPath + lff> f);

: j Query
, HTML- . ,
$ ( 1i m g 1) .
j Query
. , $ ( 1<></> *)
, .
img
newlmage.

j Query
(, 1<></> 1),
( ) .
( ) <img s r c = 1 1;
imgPath ( 4),
(, . . / _ i m a g e s / l a r g e / s l i d e l .
jpg); ( ) ">.
HTML-: <img s r c = " . . / _ i m a g e s /
l a r g e / s l i d e l . jpg">.
j Query, , $ ( 1<img s r c = " . . / _ i m a g e s /
1a r g e / s 1i de 2 . j p g " > 1), .
,
.
7. , 68,
:
1 $ ( f#gallery 1).click(function(evt) {

2 evt.preventDefault() ;

3 var imgPath = $ (this) .a t t r (1href 1);

4 var oldlmage = $ (1#photo i m g 1);

5 var newlmage = $ ( !<img s r c = "! + imgPath + f,f> !);

6 newlmage. h id e () ;
7 $ (1# p h o to 1) . prepend (newlmage) ;

8 n e w lm a g e .fa d eln (1 0 0 0 );
9 }); // click

332
7. , jQuery

6 (
newlmage) h i d e (),
6.

,
, 5,
,
. , ,
d iv ( 7).

p r e p e n d () (
4) HTML- ( ,
). d iv
. . 7.5 ,
. ,
8 f a d e l n ()
1000 ( ).

, .

. 7 .5 . ,
( ,
), CSS.

.
d i v ,
. , 07_02.html,
07 CSS (.
#photo img). , , ,
r e l a t i v e p o s i t i o n ,


II. jQuery

8. Enter :
oldlmage.fadeOut(1000,function(){
$ (this) .r e m o v e ();
}); // fadeout

5 oldlmage
. ,
fadeOut ().
: (1000
), (
6),

img .


remove ()
4.
, HTML- ,
. ,
img (. 7),
, .
img, -
-, .

.
div, , .
img,
, , .
JavaScript!
9. c l i c k () ( 13
), :
1 $ ( f#gallery 1).c l i c k (function(evt) {

2 evt.preventDefault();

3 var imgPath = $ (this).a t t r (1href 1);

4 var oldlmage = $ (1#photo i m g 1);

5 var newlmage = $ ( !<img s r c =" 1 + imgPath + fl!> f);

6 newlmage.h i d e ();

334
7. , jQuery

7 $ (1#p hoto1) .prepend(newlmage);

8 newlmage.f a d e l n (1000);

9 oldlmage.fadeOut(1000,function(){

10 $ (this).r e m o v e ();

11 }); // fadeout

12 }); // click

13 $ ( f#gallery a : f irs t1) .click ;

.
# g a l l e r y : f i r s t d iv
. c l i c k (). ,
, , .
,
j Query ,
. ,
,
, 111.

.

.
, .

( ,
_07_02.html,
).


.
, ,
,
. .
HTML,
, JavaScript
.
JavaScript , ,
.

335
II. jQuery

, . ,
,
HTML-, -.

JavaScript
, , ,
JavaScript .
,

JavaScript.

JavaScript

,
. ,
,
, , , ,
(,
, ).

j Query
. $ ( ' ') j Query,
. , j Query
, ,
.
,
, inNav, : $ ( 1#mainNav 1).
(.
4), , h r e f
( , )
, , ,
PDF (. 4).

, j Query-
. ,
e ac h () (.
4), ,
a d d C l a s s () (. 4),
(. :
jQuery 5). ,
.

336
7. , jQuery

,
, . , ,
, .
, JavaScript
. ,
h r e f
img. h r e f ,
-, ,
- -.
h r e f ,
j Query- a t t r () (.
, HTML 4). ,
,
. :
v a r hom ePath = $ ( 1# h o m e l i n k 1) . a t t r ( 1h r e f ' ) ;
.
, URL- ,
, . ,
, www.
barkbeetles.org/. ,
(www.barkbeetles.org), ,
, , .
JavaScript:
1 $ ( 1a [ h r e f A= flh t t p : / / " ] f ) . e ac h (f u n c t i o n () {
2 var href = $ (this).a t t r (fhref 1);
3 h r e f = h r e f . r e p l a c e ( 1h t t p : / / 1, 1' ) ;
4 $ ( t h i s ) . a f t e r ( 1 ( f + h r e f + f ) f );
5 });


,
. !

1 ,
e ac h () (. 4),

337
II. jQuery

.
24. 2
href (, http://www.barkbeetles.org). 3
, URL-, h t t p : / / ,
href : www.barkbeetles.org
( JavaScript replace ()
16). , 4
href ( ) : (www.
barkbeetles.org). 5 .


, , .
- ,
d iv .

click, ,
, ,
, . ,
,
,
. ,
.

,
.


false j Query-
preventDefault () (.
5). , ,
.
, JavaScript
. ,
JavaScript, ;
JavaScript ,
.

,
:

338
7. , jQuery

1. .
, ,
.
2. c l i c k .
, j Query- c l i c k (),
.
, ,
.
.
3. .
, , ,
d iv
. , show ()
,
j Query (. 6).
4. !
. ,

.
,
. , showForm,
div loginForm:
1 $ ( 1tshowForm1).c l i c k (function() {

2 $ ( 1#loginForm1) .f a d eln (1s l o w 1);

3 return false;

4 });
1 1 2, . 2
. 3 , :
! .
return false; ,
JavaScript
, .
j Query- preventDef ault ()
:

339
II. jQuery

1 $ (1#showFormf) .c l i c k (function(evt) {
2 $ (1#loginFormf) .f a d e l n (1s l o w 1);
3 evt.preventDefault();
4 });


. ,
evt, (
5).
preventDef ault ()
,
, .


,
, . -
, , ,
.
,
. ,

.

. , ,
,
- . HTML
target.
_blank, (
, ).



,
. , : w w w .u se it.com /
a le rtb o x/9 9 0 5 3 0 . h tm l.

target=M_bla nk If
. , JavaScript
340
7. , jQuery

j Query
( )
. :
1. , .
j Query (.
: jQuery 4).
2. t a r g e t _ b la n k .
: HTML-,
. , -,
HTML 4.01 XHTML 1.0,
, HTML5. -,
, HTML- (, validator.
w3.org/) -,
HTML, JavaScript. , ,
t a r g e t ,
.

j Query,
:

$ ( 1a [ h r e f ="h t t p ://*] 1) . a t t r (' t a r g e t 1, 1_ b l a n k 1) ;

] Query $ ( 1a [ h r e f A= " h t t p : / / ] 1)
(. 4)
, h t t p : / / (, http://
www.yahoo.com). ,
j Query- a t t r () (. ,
HTML 4),
t a r g e t _ b l a n k . !

-,
h t t p s : / / , :

$ (,a[hrefA= ,lhttp://n ] , a [href/N= ,Thttps ://"] ')^


. a t t r ( 1t a r g e t ' , 1_ b l a n k 1) ;

URL-
, h ttp :// https://.

,
, . ,

341
II. jQuery

www.your_site.com
: http://www.your_site.com/a_page.html,
.
,
:

var myURL = location.protocol + '//' + location.^


hostname; $ (1a [href A="http://"], a [href A="https ://" ] 1) .-
not (f [href A=" 1+myURL+ 111] 1) .attr (1target1, 1_blank') ;


J ,
.
JavaScript ,
.

URL-
myURL. URL-
window.
URL http: / / (
https : / / ) .
protocol. , , , www.
sawmac.com, hostname.
JavaScript- location .protocol + '//' + location.hostname
, : http://www.sawmac.com.
, ,
JavaScript. ,
, http://www.your_site.
, - , location,
hostname www.your_site.com.

j Query,
, h t t p : / / . not ()
, URL-,
, http://www.sawmac.com. ( not ()
j Query.
, : api.jquery.com/not.)

,
jQuery, $ (document) . r e a d y ()

342
7. , jQuery

(. j Query 5),
:

<script src="j s/jquery.min.j s"></script>


<script>
$ (document).r e a d y (fu nction() {
var myURL = location.protocol + '//' + location*-1
.hostname;
$ (1a [href A= ,fh t t p ://"], a [href A= 11https ://"] 1)-1
.not (' [hrefA= " 1+ myURL+f"] 1) .attr (targ et1, '_blankf);
}) ;
</script>

JavaScript
(. JavaScript 1).
, ,
. ,
.
, open_extemal.js
:
function openExt() {
var myURL = location.protocol + '//' + location -1
.hostname;
$ (1a [hrefA="h t t p :/ /11] , a [hrefA= "h t t p s ://]') ^
.not (1 [hrefA=" 1+myURL+ 111] 1) .attr (*ta rget1, '_ b l a n k 1) ;
}
,
:
<script src="j s/j query.min.j s " x / s c r i p t >
< script src="j s/open_external.j s"></script>
<script>
$ (document).r e a d y (function() {
o p e n E x t ();
// JavaScript
}) ;
</script>

343
II. jQuery

,

, , ,
.

openExt () ,
(

, ). , js
.


,
, , ,
, .
open (), :

open(URL, name, p r o p e r t i e s )
open () . URL-
, ,
h r e f (, h ttp://
www.google.com, /pages/map.html .././portfolio.html).
, , ,
,
2. ,
,
(, ).


. ,
Google 200
, :

v a r newWin= open ( 1h t t p : / / www. g o o g l e . com/ 1, 1theWin 1, <-*


1h e i g h t = 2 0 0 , w i d t h = 2 0 0 1);


newWin.
,
.

344
7. , jQuery


, (
' thewin'), .
, ,
, . , -,
open (),
, .


:
, , . .
(. 7.6). , ,
.
,
,
open (). ,
, :
var winProps = 'width=4 00,height=300,location=yes';
var newWin = o p e n (1ab o u t .h t m l 1, 1a W i n 1,winProps);

. 7.6. ( ,
) .
,

.
JavaScript

345
II. jQuery

,
, ,
yes ( )
( ).
, (,
l o c a t i o n , ,
). h e i g h t ,
width, l e f t , t o p t o o l b a r .
,
,
JavaScript,
.
h e ig h t .
, . ,
.
w idth .
, ,
.
l e f t .
top .
s c r o llb a r s ,
,
. ,
. ,
( , ),
, , Chrome Safari
.
s ta tu s
. Firefox Internet Explorer
, .
to o lb a r ,
, ,
. Safari
:
, .
lo c a t io n ,
. URL-

346
7. , jQuery

-
. Opera, Internet Explorer Firefox
.
JavaScript, ,
, ,
. Safari
.
menubar ,
(, (File) (Edit),
). ,
Windows; OS X
, .
Internet Explorer 7
, .


JavaScript,
w i n d o w . o p e n ( ) , : experiments.
instrum3nt.com/markmahoney/ball/Hthewildernessdowntown.com/.

,
. ,
:

v a r newWin = open ( 1p r o d u c t s . h t m l ' , 1theWin 1, 1width=300, <-J


h e i g h t = 3 0 0 1);
newWin .

. , ,
c l o s e ():

newWin. c l o s e () ;

,
:
c l o s e () . , c l o s e ()
.

347
II. jQuery

: , newWin. c l o s e ().
, ,
, , .


,
, . ,
c lo s e ( ) ; ,
. (
, , ,
newWin), ,
, :
newWin. c l o s e ().

blur () . ,
.
, -,
pop under ,
, , ,
.
focus () b l u r (),
.
moveBy ()
. .
,
, ,
. , newWin. moveBy (200, 300) ;
, newWin, 200
300 .
, ,
100 300 ,
:

newWin.moveBy( - 1 0 0 , - 3 0 0 ) ;
moveTo () .
l e f t t o p (.
) . ,
,
: moveTo (0,0) ;.

348
7. , jQuery


,
: w w w .a llisn otlo.st.

resizeBy () .
,
,
. , resizeBy (100,200) ;
100 200 .
.
reslzeTo() . ,
resizeTo (200, 400) ; 200
400 .
scrollByO
. ,
scrollBy (100, 200) ; 200
100 .
(
) .
scrollTo()
. ,
scrollTo (100, 200) ;
200 100 .
(
) .


jQuery ScrollTo
JavaScript.
: githu b .com /fle sle r/jq u ery.
scrollTo.


(popup) . ,
open ()
.

349
II. jQuery


, , JavaScript
,
. ,
, .



.
JavaScript
. click
HTML- ( )
. ,
300
,
. , popup,
, j Query:

$ (1.p o p u p 1) .c l i c k (function() {
var winProps=1height=300,width=300,resizable=yes,
scrollbars=yes1;
var newWin=open($(this) .a t t r (* href 1), 1aWin ?,winProps);
}

jQuery
JavaScript jQuery
-, .

. , ?
,

, . 7.7. ,
div, HTML-.
, ,
.

( )
. ,
j Query ,

350
7. , jQuery

. j Query JavaScript,
j Query. -
,
. jQuery UI, III ,
, ,
-.

JavaScript,
.

WOW Slider, . 7.7,


( -
).
, ,
, , , , JavaScript
, . ,
, ,
, ,
.

. 7.7. Wow Slider (wowslider.com) jQuery,


.

351
II. jQuery

,
. , -
j Query : plugins.jquery.com.
, , Sitepoint.com
WebDesignerDepot.com, .
, - Google
Maps j Query , ,
Google .

jQuery?


, , .
,
, ,
- -
. ,
, .

- ,
- JavaScript.

,
.
, ,
.

,
, . ,
, .
- , 0.0.0.1,
, .
. 0.0.1 ,
, 4.1.10
, .
.
j Query .
, Chosen (. 7.8) j Query 5
2013 . , Github (github.com),
,

352
7. , jQuery

j Query, .
. ,
, ,
,
. 4 ,
,
j Query, , , .

. 7.8. jQ uery.com (plugins.


jquery.com ). ,
( , ).
, ( )
. , .
, 14 669 !

Google
Yandex

353
II. jQuery

. ,
XYZ WordPress
! - XYZ ,
.

jQuery
j Query , ,
, , .
.js.
, CSS-,
HTML-,
. , Datepicker, j Query
UI (. 10),
,
,
CSS. , ,
HTML- .

:
1. .
, ,
Github.
,
, , ,
.
.js, .css , .
2. .
.
js ,
JavaScript, .css
CSS.
.css, CSS
.
( )
. ,
,
, JavaScript,
plugins . , ,
354
7. , jQuery

Super Plugin.
jquery.super-plugin.min.js, CSS- super-plugin,
css images.
super_plugin .
superjplugin (, scripts
plugins).
3. CSS- -.
-
,
:
c l i n k h r e f = " c s s / s i t e . c s s " r e l = " s t y l e s h e e t >
c l i n k h r e f = " p l u g i n s / s u p e r _ p l u g i n / s u p e r - p l u g i n . c s s " <-J
r e l = " s t y l e s h e e t ">
4. JavaScript- .
j Query ,
j Query,
:
s c r i p t s r c = " j s / j q u e ry .min. j s " > c /s c r ip t>
c s c r i p t src= " p lu g in s / s u p e r _ p l u g i n / j q u e r y .
super-plugin.m in. j s"> c/script>
5. HTML- .
, .
.
, ,
HTML- .

.
, HTML-,
.

HTML-. , Accordion,
j Query UI (.
9), ,
: HTML-,
, HTML- h,
div:
355
II. jQuery

<div id="accordion">
<> </>
< d i v > n e p B a H coflep:*MMbiM</div>
<> </>
<div>BTopan coep</div>
< / div>
HTML-
: - ,
;
( Wow Slider . 7.6);
.
6. .
.
:
j Query, . j Query
,
HTML-. , jQuery
UI Accordion HTML-,
, a c c o r d i o n ( ) :
$ (1#accordion1) .accord ion ();

, .

,
JavaScript. j Query UI Datepicker
, .
,
, ,
,
:
$ ( 1#date1) .datepicker ({
numberOfMonths: 3,
showButtonPanel: true
}) ;
,
, .
.

356
7. , jQuery




.
- ,
, (. 7.9).
CSS . -, ,
CSS, : ,
, . , CSS
, ,
JavaScript.

. 7 .9 . , ,
.
().
jQuery SmartMenus (www.smartmenus.org)

: ( ), ( )
( ).
()

, JavaScript
, .
j Query SmartMenus,

357
II. jQuery

. ,
,

(. 7.9 ).

HTML CSS,
JavaScript, . HTML
, a CSS
,
, .
JavaScript
.

HTML-

HTML-
, u l. l i
.
ul li,
. , HTML- ,
. 7.9, :

<ul id=flnavigation">
<li><a href="#">floMoic/aX/li>
c l i x a href="#">0 </>
<ul>
c l i x a href="#">Haina < / > < / >
< l i x a href="#"> < / / >
<li><a href="#"> < / > < / >
/ul>
</li>
< l i x a href="#">HaiiiM </>
<ul>
c l i x a href="#">IIlTyKOBMHbi</a>
<ul>
c l i x a href="#fl>npocTaH / > / >
c l i x a href="#"> / > / >
c l i x a href=fl#fl>npoflBMHyTaH / > / >

358
7. , jQuery

</ul>
</li>
<li><a =# ></>
<ul>
< l i > < a h r e f = ,f# lf>ripocToii < / / 1 _ >
<li><a href=,f# > </ > < / >
<li><a href=n# f?>npoflBHHyTb^ </>
<ul>
< l i x a href=M#">npoflBHHyTbDrt A < / a x / l i >
<li><a href=ff#"> B < / a X / l i >
</ul>
</li>
</ul>
</li>
c l i x a href="#> <//1_>
</ul>
</li>
</ul>


, HTML- #
URL- href
< href="#">, .
-
: < href="products/gadgets/basic.html">.

,
. ,
, ,
.
, .
(
),
( ).
. HTML-
:

359
II. jQuery

,
l i ( ). , u l,
, ,
l i (
HTML, :
www.htmldog.com/guides/htmlbeginner/lists/).


, ( ,
) ,
(, ,

). ,
JavaScript, .

j Query SmartMenus, (www.


smartmenus.org),
360
7. , jQuery

,
,
. CSS- sm-core.css
.


.
CSS-: sm-simple.css, sm-clean.
css, sm-blue.css. ,
.

JavaScript

JavaScript
. ,
( ),
; ,
.

,
. , , ,
,
.


. ,
,
. ,
.


.

, .

, ,
, .
CSS JavaScript HTML- ,
HTML- , .

361
II. jQuery



JavaScript 1 .

1. 07_03.html -
07.
,
. ,
JavaScript, .

CSS-.
2.
< lin k h r e f= " . . / _ c s s / s i t e . c ss" r e l= " s ty le s h e e t" >
:
clink href="smartmenus/sm-core-css.css"
rel="stylesheet" > clink href="smartmenus/
sm-simple.css" rel="stylesheet" >

l i n k .
,
,
.
, . 7.9.
HTML- .
3. u l,
( h i) ,
:
Cul class="sm sm-simple">

sm SmartMenus.
,
CSS.
sm-simple , .
2 CSS- (sm-clean.css
sm-blue.css),
. , sm-simple
sm-clean sm-blue.
JavaScript.
362
7. , jQuery

4. < s c r ip t src=" . . / _
j s / j q u e r y . m in . j s "X / s c r ip t > :
< s c r i p t s rc = " s m a rtm e n u s /j q u e r y . sm artm enus .m in . j s"> -1
< /s c rip t>
SmartMenus. , ,
j Query,
s c r i p t ,
j Query. , ,
JavaScript CSS-
smartmenus. ,
, ,
.
(
, ) (
).
.
s c r i p t $ (docum ent) . re a d y ().
5. $ (document) .
ready () , :
$ (d o c u m e n t). r e a d y ( f u n c t i o n () {
$ ( 1. sm1) . smartmenus( ) ;
} ); / / re a d y
j Query,
u l,
, , sm,
$ ( 1 . smf ) . . sm artm enus ()
j Query SmartMenu. ,
!
6. .

.
,
, .
.
.
(.
363
II. jQuery

CSS 4), ,
. ,
,
.
.
,
.
7. , ,
( ):
$ (document).r e a d y ( f u n c t i o n () {

$ (1.s m 1) .smartmenus({ });

}); // ready

.
,
/. , ,
:
{ name : 1D a v e 1 }

name ( ), 1Dave 1
. ,
.
8.
, :
$ (docum ent) . r e a d y (f u n c t i o n () {
$ ( 1. sm1) . sm a rtm e n u s({
}); // smartmenus

}); / / ready

, .
/.
9. , 3-5:
$ (document).r e a d y (f u n c t i o n () {

$ ( 1. sm1) . sm a rtm e n u s({


showFunction: function($ul, complete) {
$ul.slideDown(250, complete);

364
7. , jQuery

}
}); // smartmenus

}); // ready

( )
showFunction. SmartMenus
, showFunction.
, ,
, .
,
slideDown () 4. (
j Query
6.) slideDown ()
j Query, , . hide () . fadeln (),
,
. animate (), 6.

, 250 .
, ,
, .

.

10. , (
):
$ (document).r e a d y (function() {

$ ( 1.s m 1).s m a r t m e n u s ({

showFunction: function ($ul, complete) {

$ u l .slideD own (250, complete);

},
hideFunction: function($ul, complete) {
$ul.slideUp(250, complete);

}
}); // smartmenus

}); // ready

365
II. jQuery

5.
/
. SmartMenus
: hideFunction.


SmartMenus
.
: w w w .sm artm en u s.o rg /d ocs/.

11. .

. ,
,
CSS .
07_03.html -
07.

,
sm-simple .css, sm-simple ul
.

,
CSS- :

<linkhref="smartmenus/sm-blue.css" rel="stylesheet" >

u l, :

<ul class=IIsm sm-blue">


_07_031 ,
Smart Menu _07_03_blue.html 07_03_
clean.html

SmartMenu


SmartMenu CSS-.
CSS- ,

366
7. , jQuery

. , sm-simple.
css sm -sim p le , .sm -sim p le u l.

( u l) (
u l ).

.
1. ,
, .
, sm-simple.css sm-mymenu.css.
2. , , . sm -sim ple,
.
, . sm -sim p le . sm-mymenu
( ). ,
, . ,
.
, , . sm -sim p le,
.
3. .
. .sm -sim p le
, . sm -sim p le
s p a n . s u b -a rro w ,
, .
4. - .
,
:
c lin k re l= " s ty le s h e e t" h re f= ,fsmartmenus/sm-mymenu.css">
5. , ,
, .sm -sim p le .sm-mymenu,
u l .
:
Cul c l a s s = ,fsm sm-mymenuff>
SmartMenus
.

367
II. jQuery


jQ uery
jQuery SmartMenus ,
.
jPanel (jpanelm enu.com ) ,
.
Facebook Google,
.
- Multi-level Push Menu (m ulti-levelpush-m enu.m ake.rs)
,
. ,
,
.
.
,
, 15
jQuery sp eckyboy.com /2013 /0 8 /0 1 /1 5-responsive-
navigation-jqueryplugins/.
8
-


:
, ,
.
: , , . .

(- Ozon
,
), - ,
. , JavaScript

.


HTML HTML-
-, , . 8.1.
form, (
<form>) ( </form > ) .
, (
(post) (get)), ,
.

,
in p u t, t e x t a r e a s e l e c t ,
. HTML-
in p u t. , , ,
,
in p u t. , in p u t,
ty p e . ,
in p u t ty p e te x t:

<in p u t n a m e ^ 'u s e r" ty p e =,,t e x t M>


369
II. jQuery

. 8 .1 .
, , , ,
, . .
HTML-
: developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms

H T M L - ,
. 8.1; form
:

<form actio n = " p ro cess.p h p " m ethod="post,f -*


name=11s ignup " id = 11s ign u p 1*>
<div>
<label fr="username" class="label11></11>
< in p u t name=" username" ty p e= " tex t" id=" u s e r name
size="36">
</div>
<div><span class=fllabel">Xo66n</span>
< in p u t ty p e= 11checkbox11 name="hobby" id = " h e lis k iin g " ^
v a lu e = ,fhe 1 i i s k in g 11>
<label fo r = lfh e l i s k i i n g n>ropHbie </11>
< in p u t ty p e= 11checkbox11 name="hobby" id = flp i c k l e lf ^
v a lu e = " p ic k le ">
<label f="11"> </11>

370
8. -

Cinput type="checkbox" name="hobby" id="walnut"


value="walnut">
<label for="walnut'^ +-1
</label>
</div>
<div>
<label for="planet" 1="11"> ^
</label>
<select name="planet" id="planet">
<option>3ewwi</option>
<option>Mapc</option>
<option>Anb$a UeHTaBpa</option>
<option>Bu </^>
</select>
</div>
<div class="labelBlock">Bbi ^
paccbuiKy?</div>
<div class="indent">
<input type="radio" name="spam" id="yes" value="yes" -1
checked="checked">
< label for="yes"></label>
<input type="radio" name="spam" id="definitely"
value="definitely">
<label for="definitely"></11>
<input type="radio" name="spam" id="choice" -1
value="choice">
<label for="choice">y ?</11>
</div>
<div>
<input type="submit" name="submit" id="submit" ^
value="">
</div>
</form>

371
II. jQuery


l a b e l ,
. ,
, ,
.

,
, . ,
, ,
. ,
, JavaScript
.

, j Query
CSS .
:
cinput name="user" type="text" id="user">

j Query:

var userField = $('#userf);

, - .
, ,
. user,
j Query :

var fieldValue = $ (1# u ser 1) .v a l ();


JQuery- v a l () .


? ,
.

input
, , , ,
372
8. -

, ,
in p u t.
in p u t.
CSS
:
$ ( 1i n p u t [ty p e = " r a d io " ] *)
j Query
(. 8.1).
j Query,
. ,
,
. ,
. j Query
:
$ ( 1: t e x t 1)

. e ac h () (. 4),
, (

).

. 8.1. jQuery ,


: input $ ( : i n p u t ') input, textarea, select
button,
: te x t $ ( ' : t e x t ')
ipassword $(' ipassw ord')
: radio $ ( ' : r a d i o ')
: checkbox $ ( ' : c h e c k b o x 1)
: submit $ ( ' : s u b m i t ') ()
: i ma ge $ ( ' : i m a g e 1) -
:reset $ ( ' : r e s e t 1)
:b u tton $(' :bu tto n f )
:file $ ( ' : f i l e 1) (
)
: h id d e n $ ( ' : h i d d e n ')

373
II. jQuery


. , ,
.

, ,
sig n u p ,
:

$ ( 1# sig n u p : t e x t 1)

, j Query
, ,
.
: checked
, . ,
, :

$ ( 1: c h e c k e d 1)

,
. ,
( )
(, , ),
, .
HTML- name; ,
s h ip p in g .
j Query (.
4) : ch eck ed
:
v a r checkedV alue = $ ( ?in p u t [name=f,s h ip p i n g ,f ] -1
: c h e c k e d 1) . v a l ( ) ;

$ (* in p u t [name=" s h ip p in g 11] 1)
s h ip p in g , : ch eck ed $
( 1in p u t [name=,f s h ip p in g ] : c h e c k e d 1)
. v a l () ,
, .
: s e l e c t e d option
, ,
( s e l e c t ) . , s e l e c t
re g io n , .

374
8. -

, ,
:

var selectedRegion=$(1tregion :selected1).v a l ();

, , : checked,
( 1# re g io n : s e le c te d * ).
, o p tio n ,
s e l e c t . , jQuery :
, s e l e c t
reg io n .
CSS:
, .


s e l e c t .
, : s e l e c t e d
.


. , ,
.
. ,
. , ,
, .


,
, .

j Query
. v a l () ,
. ,
;
. ,
em ail.
, :
var fieldValue = $ ( 1#ema il1).v a l ();

375
II. jQuery


val (). ,
,
, (. 8.2).
,

.

. 8.2. jQuery

1 var unitCost=9.95;
2 var amount=$(1#quantity1).v a l (); //
3 var total=amount*unitCost;
4 total=total.t o F i xed (2);
5 $ ( 1#total1) .val(total); //

1 ,
. 2 ,
quantity,
. 3
, ,
4 , (.
16
toFixed () ). , 5
376
8. -

t o t a l ( ,
, ).

v a l ()
,
, - . ,

. , : checked
,
,
.
HTML : checked ,
. , -
ch eck ed ( XHTML):
c in p u t ty p e = "ch e c k b o x " name="news" id= "new s" -1
check ed = 11checked" />

HTML5:
< in p u t ty p e = "ch e c k b o x " name="news" id= "new s" checked>

, ch eck ed = "ch eck ed "


, c h eck ed HTML,
DOM (.
4). ,
,
.
: ,
d is a b le d , ( t r u e )
( f a l s e ) .

DOM jQuery p ro p ()
:
i f ( $ ( 1#new s' ) .p r o p ( ' c h e c k e d 1)) {
/ /
} e ls e {
/ /
}

377
II. jQuery

$ ( 1#news 1) .p ro p ( ' checked* ) tr u e ,


. ,
f a ls e . ,
, ,
, .
,
3.

checked .
p ro p () , ,
ch eck ed .

5,
, .
,
, .


(Submit) Enter,
subm it.
. , JavaScript
.
, JavaScript

. ,
.


, j Query-
subm it (), . ,
, ,
. 8.1, , ,
.
.
,
;
.

378
8. -

HTML- ,
, s ignup,
usernam e.
j Query :
1 $ (d o c u m e n t). r e a d y ( f u n c t i o n () {
2 $ ( 1sig n u p 1) . s u b m it(f u n c t i o n () {
3 i f ( $ ( 1# u se rn a m e 1) . v a l () == 11) {
4 a l e r t (1 " .1);
5 re tu rn fa ls e ;
6 }
7 }); // s u b m it ()
8 }); // r e a d y ()

1 $ (document) . re a d y (),
HTML-
(. j Query 5). 2
su b m it. 36
. 3 ,
( 1 1). ,
, , .

5 : .
,
. 6 , 7
su b m it ().



p r e v e n t - D e f a u l t ( ) ,
5.
$ ( ' f o r m 1) . s u b m i t ( f u n c t i o n ( e v t ) {
//
e v t .p r e v e n t D e f a u l t ();

su b m it ,
, subm it.
,

379
II. jQuery

HTML- form, ,
, :

$ ( 1fo rm 1) . s u b m i t ( f u n c t i o n () {
/ / ,
}) ;

(
,
Tab), ,
focus. ,
,
. ,
. ,
,
,
. , HTML- :
< in p u t name=,,u sern am e ,f t y p e ^ 't e x t " id = ,,u se rn a m e n <"J
v a lu e = ,foayca/ '^
,
.
.
,
:
1 $ ( 1# u sern am e1) . f o c u s ( f u n c tio n () {
2 var fie ld = $ (th is );
3 i f ( f i e l d . v a l ( ) = = f i e l d . p r o p ( 1d e f a u l t V a l u e 1)) {
4 field.val('1);
5 }
6 });
1 ( u sern am e)
fo c u s. 2
f i e l d , j Query;
t h i s $ (t h i s ) 4, $ (t h i s )
j Query-,
.
380
8. -

4 . (
( ? 1)) ,
.
, . ,
,
.
, ,
. ,
3.
defaultValue,
,
. , .
,
(field.va 1 0 ) , (field,
prop (1defaultValue 1)). ,
JavaScript .
.
HTML- ,
.
, defaultValue.
, :
,
? , ,
,
. , .
, , ,
helloKitty, ,
, , , ,
, .
: helloKitty
, ?.
, .


HTML5 placeholder,
.
, :
<input name=nusernamelf type="text" id=lfusername" -1
1^=", 1^

381
II. jQuery

,
jQuery, p l a c e h o l d e r
Internet Explorer 9 .


, blur,
t e x t n t e x t a r e a
, - . ,
,
( ,
, . .). ,
,
,
.
,
.
.

,
, . HTML- :

<input name="quantity" type="text11 id="quantity">

, ( 1, 2
9, , ).
, :

1 $ ( 1# q u a n t i t y ' ) . b l u r (f u n c t i o n () {
2 var fieldValue=$(this).v a l ();
3 if (isNaN(fieldvalue)) {
4 a l e r t (1, 1);
5 }
6 }) ;
1 blur . 2
fieldValue.
3 isNaN () (.
16). ,
4 .

382
8. -

,
,
, , class= "num O nly",
:

1 $ ( 1.numOnly1) .blur (function() {


2 var fieldValue=$(this).val();
3 if (isNaN(fieldValue)) {
4 a l e r t (1 ');
5 }

.


c l i c k
. ,
, ,
. , ,

.
, ,
,
. (
.)
,
j Query- c l i c k ()
:
$ ( 1:radio 1) .click(function() {
// ^

}) ;


c lic k , ,
. focus
( Tab) ,
.

383
II. jQuery

change
(. 8.3). ,
.

;

, , .

, ,
, - .

. 8.3. change
, .

, .
,

384
8. -


. ,
,
,
. . 8.3
;
.


change, j Query- change (). ,
c o u n try
; , ,
, .
:

$ ( 1#c o u n try *) . c h a n g e (f u n c t i o n () {
i f ($ ( t h i s ) . v a l ( ) ==' 1) {
a l e r t ( 1, -1
.1);
}
}


- :
, ,
. . , ,
.
JavaScript . ,
, , ,
, ,
. JavaScript
.

, ,

. ,

385
II. jQuery


?
, ?
JavaScript .

,
, JavaScript , ,
,
. ,
j Query- f ocus (). , ,
,
. 8.1. HTML- (.
), ,
usernam e. JavaScript
, :

$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$ ( ' #username1) . f o c u s ( ) ;
}) ;
usernam e.
,

:

$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$(1:text:first1).focus();
}) ;
, j Query
$ ( f : t e x t f ).
: f i r s t ,
, jQuery $ ( 1 : t e x t : f i r s t 1)
. . fo c u s ()
,
.

(,
),
,
. , ,
, ,
386
8. -

,
. ,
(, signup) :

$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$(1#signup :text:first1).focus();
}) ;
$ ( 1#signup : t e x t : first 1)
.

.
, , ?
, ,
,
. , , ,
. ,
1040
().
, ().

,
, JavaScript.
,
, ,
, .

, disabled
true. ,
:

$ ( 1: i n p u t 1) . p r o p ( d i s a b l e d 1, t r u e ) ;

.
1040,
(),
.
single,
() spouseSSN,
JavaScript :

387
II. jQuery

$ (1#single 1) .c l i c k (function() {
$ (1#spouseSSNf) .prop(1disabled1, true);
}) ;
, ,
. d i s a b l e d
f a l s e . ,
:
$ (1:input1) .prop(1disabled1, false);


,
(. 2)
true false, True' 'false'. ,
:
$ (1:input1) .prop(1disabled1, 1false1);
:
$ (1:input1) .prop(1disabled', false);

.
, ,
() .
,
m a rrie d , :
$ ( 1#married1).c l i c k (f un ct io n() {
$ (1#spouseSSN1) .p r o p (' d is ab led 1, false) ;
}) ;

.

,

.
(),
, ,
. :
388
8. -

$ ( ,#singlef) .click(function() {
$ (1#spouseSSN1) .h i d e ();
}) ;
$ ( 1#marriedf).c l i c k (functi on() {
$ (1#spouseSSN1) .s h o w ();
}) ;


jQuery hide () show () (
)
6.

(
) .
, ,
( , ) .


: ,
.
, (, . .),
div, ,
div. .



,
. ?
- ...
.
,
.
, -
( , ) , ,
.
,
.

389
II. jQuery

,
! ,
JavaScript
, .
disabled ,
.
formiD,
submit,
submit (),
:
$(#formID').submit(function() {
$ (f#submit1) .prop(1disabled',true);
}) ;
,
:
$ ( 1 f o r m 1) . s u b m i t ( f u n c t i o n () {
$ ( ' i n p u t [ t y p e = s u b m i t ] 1) .
p r o p ( d i s a b l e d 1, t r u e ) ;
}) ;
, .
, ,
.
:
$ ( ' # f o r m I D 1) . s u b m i t ( f u n c t i o n () {
var subButton = $ (this).find(:submit1);
subButton.prop('disabled',true);
subButton.val(' 1);
}) ;
, $ (document) .
ready (),
jQuery 5.




,
. -,
. -,

390
8. -

. ,
, (. 8.4).

. 8.4. JavaScript
- :
,



JavaScript 1 .

-
, (. . 8.4).

.
1. 08_01.html -
08.
j Query
$ (docum ent) . re a d y () (.

391
II. jQuery

j Query 5).
, .
( , .)
( )
.
2. $ (docum ent) .
rea d y () : $ ( 1 : t e x t : f i r s t 1) . f o c u s () ;.
:
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$ ( 1:t e x t :f i r s t 1) . f o c u s ( ) ;
} ); / / r e a d y ()

fo c u s ().
.


, , .

.
,
. (
. 8.4), ,
: PayPal, Visa
MasterCard. ,
.
, PayPal,
,
PayPal.
HTML- (
):
1 <div><span c l a s s = fll a b e l fl>Cnoco6 </>
2 < in p u t type="radio" name=Mpayment" id="paypal" <-J
v a lu e = f1p a y p a l">

392
8. -

3 < label for="paypal11>1</label>


4 < in p u t type= "radio" name=" payment" id = " v isa " -*
v a lu e = "v i s a ">
5 <label for="visa">Visa</label>
6 < in p u t type="radio" name="payment" id="mastercard" <-J
value="m astercard">
7 < label for="mastercard">MasterCard</label>
8 </div>
9 <div id="creditCard" class="indent">
10 <div>
11 <label for="cardNumber" class="label">HoMep -1
</11>
12 C input ty p e= " tex t" name="cardNumber"
id = "cardNumber">
13 </div>
14 <div>
15 <label for="expiration" class="label">CpoK -1
</11>
16 < in p u t ty p e= " tex t" nam e="expiration" -1
id = " e x p ir a tio n " >
17 </div>
18 </div>

3. 08_01.html.
, .
PayPal.
4. ,
:
$ (document).ready(function() {
$ (1:t e x t :fir st1) .focus ();
$ ( ' # p a y p a l* ) . c l i c k ( f u n c t i o n () {
} ) ; / / c l i c k
}); // r e a d y ()

PayPal
p a y p a l (. 2 HTML-), ,

393
II. jQuery

: $ ( 1# 1 1).
(
, : j Query
5). , PayPal
(
), , .

, ,
PayPal.
5. , ,
( 4):
1 $ (d o c u m e n t). r e a d y ( f u n c t i o n () {
2 $ ( 1: t e x t : f i r s t 1) . fo c u s ( ) ;
3 $ ( 1#paypal1).click(function() {

4 $ ( 1#creditCard input1) .prop (1disabled 1 , true) ;

5 }); // click

6 }); // r e a d y ()


.
div creditCard (. 9 HTML- ).
jQuery $ ( 1#creditCard inp ut 1)
input
creditCard.
, , , CVV (
,
), .

,
true disabled (. /
).
( ).
, -
,
, .

-.
, .
394
8. -

6. :
$ (d o c u m e n t). r e a d y ( f u n c t i o n () {
$ ( 1: t e x t : f i r s t 1) . fo c u s ( ) ;
$ ( 1#paypal1) .click(function () {
$ ( 1# c r e d itC a r d i n p u t 1) . p r o p ( 1d i s a b l e d 1, ^
true).css(1backgroundColor1,1#CCC1);
$(1#credtCard label1) .css(1color1,1#BBB1);
} ); / / c l i c k
} ); / / r e a d y ()


J 4 ,
.
JavaScript ,
. ,
JavaScript 2 ,
JavaScript
, ( )
JavaScript :
$ ( ' # c r e d i t C a r d i n p u t ' ) . p r o p ( 1d i s a b l e d , t r u e )
. c s s ( 1b a c k g r o u n d C o l o r ' , 1#CCC' ) ;
, ,
. c s s (), . p r o p ( ) .

j Query- c s s ()
( ,
4,
, p ro p () ). c s s ()
l a b e l d iv ( c s s ()
CSS 4).

, ,
PayPal ,

. Visa
MasterCard, !

.
395
II. jQuery

7. c l i c k () (
7 8 6)
:
$ ( f#visa, #mastercardf).c l i c k (function() {

$ (1#creditCard in put 1).prop (1disabled1, -*


false).c s s (1backgroundColor1, ' 1);

$ ('#creditCard lab el1) .css (1co l o r 1, f1);

}); // click

$ ( f#visa, #mastercard' )
(. 4 6 HTML- ).
, ,
PayPal,
: $ ( 1#creditCard l a b e l 1) .
css ( 1col or 1, 1 1) ;. ,
, .

.
.

, ,
,
. ,
.


, .
() ,
? JavaScript .
1. 08_01.html .
,
.
. HTML-
:
<input type=flcheckbox" name="hideShip" -*
id=11hide Ship11>

396
8. -

2. ,
4 , (
:}); / / ready ()):
$ ( 1#hideShip1) .c l i c k (function () {
} ) ; / / c l i c k
h id e S h ip ,
.
.
HTML-, , d iv
s h ip p in g : , ,
d iv .
,
. - ,
, d iv
. , .
3. , :
$ ( 1#hideShip1).c l i c k (function() {
if ( $ ( t h i s ) . p r o p ( 1c h e c k e d 1)) {
>
} ); / / c l i c k
(.
3)
.
$ ( t h i s ) ,
.
ch eck ed , .
, tr u e ,
f a l s e . ,
.
4. ( 1618)
.
:
1 < s c r ip t>
2 $ (d o c u m e n t). r e a d y ( f u n c t i o n () {
3 $ ( 1: t e x t : f i r s t 1) . f o c u s ();
4 $ ( 1# p a y p a l' ) . c l i c k ( f u n c t i o n () {

397
II. jQuery

5 $ (1#creditCard i n pu t1).p r o p (1disabled1, true)


6 .css (1backgroundColor1, '#CCC);
7 $ (1#creditCard la bel 1) .css (1color 1, 1#BBB);
8 }); // click
9 $ ( f#visa, #mastercard1).c l i c k (f unction() {
10 $ (1#creditCard i n pu t1).p r o p (1disabled 1, false)
11 .c s s (backgroundColor1, 1 1) ;
12 $ ('#creditCard label *) .css ('color ','');
13 }); // click
14 $ ('#hideShip1) .click (function () {
15 if ($(this) .prop(1checked1)) {
16 $ ( 1# s h ip p in g 1) . s lid e U p ( 1f a s t 1) ;
17 } else {
18 $ ( 1#s h ip p in g 1) . slid eD o w n ( 1f a s t 1) ;
19 }
20 }); // click
21 }); // r e a d y ()
22 </script>

$ ( 1# shipping 1) div,
, slideUp () slideDown ()
( 6)
div ,
, .
j Query, fadeln ()
fadeOut (), ,
animate () (. 6).

_08_01.html
08. ,
1
.


, , ,
, , ,

398
8. -

, .
, ,
.

,
,
.
.
, , -, ,
, ,
, ,
, URL-.

.

JavaScript
, .

,

.
,
Enter,
. , -.
,

(. 8.5).

, , .

, v a lu e
( , , j Query- v a l () ) ,
, , .
, :
, . ,
JavaScript,
, , ,
, , , . . ,
.
,
j Query.

399
II. jQuery

. 8.5. ( ),
Google


HTML5 ,
,
JavaScript. , ,
HTML- , Internet
Explorer 9 ,
Safari iOS Android (
), ,
Safari.

jQuery Validation

Validation (jqueryvalidation.org)
j Query ( ).

. ,
, e-mail
.
, .

400
8. -

Valida
tion:
1. jquery.js ,
, .
j Query 4
j Query.
Validation j Query,
jquery.^js.
2. Validation.
: jqueryvalidation.org.
,
, . jquery.validate.min.js (
Validation jqueryjoalidate -
08. jquery.validate.min.js, .
). JavaScript,
JavaScript 1,
.
3. .
,
;
,
. .. , ,
.
:
HTML (. ) ,
(. ).
4. .
. Validation

, ,
. .
, , , ,

, ,
.

,
401
II. jQuery

, ,
.



(.
).

5. v a lid a t e () .
, :
v a l i d a t e (). j Query
, .
, sig n u p . HTML
:
<form a c tio n = " p r o c e s s .php" m e th o d = "p o st" <"J
name=" s ig n u p 11 id=" sig n u p >
:
$ ( 1# s ig n u p ! ) . v a l i d a t e ( ) ;
v a l i d a t e ()
, . ,

HTML- (. ),
v a l i d a t e () (
).
JavaScript (
)
:
<s c r i p t s r c = ,f j s / jq u e r y .m in . j s " > < / s c r i p t >
<s c r i p t s r c = " j s / j q u e r y . v a l i d a t e . m in . j s " > < /s c r i p t >
< s c r ip t>
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$ ( 1# s ig n u p 1) . v a l i d a t e ( ) ;
} ); / / re a d y
< /s c rip t>

402
8. -


jQuery-
d o c u me nt. r e ady ( ),
HTML- (.
jQuery 5).

Validation,
JavaScript- , c l a s s t i t l e
,
v a l i d a t e (). v a l i d a t e ()
.
,
/ ,
, .

,
( j Query
Validation . .). ,
HTML- .

Validation
,
. 8.2.
. ,
.

, .
HTML- :

<in p u t name="namefl t y p e = " t e x t 11>

,
, , , ,
, HTML-
r e q u ir e d . ,
, HTML-:

<inp ut name=11name" t = "t e x t " c la ss= " r e q u ir e d " >

403
II. jQuery

. 8.2. Validation ,



required ,
date //. ,
10/30/2014 , 10-30-2014
u rl -
http://w w w .chia-vet.com . U R L -, ,
www.chia-vet.com chia-vet.com ( h ttp ://c h ia -v e t. com),

email bob@ chia-vet.com.
,
, nobody@ noplace.com,
n um b er 32 102.50 145.5555.
, , $45.00 100,000,
digits . 1, 20,
12333 , 10.33 12
creditcard


CSS, ,
HTML-
CSS.
,
, .


JavaScript
,

.
.
JavaScript , ,
,
.

,
, ,
,
. , ,

404
8. -

, .

, r e q u ir e d ,
, . 8.2.

, .
,
. HTML-
:
c in p u t nam e^'dob" ty p e = flt e x t 11 c la ss = " r e q u ir e d date">
, r e q u ir e d d a te
.
r e q u ir e d
, , c l a s s = f,d a te " ,
, , -
, .


,
,
. , ,
,
//, , 01/25/2015.

Validation
. ,
,
.
, .

.

t i t l e
. ,
r e q u ir e d
:
<in p u t name="name" ty p e = f,t e x t " c l a s s = flr e q u ire d " >

405
II. jQuery


t i t l e :
< in p u t name=flname,f t y p e = " t e x t " c l a s s = f,r e q u ir e d " ^
title=11, .">
- t i t l e
, ,
- ,
, .
Validation ,
.
t i t l e . ,
.

. ,
,
,
,
. , ,
, :
< in p u t name="dob" ty p e = ,ft e x t " c l a s s = " r e q u i r e d d a t e 11
title=M, 01/28/2014.">
,
.
.
Validation . ,

:
. ,
, . ,
Validation ,
.
, ,
. ,
.


Validation ,
HTML- . ,

406
8. -


. validate ()
(.
CSS 4),
. , ,
.

:
$ (1idOfForm1) .validate({
//
}); // v a l i d a t e ();

,
. Validation
,
, . 8.6.

. 8.6.
Validation


.
,
,
,
. ,
.

HTML- . 8.6 :

<form action="process .php" method="post,f id=11signup">


<div>
<label f r="name11></11>
<input name="name" type="text">
</div>

407
II. jQuery

<div>
<l a b e l fo r= " e m a il" > </11>
< in p u t name="email ty p e= te x t" >
< /d iv >
<div>
<input type=ffsubmit" name="submit value=OTnpaBHTb">
< /d iv >
< / form>

:
.


.


Validation :
jqueryvalidation.org/validate.


, ,
, .
:

ru le s : {
fie ld n a m e : 1v a li d a t i o n T y p e 1
}
r u le s ,
.
v a l i d a t e (). . 8.6
v a l i d a t e ()
, ,
r u le s :

$ ( 1# s ig n u p ') . v a l i d a t e ({
ru le s : {

408
8. -

name: re q u ire d *
}
} ); / / v a l i d a t e ()

name,
.

. , . 8.6
,
, :

1 $ ( 1# s ig n u p 1) . v a l i d a t e ({
2 ru le s : {
3 name: 1r e q u i r e d 1,
4 e m a il: {
5 r e q u ir e d : t r u e ,
6 e m a il:tr u e
7 }
8 }
9 }); // v a l i d a t e ()


( )
JavaScript, /,
, . , 3
name: re q u ire d 1 ,
( ).

CSS 4.

47, ,
, . em ail,
HTML- (. HTML- );
r e q u i r e d : t r u e
, e m a i l: t r u e .

,
. 8.2. , b i r t h d a t e .
:

409
II. jQuery

$ ( 1#sig n u p 1) . v a l i d a t e ({
ru le s : {
name: 1r e q u i r e d ',
e m a il: {
re q u ire d :tru e ,
e m a i l: t r u e
},
b ir t h d a t e : 1d a t e f
}
} ); / / v a l i d a t e ()
,
:

$ ( 1# s ig n u p f ) . v a l i d a t e ({
ru le s : {
name: 1r e q u i r e d 1,
e m a il: {
re q u ire d :tru e ,
e m a il: t r u e
>,
b ir t h d a t e : {
d a t e :t r u e ,
r e q u ir e d :tr u e
}
}
}); / / v a l i d a t e ()

, ,
,
. ,
, ,
200 , ,
. , *

; ,
, 1900 .

410
8. -

minlength. , ,
. , ,
:
m in le n g th :
maxlength.
. , , 100
, :
m a x le n g th :100
rangelength. , m in le n g th m axlength.
,
. , ,
, :
r a n g e l e n g t h : [6 ,1 0 0 ]
min. ,
. , ,
, 10.
m in :10

, 8,
, 8 10.
.
max. , .
, , ,
1000, :
max:1000
range. , min max
, . , ,
10, 1000, :
r a n g e : [10, 1000]
equalTo. ,
. ,
.
. ,
, j Query. ,
passw ord.

, :
e q u a lT o : 1# p a ssw o rd f

411
II. jQuery


. . ,
, ,
. HTML- :
< in p u t nam e="passw ord" ty p e = "p a ssw o rd " id = " p a s s w o rd " >
< in p u t nam e= "confirm _passw ord" ty p e = " p a ssw o rd " -1
id = " c o n firm _ p a s sw o rd " >


jQuery Validation additional-
method.js, ,
, ,
,
Dutch Bank ,
, .
,
additional-method.js.
, , m y-rules.js,
.
JavaScript .

,
8 16 . , ,
.
, sig n u p ,
:
$ ( 1#s ig n u p 1) . v a l i d a t e ({
ru le s : {
p assw o rd : {
re q u ire d :tru e ,
r a n g e l e n g t h : [8 ,1 6 ]
},
c o n firm _ p a ssw o rd : {
e q u a lT o :' # p a ssw o rd f
}
}
} ); / / v a l i d a t e ()

412
8. -

,
title, .

. ,
.
:
.
title. validate ()
JavaScript, ,
.

,
. messages :

Messages: {
Fieldname: {
methodType: 1 1
}
}



JavaScript
,
.
, ,
.
,
,
, ,
.
.
Validation remote,
.
, , ,
, , , Ruby, .NET, Java Node.js.
,
, ,

413
II. jQuery

true ( ) false
( ).
, "username",
,
.
( , )
rules :
username : {
required: true,
remote: 'check_username.php1
}
,
. check_
username.php. ,
(username)
checkjjsernam e.php, ,
. , PHP-
true1; ,
1false , .
Ajax,
4.
: jq u ery.b a ssista nce .de /valid ate /de m o /
captcha/.

fieldname
, , a methodType
. ,
, ,
:

$ (1#signup 1) .v ali d a t e ({
rules: {
password: {
required:true,
rangelength:[8,16]
},
confirm_password: {
equalTo:?#passwordf
}

414
8. -

}, / / r u l e s
messages: {
password: {
required: ", .11,
rangelength: " *
8 16 ."
},
confirm password: {
equalTo: " ."
}
} // messages
} ); / / v a l i d a t e ()


,
,
.

.
, , .
, , , ,
, , .
,
, .
, ,
.
JavaScript.

Validation
, :
, HTML- la b e l ,
. , HTML-
:
c in p u t nam e="em ail" ty p e = " te x t" c la s s = " r e q u i r e d " >
Validation ,
, -

415
II. jQuery

, HTML-
, HTML-. HTML-
:

< in p u t nam e= "em ail ty p e = " te x t" c l a s s = " r e q u i r e d error" >


C la b el fo r = ,fem ail" gen erated = " tru e" c la ss= " e r r o r " > -1
.< /l a b e l>

,
e r r o r , HTML- l a b e l e r r o r ,
.


. ,
,
:

la b e l.e r r o r {
c o lo r : #F00;
f o n t- w e ig h t: b o ld ;
}
Validation
, CSS
. ,
, :

in p u t.e r r o r , s e le c t.e r r o r {
b o rd e r: lp x re d s o l i d ;
}



(. 8.7).



JavaScript 1
.

416
8. -

. 8.7. ! Validation
,

,
. ,
.

,
.
1. 08_02.html -
08.
, ,
.
,
- Validation.
2. s c r ip t ,
jquery js , :
< script src="jquery_validate/ jquery.validate . -1
m i n .j s " x / s c r i p t >

417
II. jQuery

Validation jqueryjvalidate -
08.
s c r i p t Query re a d y ().
v a l i d a t e ().
3. $ (document) .
ready (fu n c tio n () :
$ ( 1# s ig n u p 1) . v a l i d a t e ( ) ;
sig n u p :
<form a c ti o n = flp r o c e s s .php" m ethod=,fp o s t "
name=f,s ig n u p fl id = " s ig n u p " >
, $ ( # s ig n u p 1) j Query
, v a l i d a t e ()
. ,
. ,
.
4. HTML- (< in p u t name="name"
typ e= " text" id="name">) c l a s s t i t l e
, (
):
< in p u t name="nameM ty p e = " te x t" id= "nam elf
c la ss= " req u ired " t i t l e = n .">
c la s s = " r e q u i r e d " Validation ,
,
t i t l e , ,
.
5. ,
.
, (
. 8.8).
!
(. ).
.


,
, , ,
, , .

418
8. -

1 4, ,
.

. 8.8. .

6. HTML- (<input
name="dob" type="text" id="dob">)
class title , :
c in p u t nam e="dobfl t y p e = " t e x t 11 id = !ldob" class="date"
title= " :4-1
0 1 / 1 9 /2 0 0 0 " >

r e q u ir e d ,
.
, c l a s s = Md a te "
. t i t l e
, .
-
k j s d f .



, r e q u i r e d
. d a t e r e q u i r e d
:
class="date required"


( s e l e c t ) .
7. HTML- <select> (<select
name="planet" id="planet">) class
title , :
419
II. jQuery

< s e le c t n am e= "p la n e t" i d = " p l a n e t ,! class:"required"


ti tle=11 .">


, c l a s s t i t l e .
.

, ,

(
).

Validation.

1. JavaScript
$('#signupl) .validate () ;
:
$ ( 1#sig n u p 1) . v a l i d a t e ({
}); // validate()

,
v a l i d a t e (),
JavaScript
v a l i d a t e ().
,
.
, , , .

.
2. ( ),
, :
rules: {
} // rules

420
8. -


r u l e s }.
v a l i d a t e ().
,
. ,
JavaScript .
.
3. v a lid a t e () ,
(
):
$ ( 1# s ig n u p 1) . v a l i d a t e ({
ru le s : {
email: {
required: true,
email: true
}
} / / r u l e s
} ); / / v a l i d a t e ()
JavaScript.
e m a il ,
, HTML-.
(
, )
.
:
. , ,
.
4. ,
.
,
: This field is required (
). .
Please enter a valid email address (
) (
, ,

421
II. jQuery

). ; ,
3 .

5. .
r u le s (
/ / r u le s ) :
m e ssa g e s: {
} / / m essages
JavaScript,
messages. ,
.
(// m e s sages) .
.

6. v a lid a t e () ,
(
):
1 $ (1# s i g n u p 1) .validate ({
2 rules: {
3 email: {
4 required: true,
5 email: true
6 }
7 }, // rules
8 messages: {
9 e m a il : {
10 req u ired : " .",
11 em a il: " . "
12 }
13 } // messages
14 }); // v a l i d a t e (),

.
, .
.

422
8. -

-
.
.
, ,
, - .
rules
(. 7) email (. 10).

.
7. r u le s ,
( ):
1 rules: {

2 email: {

3 required: true,

4 email: true

5 },
6 passw ord: {
7 r e q u ir e d : t r u e ,
8 r a n g e le n g t h : [8 ,1 6 ]
9 },
10 confirm_j>assword: {
11 eq u a lT o : 1#p assw ord
12 }
13 }, // rules

He 5,
.
.

8, 16 .
,
(

).
423
II. jQuery



. ,
.


.
8. m essages ,
( ):
1 messages: {
2 email: {
3 required: " .",
4 email: " ."
5 },
6 password: {
7 required: 1 ',
8 rangelength: ' ^
8 16 .1
9 >,
10 confirm jpassw ord: {
11 equalTo: ' .'
12 }
13 } // messages

5.

,
.
.

,


. , Validation ,
.

424
8. -

1. HTML- (< in p u t name="hobbyM


tY pe="c h e c k b xlf id = " h e lis k iin g " v a lu e = h e l i s k i i n g >)
c l a s s t i t l e ,
( ):
< in p u t name=nhobby" typ e= "ch eck b o x i d = " h e lis k iin g M ^
v a lu e = "he 1 i s k i in g 11 c l a s s = nreq u ired "
t i t l e = " 1 .">
,
.
,
v a l i d a t e (), ,
,
.
,
Validation . ,
,
c l a s s t i t l e . ,
,
.
.
2. HTML- (< in p u t
ty p e = lfr a d io fl name=spam" id = " y es" v a lu e= " y es" > )
c l a s s t i t l e ,
( ):
c in p u t ty p e = nr a d i o n name="spam" id = " y e s" v a l u e ^ 'y e s '4-1
c l a s s = r e q u ir e d t i t l e = >
(
spam), , c l a s s t i t l e
, .
,
,
.
3. ,
.
- .

( . 8.9). , -

425
II. jQuery


(, ).

. 8.9. Validation
, .
.
v a l i d a t e ()

Validation
, .
,
(
).
, .
, Validation
.

validate ().
4. , ,
m essages
( / / me s s age s ).
m essages :
e r r o r P l a c e m e n t : f u n c t i o n ( e r r o r , element) {

if (element.is (" :r a d i o ) | | e l e m e n t .is (" :c h e c k b o x 11) ) {

e r r o r .a p p e n d T o ( e l e m e n t .p a r e n t ());

426
8. -

} else {

e r r o r .i n s e r t A f t e r ( e l e m e n t ) ;

}
} // errorP la cem en t

Validation error
Placement, (.
4),
. ,
,

, .
, , ,
(.
3) ,
. ,
,
.

HTML- div
, div .
, </div>
j Query- appendTo () (.
4).
.
, $ (document) .ready ():
1 $ (d o c u m e n t). r e a d y ( f u n c t i o n () {
2 $ ( '#s i g n u p 1) . v a l i d a t e ({
3 rules: {
4 email: {
5 required: true,
6 email: true
7 },
8 password: {
9 required: true,
10 r a n g e l e n g t h : [8,16]
11 },
427
II. jQuery

12 confirm_password: ( e qu alT o: 1# p a s s w o r d ' },


13 spam: "required"
14 }, // rules
15 messages: {
16 email: {
17 required: " .",
18 email: " ."
19 },
20 password: {
21 required: ' ',
22 rangelength: ' -1
8 16 . '
23 },
24 confirm_password: {
25 equalTo: ' .'
26 }
27 }/ // messages
28 e r r o r P l a c e m e n t : f u n c t i o n ( e r r o r , element) {
29 if ( e l e m e n t .is (": r a d i o " ) || 4-J
e l e m e n t .i s (":c h e c k b o x " )) {
30 e r r o r .a p p e n d T o ( e l e m e n t . p a r e n t ());
31 } else {
32 e r r o r .i n s e r t A f t e r ( e l e m e n t ) ;
33 }
34 } // errorPlac em en t
35 }); // validate
36 }); // r e a d y ()


, .
, , .
,
,
8. -

.
.
1. 08_02.html
s t y l e .
,
. , ,
,
, ,
(, forms.css).
.
2. CSS s t y l e :
tsignup label.error {
font-size: 0 . 8em;
color: #F00;
font-weight: bold;
display: block;
margin-left: 215px;
}
CSS #signup label.error
label error,
signup. form
signup, Validation
<label> error (.
).
, CSS
.
CSS :
.8 ;
, .
d i s p l a y : b l o c k
label .
,

. ,
( 215
), margin-
left: 215.

429
II. jQuery

CSS
.
3. form.css:
#signup input.error, #signup select.error {

background: #FFA9B8;

border: lpx solid red;

}
, ,
.

. CSS 08_02.html
, , CSS
(, ).

, . 8.7.
( 08 02.html)
08.
III
JQUERY UI

9.

10.

11. jQuery UI

12.
jQuery UI
9

, j Query
,
.
,
(.
6) (.
6). , ,

, , ,
.
, j Query 7

j Query, j Query UI ,
, .

jQuery UI?
jQuery UI (jqueryui.com) j Query
j Query (. 9.1). j Query UI
,
( ),
-. ,
14 j Query UI
( ) -.

jQuery UI ,
:
. JavaScript,
. , Dialog
,
(.
),
432
9.

. ,
, , ,
.
, -
,
.
DatePicker,
.
.
.

( )
.
jQuery UI .
.
, j Query UI
,
-. , ,
.
-,
. -
,
.
, ,
.
, ,
, . ,
d iv
, . jQuery UI
,
12.
. j Query
, , , (
6), (
6), an im a te ().
j Query UI
, ,
CSS . . j Query UI
j Query UI 12.

433
III. jQuery Ul

. 9.1 . jQuery Ul
.
, ,
, , ,
, api.jqueryui.com

jQuery Ul
, ,
jQuery UI.
,
. ,
j Query, ,
j Query UI, .
. , , ,
j Query UI :
j Query UI j Query Foundation (jquery.org)
,
j Query, j Query UI . ,
jQuery jQuery UI , ,
434
9.

, ,
j Query j Query UI.
j Query UI .
,
j Query UI.
,
CSS JavaScript.
. jQuery UI
JavaScript CSS.
j Query UI .
j Query UI .
j Query UI .
,

. ,
ThemeRoller j Query UI, ,
- , ,
j Query UI.
jQuery UI ,
-.
j Query UI .
j Query ,
. ,
,
,
. jQuery UI
. ,
.
, ,
. (
github.com/jquery/jqueryui/ blob/master/AUTHORS.txt,
, 270 .)


jQ uery UI
jQuery UI ,
.
.

435
III. jQuery Ul

Kendo Ul (w w w .telerik.com /kendo-ui)


- ( ) .
jQuery Ul, ,
,

. jQuery,

. ,
jQuery Ul, Kendo Ul 399 699 .
Wijmo Ul (wijmo.com)
. jQuery Ul
jQuery Mobile 40 ,
, , . .
, ,
- ( ),
. ,
495 1195 ,
, , , .
jQW idgets (w w w .jqw idgets.com )
,
, , ,
. ,
jQWidgets
199 .

jQuery Ul
j Query UI jqueryui.com.

(. 9.1). Quick Downloads
,
JavaScript, jQuery UI. (
, ,
j Query UI,

jQuery UI .)

Custom Download
Download .
Download Builder (. 9.2),
. ,
, ,
436
9.

, .
, jQuery UI,
.


Theme .
, j Query
UI, ThemeRoller,
, jQuery UI (
design a custom theme).
11.

. 9.2. jQuery UI
. ,
, .
, Toggle All
( ) ( ), ,
,

.
, ,
. ,
, Accordion,
437
III. jQuery Ul

Core Widget,
.

j Query UI
Download Download Builder.
Zip-, jquery-ui-
1.11.1 .custom. (. 9.3
). images,
, j Query UI.
external, j Query, , ,
.

j Query UI,
JavaScript-, ,
, j Query
UI. , CSS,
. . 9.3 CSS
JavaScript, , .

jQuery 4,
j Query, min, jquery-ui.min.js,
,
(
), .
,
.
, - .
JavaScript- j Query UI,
,
jquery-ui.min.js.

CSS-
, ,
! , jquery-ui.min.css,
CSS
jQuery UI. . 9.3
jQuery jQuery UI.


CSS?
jquery-ui.m in.css jquery-ui. theme.min.css ui.

438
9.

structure.m in.css. CSS,


CSS-, ,
,
, , ,
. ,
jquery-ui.m in.css
, .
.

jQuery Ul -

j Query UI j Query,
,
j Query 7. CSS, jQuery,
JavaScript- jQuery UI, HTML-,
.
:
1. j Query UI,
.
,
j Query UI, ,
. 9.3. jquery-ui.min.css images,
CSS- , jquery-ui.min.
js JavaScript.
, min.
.
j Query UI jquery-ui.
min.js jquery-ui.min.css, .
images , CSS (.
. 9.3 ).
2. CSS- jQuery UI -
:
<link href="css/jquery-ui.min.css"
rel="stylesheet">

:
<link href="css/jquery-ui.min.css" rel=nstylesheet">
clink href="css/site .css" rel=f,stylesheet">

439
III. jQuery UI

, ,
CSS,
.
, CSS j Query
UI, , ,
jQuery UI. (
CSS, j Query UI,
11.)
3. JavaScript- jQuery jQuery UI:
<script src="js/jquery-1.11.0.min.j s "></script>

<script src=" j s/ jquery-ui .min .j s fIx / s c r i p t >

j Query UI j Query,
, j Query
j Query UI.

-
j Query UI.
, ,
.
jQuery UI.

. 9.3. jQuery UI ,
(). ,
m in, CSS JavaScript.
CSS JavaScript


, -,
( . 1.3), -
440
9.

-,
. ,
. , Chrome
:
. , jQuery
UI ,
,
. 9.4. j Query UI ,
,

.

(
j Query) :
1. ,
CSS JavaScript.
- !
2. d iv ,
, t i t l e ,
.
, HTML- ,
. 9.4:
< d i v i d = Ifh e l l o " t i t l e = flripHBeT, !">
<>
d iv ,
. </>
<> .
!< / >
< /d iv >
j Query UI
d iv ,
.
, , id = " h e llo " .



div. ,
, article .

441
III. jQuery Ul

3. j Query- $ (document) . ready ():


$ (document) .r e a d y (function () {
}); // ready

4. j Query d iv
d i a l o g ():
$ (document).ready(function() {
$ ( 1# h e l l o 1) . d i a l o g ();
}); // ready

$ ( f # h e l l o ! ),
d iv 2.
,
j Query (. :
jQuery 4), HTML-
.


. ,
, ,
3:00 4:00
,
. ,

. ,
.

, , Dialog,
,
.



JavaScript 1
.

1. 09_01.html -
09.
442
9.

j Query
$ (document) . r e a d y () (.
jQuery 5),
CSS JavaScript jQuery UI.

. 9.4. Dialog jQuery UI


,

2. , ,
:
<link href=" ../_css/ui-lightness/jquery-ui .min. css"
rel=" stylesheet11>
clink href="../_css/site.css" rel="stylesheet">
<script src=". ./_j s/j query.min .js"x/script>
<script src="../_j s/jquery-ui .min .js11></script>
, j Query UI
site.css, j Query UI
jQuery. HTML-,
.
3. HTML-
< ! - - <div> - - >
:

443
III. jQuery Ul

<div id=flhello" title="npHBeT, ! M>

<> jQuery UI</p>

</div>

div
.
4. $ (document) . ready ()
:
$ (document) . r e a d y (f u n c t i o n () {

$(1#hello1) .dialog();
}); // ready

div
. .
5. .
. ,
,
, .

, , .
,
jQuery UI.
_09 01.html.

,
, , ,
dialog () .
CSS 4,
/,
:

{
name : 1Dave 1,
awesomeAuthor : true
}
444
9.

,
dialog (). , ,
.
:

$ (1#hello f) .d i a l o g ({
draggable : false,
resizable : false
}) ;
Dialog ,
draggable false,
, resizable
false.
.
d raggab le. false,

. ( ,
,
, Dialog.)
r e s iz a b le . false,

. ( ,
,
; .)
h e ig h t width. j Query UI
, .
,
. , ,
600 ,
400 , ,
dialog ():
width: 600,

height: 400

(
),
,
CSS.
445
III. jQuery Ul

, ,
j Query UI .
. (
,
,
, .)

. ,
,
, .
width.

.
,
minWidth minHeight. , ,
, , 600
, 400 ,
:
minWidth: 600,
minHeight: 400

,
j Query UI ,
. ,
, jQuery UI
.
.
,
maxWidth maxHeight. , ,
600 ,
400 ,
:
maxWidth: 600,
maxHeight: 400

j Query UI
,
, .
, j Query UI
,
.
446
9.

modal. ,
, -
, .
,
. ,
, .
, ,
, , ,
, : ,
?
, modal true:
modal: true


,
Dialog
a pi.jqu e ryu i.co m /dialog /.

show h id e. ,
, , .
?
, show hide.
. true,
:
show: true,

hide: true

,
,
. , ,
, 250 ,
2 .
:
show: 250,

hide: 2000

.

jQuery (. j Query 6). -

447
III. jQuery UI

, , 1slideDown 1.
, :
show: 1slideDown1,

hide: fslideUp!

j Query UI (.
] Query UI 12), s c al e1 1explode 1.
,
, , ,
easing (.
12). , ,
250
1 , feaseInQuadf (
, ).
:
hide: { effect: explo de 1, delay: 250, duration: -1
1000, easing: feaseInQuadf }

p o s i t i o n .
. .
position.
show hide,
. X,Y
(. 2),
.
,

. , ,
100
(,
10 ).
position :
position: [100,10]


center, left, top, right, bottom. ,

position :

position: right b o t t o m 1

448
9.


l e f t , c e n t e r r i g h t ,
to p , c e n t e r bottom .
.

, p o s i t i o n j Query
UI position.
.

Dialog

d i a l o g ()
. ,
,
.
, ,
. ,
, ,
:
1. 09_01.htmly
.

d i a l o g ().
2.
d ia lo g (). {,
Enter, }.
:
$ (document ) . r e a d y (f u n c t i o n () {
$ ( 1# h e l l o 1) . d i a l o g ({
}) ;
}); / / r e a d y
/.
.
3. m odal: true:
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$ ( ' # h e l l o ' ) . d i a l o g ({

449
III. jQuery Ul

modal: true

}) ;
}); // ready

-.

. ,
.
4. , ,
tr u e . Enter ,
:
$ (document).r e a d y (function() {
$ ('#hello') .d i a l o g ({
modal: true,
r e s iz a b le : f a l s e ,
d r a g g a b le : f a l s e
}) ;
}); // ready

, /
. /
, / .

. ,
.
5. f a l s e
, Enter h id e :
1e x p lo d e 1:
$ (document).r e a d y (fu nction() {
$ (1#hello1) .d i a l o g ({
modal: true,
resizable: false,
draggable: false,
hide: 1explode1
}) ;
}); // ready

450
9.

j Query UI explode1
.
. , .
j Query UI,
ex plo de1 b o u n c e , b l i n d s d r o p .

_09_01_2.
html .

j Query UI
,
. , ,
-.
,
. ,
, , -,

.


, 5, , ,
(
). , ,
. , ,
. , ,
!

,
. -, ,
(
). -, .
(.
: jQuery 5).

,
dialog () autoOpen false.
, div
l o g i n . j Query UI
, JavaScript:

451
III. jQuery Ul

$ ( f#loginf) .dialog ({
autoOpen: false
}) ;
j Query UI div
.
, dialog () open.
, , ,
. ,
loginLink.
, click ,
:

$ (f#loginLink1) .c l i c k (function(evt) {
evt.preventDefault();
$ (1#login1) .d i a l o g (1open 1);
}); // click

evt .preventDefault () ;
,
- ( preventDefault ()
5).

,
, Close () ,
.

, , ,
, , ,
, ,
.

, ,
div login .
, ,
. :

452
9.

$ ( f # l o g i n f o r m 1) . s u b m i t (f u n c t i o n () {
$ ( 1# l o g i n 1) . d i a l o g ( 1c l o s e 1);
}); / / s ubmi t
, d iv ,
d i a l o g () c l o s e 1 .
.


-
.
.
- ,
,
JavaScript, Ajax,
13.


.
. , -,
( 14).
- , ,
.
,

(. 9.5).

Dialog j Query UI
. ,
. ,
, ,
, .

, d i a l o g ()
b u t t o n s , ,
. ,
.
:

453
III. jQuery Ul

$ ( 1#dialog1) .dialog ({
buttons : {
"11 : function () {
// , "
},
"" : function () {
// , ""

} // buttons
}); // dialog

. 9.5. ?
! ,
. ,
!

, { }.
, , ,

. , :
"" : function () {

454
9.

// , "11

,
. .
(. 4),
, .
,
-, , JavaScript.
,
.
' c l o s e '. ,
,
$ (t h i s ) . d ia lo g ( 1c lo s e 1) ;:

" : f u n c t i o n () {
// , ""
$ ( t h i s ) . d i a l o g ( ' c l o s e 1);
},
$ ( t h i s )
t h i s $ ( t h i s ) 4.
$ ( t h i s ) d iv ,
. d iv
d i a l o g (), .
.


-
.
:
1. 09_03.html.
CSS JavaScript jQuery UI
,
.
2. HTML- <!
- - > :

455
III. jQuery UI

<di v i d = " c o n f i r m" t i t l e = l,oepe ">


<> , ?</> </div>
d iv
.

3.
$ (document) . ready () :
$ (1#confirm1) .d i a l o g ({

}) ;
d iv .
{ } (.
CSS 4),
, .
,
.

4. m od al: tru e:
$ (1#confirm*) .d i a l o g ({

modal: true

}) ;
,
. ,
.
5. tr u e
, Enter ,
:
$ ('#confirm1) .d i a l o g ({

modal: t r u e ,
autoOpen: f a l s e
}) ;
/ ,
t r u e .
, ,

456
9.

. ro b o t,
c l i c k .
6. d ia lo g () ,
:
$ ( d o c u m e n t ) . r e a d y (f u n c t i o n () {
$ ( 1# c o n f i r r n 1) . d i a l o g ({
modal: t r u e ,
aut oOpen: f a l s e
});
$ ( , # r o b o t l ) . c l i c k (f u n c t i o n () {
} ) ; / / c l i c k
}); / / re a d y

(. : jQuery 5).
, ,
d iv , d i a l o g ()
1open 1.
7. c l i c k ():
$ ( d o c u m e n t ) . r e a d y (f u n c t i o n () {
$ ( 1# c o n f i r m f ) . d i a l o g ({
modal: t r u e ,
aut oOpen: f a l s e
}) ;
$ ( 1#r o b o t f ) . c l i c k ( f u n c t i o n () {
$ ( 1# c o n f i r m ' ) . d i a l o g ( ' o p e n 1) ;
}); / / c l i c k
}); / / r e a d y

.
8. .
, .

457
III. jQuery UI

.
,
.


jQ uery UI


p o s i t i o n . p o s i t i o n (.
CSS 4),

.
, ,
, , .
,
a t .
,
, :
$ ( ' # d i a l o g 1) . d i a l o g ({
position: {
my: 'rig h t bottom ',
at: ' r i g h t bottom'
}
}); / / d i a l o g
my , a t
. , ,

(at). :
() (at)
.
CSS ( ,
b a c k g r o u n d - p o s i t i o n ) .
: l e f t , r i g h t
c e n t e r . : top, c e n t e r
bottom.
.
, (.

) -,

458
9.

, ,
.
o f ,
.
,
-. ,
,
, .
o f (.
: jQuery 4) jQuery. ,
l o g i n , ,
.
:
$('#dialog 1).dialog({
position: {
m y : 'center top',
at: 'center bottom',
of: '#login'
}
}); // d i a l o g


. , ,
10 ,
:
$ ( ' # d i a l o g ' ) . d i a l o g ({
p osition: {
my: 'center t o p - 1 0 1,
at: 'c e n te r bottom ',
of: '#login'
}
}); // d i a l o g
, (
) (, :
' c e n t e r t op+25% '). ,
(, t o p ) ,
(+ -) (, 25%),
position .
a p i.jqu e ryu i.co m /po sitio n /,
p o s i t i o n jQuery Ul.

459
III. jQuery Ul

9. 09_03.html.
d ia lo g ()
f a l s e , Enter,
:
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$ ( 1# c o n f i r m 1) . d i a l o g ({
modal: t r u e ,
autoOpen: f a l s e ,
b u tto n s: {
}
}) ;
$ (1#r o bot1) .c l i c k (function() {

$ (1#confirm1) .d i a l o g (1open 1);

}); / / c l i c k
}); / / r e a d y
b u t t o n s .
,
-. .
10. b u tto n s ,
:
buttons : {
1111 : fu n c tio n () {
}
}
.
, .
-:
,
. , .
.
11.
:

460
9.

buttons : {

" : function () {

$ ( f #r o b o t * ) . e f f e c t ( 1e x p l o d e 1) ;
}
}
,
j Query UI explode,
. (
j Query UI j Query UI
12.)
.
12.
, Enter ,
:
buttons : {

" : function () {

$ (1#robo t1) .e f f e c t (* explode 1);


" : f u n c t i o n () {
}
}
,
. .
, .
,
, ,
, .
13.
$ ( t h i s ) . d i a l o g ( 1c l o s e 1);:
buttons : {

"": f unction() {

$ ('#r obo t1) .effect (' explode 1);

461
III. jQuery Ul

}/
"": function () {

$ ( t h i s ) . d i a l o g ( 1c l o s e 1) ;
}
}
dialog (),
div ,
$ (this) ,
$ (this) .dialog ( 1c l o s e 1) ;
$ ( 1#conf i r m 1) . dialog ( 1close ' ) ;.
.
, ,
!
,
: . ,
. .
14. $ ( t h i s ) . d ia lo g ( 1c l o s e 1) ;
.
:
$ (document).ready(function() {

$ (1#confirm1) .d i a l o g ({

modal: true,

autoOpen: false,

buttons : {

"" : function () {

$ ( 1# r o b o t 1) . e f f e c t ( 1e x p lo d e 1) ; $ ( t h i s ) <-J
. d i a l o g ( 1c l o s e 1) ;
},
"" : function () {

$ (this) .dialog('close 1);

}
}

462
9.

}) ;
$('#r o b o t ') .c l i c k (function () {

$ ( 1# c o n f i r m 1) . d i a l o g ( 1open 1) ;
}); // click

}); // ready

.
( ) , . 9.5.
, .
09_03.html .




. , ,
,
Twitter, Facebook, Reddit, Instagram . . , -
, , .
,
, , :
Facebook.

j Query UI
(. 9.6).
,
HTML-, , .
,
:
1. , ,
jQuery jQuery UI.
CSS
JavaScript.
2. t i t l e ,
:
< href="https ://twitter.com/eksmo_live"
title=f,Cneflyj*Te Twitter">

463
III. jQuery UI

<img s r c = " t w i t t e r . png">


</a>

t i t l e . ,
, ,
. , ,
j Query UI
.

. 9.6.
. ,
( ).
,
,
HTML-
-

3. t o o l t i p ():
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$ ( f [ t i t l e ] 1) . t o o l t i p () ;
}); / / re a d y

(.
4),
464
9.

title, tooltip ().


. j Query UI

title.

. ,
title,
, , tooltip, ,
,
:

$ ( 1 .tooltip 1) .tooltip ();

j QueryUI
- (
):
1. 09jD4.html.
CSS JavaScript jQuery UI
- HTML-
t i t l e , .
2. <></>
.:
< title="H ."></>


. (
.)
3. <img src="images/map.png">
!:
<img src="images/map.png" title="H !">

, HTML- .
4. <button>KHoniea</button>
!:
<button title=" !"> -
KHonKa</button>

465
III. jQuery Ul

j Query.
5. $ (document) .rea d y ()
$ ( f [ t i t l e ] ') . t o o l t i p ()
:
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$(' [ t i t l e ] f ) . t o o l t i p ();
}); / / r e a d y
. $ ( f [ t i t l e ] 1)
t i t l e , . t o o l t i p ()
. .
, ,
(9.6). _09_04.
html .

,
.
. Dialog (.
),
(.
CSS 4), ,
. :
show. show
. show
,
. ,
,
,
j Query UI (.
j Query UI 12).
hide. show,
.
track. t r u e ,
( ,
HTML-, ):
track: true

466
9.

,
, .
t o o lt ip C la s s .
, :
t o o l t i p C l a s s : 1t o o l t i p 1

j Query UI
.
p o s it io n . position (.
) j Query UI
( ,
, ).


position.
.
HTML-, ,
, .
, ,
,
, !

,
t o o l t i p (). , ,
,
. t o o l t i p () :

$ ( f [ t i t l e ] f ) . t o o l t i p ({
show: t r u e ,
h i d e : 1e x p l o d e 1,
track: true
}) ;

HTML-

,
jQuery UI . , ,

467
III. jQuery Ul

, ,
? HTML-
title,
.
Tooltip
. content ,
.

.
HTML-,
. ,
, :

< href="coolest_person_on_earth.html" id="me">06o </>

,
:

$(* # 1) .tooltip ({
content: ?<img s r c = " m e .png" alt="ri0CM0TpMTe -1
!">1 });

$ ( 1#me 1) , . tooltip ()
content HTML-
, ,
img.

HTML-
, HTML- ,
content, .
? HTML-,
-, ,
.
jQuery- hide (), HTML- ,
t o o l t i p (), HTML-
.

, ,
JavaScript: ,
HTML- <script>.
script JavaScript,
HTML-. j Query

468
9.

HTML-
! , h2
. HTML-
s c r i p t :
< script id="tooltipTemplatefl type="text/template">
<h2>06o MHe</h2>
<ul>
< > .</li>
< > 3 < / >
c l i x i m g src="me .png" alt=lfnocMOTpnTe !"></li>
</ul>
</script>

,
,
tooltipTemplate. , .
t =111 ext / template " ,
, ,
type,
s c r i p t .
</body>.


HTML- Tooltip:
$ ( 1# m e ').t o o l t i p ({
content: $ ( 1#tooltipTemplate1).h t m l ();
}) ;

4, html () jQuery HTML-
. <script>,
HTML- , HTML-
. jQuery UI HTML-
.

HTML-
HTML-
,

469
III. jQuery UI

s c r i p t , -
.
1. 09_05.html.
- CSS JavaScript
jQuery UI. HTML-,
.
2. <! - -
- - > HTML-:
< s c r i p t id=" c o n t a c t I n f " ty p e = 11t e x t / t e m p l a t e 11>
<p> 555-555-5555</p>
<p><img s r c = " i m a g e s / m a p . png" title="H ! "></p>
</script>
, ,
HTML- s c r i p t .
HTML-,
j Query.
3. $ (document) . ready () :
$ ( f # c o n t a c t 1) . t o o l t i p ({
c o n t e n t : $ ( 1# c o n t a c t I n f ') . h t m l ();
}); / / t o o l t i p
:
( c o n t a c t ) .
.
$ ( f # c o n t a c t I n f 1) s c r i p t ,
, . ht ml () HTML-.
-.
,
, . 9.7.
_09_05.html 09.


-
.
, ,

470
9.

.
,
, ,
. ,
Best Buy (. 9.8), .
, ,
, , ,
,
.

. 9.7. ,
t i t l e .
HTML-, , . ,
, ,
, ,
.
(. )

j Query UI ( )
. , HTML-.
jQuery UI ,
HTML , , ,
:
d iv .
-.
d iv , .
j Query,
jQuery UI, .
, .

471
III. jQuery Ul

. 9.8. ,
.
,
,



,
d i v , , < d i v
c l a s s = " t a b b e d P a n e l s ,f>.
d i v $ ( 1 . t a b b e d P a n e l s ')
,
:
$ ( 1 . t a b b e d P a n e l s ') . t a b s ( ) ;

.
. l i .
l i
h r e f ,
. , ,
. HTML-
:

472
9.

<ul>
c l i x a h r e f = f,# d e t a i l s ff>OnMcaHMe < / > < / >
< l i > < a h r e f = 11#re v ie w s 11>0</></1 i>
c l i x a h r e f = " # o r d e r n>3a Ka3a Tb</ a ></ l i >
</ul>
.
HTML-. d iv ,
a r t i c l e , s e c t i o n .
d iv ,
# . :
<d i v id = " d e t a i l s 11>
< ! - - HTML- -->
</div>

. j Query UI
, .
, JavaScript,

d iv .
HTML-, , , ,
, . . HTML-
.

HTML-
:

<d i v i d = " t a b b e d P a n e l lf>


<ul>
< l i x a h r e f = lf# d e t a i l s fl>OnncaHne < / / >
<li><a h r e f =n# re vie w sfl>0T3HBbi</aX/li>
c lix a h re f= " # o rd e rM> 3 a K a3 a Tb < / a x / li>
< / ul >
<d i v i d = f,d e t a i l s ,f>
<!--HTML- 1 -->
</div>
<d i v i d = " r e v i e w s " >
< ! - - HTML- 2 -->

473
III. jQuery Ul

</div>
<div id= "order11>
<! HTML- 3 -->
</div>
</div>

.
-
tabbedPanel, ,
#details, #reviews #order.

,
l i .


jQuery Ul
.
, <~,
.

. 9.9. jQuery Ul
: , HTML JavaScript.
,
jQuery Ul ThemeRoller (.
ThemeRoller 11)

474
9.

HTML- ,
, tabs () :

$ ( 1#tabbedPanels1) .tabs ();

,
. 9.9.

j Query UI, Tabs


.
,
t a b s (), ,
. :
show h id e. ,
. ,
Dialog. ,
,
tabs () :

show: 1slideDown1,

hide: 'slideUp1

a c t iv e . ,
,
.
. active:
active: 1

JavaScript (.
2), 0,
active 1 .
false
active : false, .
, . ,
true
collapsible.
c o l l a p s i b l e . collapsible true,
, .

475
III. jQuery Ul

, ,
t r u e ,
,
. ,
, , ,
,
.
t r u e
f a l s e a c t i v e (. ),
.
even t. .
, .
, ,
e v e n t (.
5). ,
,
:
e v e n t : 1mo u s e o v e r '
.
,
,
-, - .
( d b l c l i c k ) ,
, ,
.
h e ig h tS ty le . h e i g h t S t y l e
:
c o n t e n t , a u t o f i l l . c o n t e n t ,
.
,
,
. -

- .

a u t o ,
.
, ,

476
9.

. fill
.

, .


.
HTML-. JavaScript :
1. 09_06.html.
CSS JavaScript j Query UI
-. HTML-,
. ( HTML-

). -
. ,
, .
2. HTML- <> -
</>. <div>, ,
id= "tabC ontainer":
<> </>

<div id="tabContainer11>

j Query UI ,
, div.
div jQuery
tabs (). .
3. ( u l )
<div>, .
<> #:
c l i x a href="#panell"> l</a></li>

c l i x a href="#12"> 2 < / a x / l i >

c l i x a href=f,#panel3">B^aflKa 3 < / a x / l i >

,
.

477
III. jQuery UI

, l i d iv
, l i . .
,
d iv .
4. d iv u l,
( HTML-
<! 1 > < d iv> ).
<div> id = "p a n e l 1":
< ! - - 1 - - >
<di v i d = " p a n e l l ">
.
5. 4 d iv
( HTML-).
, d iv
, , 3.
, <div> <di v
i d=" pa n el 2 " >.
.
6. $ (document) . ready (fu n c tio n ()
ta b s ():
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n () {
$ ( # t a b C o n t a i n e r 1) . t a b s () ;
}); / / r e a d y
.
, . 9.10. ,
(. 1)
JavaScript. ,
d iv
.
, ,

.
7. (
) ta b s ():
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {

478
9.

. 9 .1 0 . -,

$ ('#tabContainer1) .t a b s ({
show: 1fadeln
hide: 1fadeOut1
}) ;
}); // ready

,
.
, , 'slideDown' 1slideUp '.
.
,
: ,
, active (.
). ,
,
,
? , ,
,
, .
, ,

.

479
III. jQuery UI

, , ,
company.com/productA.html#specs,
.
, JavaScript.
# specs URL-
- .
8. ta b s () var
hash = lo c a t io n .h a s h ; .
, location.
URL-
, (location.hostname),
URL- (location .href) (
developer.mozilla.org/en-US/docs/Web/API/Location
). location.hash
URL-, #.
, http://mycompany.com/productA.
html#specs. location.hash URL-
#specs. hash
hash.
9.
, :
$ (document).r e a d y (function() {

$ (1#tabContainer ') .tabs ({

s how: 1fadeln1,

hide: ffadeOut1

}) ;
var hash = location.hash;

if (hash) {

$ (1#tabContainer1) .t a b s (1l o a d 1, hash)

}
}); // ready

hash,
, tabs.html,
hash ,

480
9.


. hash, ,
#panell, .
($ ( 1#tabContainer 1) ), tabs ()
. , load ,
jQuery UI, tabs ()
. hash ,
, #panell, #12
#13.
10. .
.
#13 URL- ( tabs.html).
.
. ( ,
URL- ,
.)
09_06.html -
09.


jQ uery Ul
5
, click, mouseover, focus resize.
,
, ,
. ,
, ,
.
jQuery Ul
,
.
, .
, Tabs beforeActivate,
,
jQuery Ul . ,

. ,
beforeActivate URL-

481
III. jQuery Ul

, URL-
# ,
, tabs.html#panel3.
, 9
,
URL-,
.
, beforeActivate -
tabs () :
$(#tabContainer') .tabs ({
beforeActivate: function(evt) {
location.hash=$(evt.currentTarget). attr(1href 1); }
}) ;
.
, href ,
(#panel, #12 #13),
hash location (. 8
).
_09_06_02.1 .
Tabs, jQuery Ul
,
.
,
jQuery Ul.
, .

API (API
Application programming interface
,
).
QuickNav,
, . ,
API Dialog (a p i.jq ue ryu i.co m /d ia log /)
11 ,
!

j Query
-. ,
, -
482
9.

d iv ,
, ( ,
-). ,
( ,
, ).
, , ,
, , .NET Ruby On
Rails, .


-, - d iv ,
, ,
ta b s (). , ,
, . panell.
html, panel2.html panel3.html.
HTML-:

< d iv id = " ta b C o n ta in e r" >


<ul>
c l i x a h r e f = " p a n e l l . h tm l11> l < /a > < / l i >
< li> < a h re f= " p a n e l2 . 1"> 2 < / a x / l i >
c l i x a h r e f = ffp a n le 3 . html">BKnaflKa 3 < /a > < /li>
< /u l>
< /d iv >

,
-, , ,
, :

< d iv id = " ta b C o n ta in e r 11>


<u 1 >
c l i x a href=f,reviews .php?id=1298fl>noc^eflHHe <-J
c /a x /li>
c l i x a h r e f = flfo ru m ,p h p ? id = 1 2 9 8 ,l>Ocye -1
c /a x /li>
c/ul>
c /d iv >

-,
d iv , 3 . -

483
III. jQuery Ul

j Query UI
.
- d iv ta b s ():
$ (1#tabContainer1) .tabs ();

j Query UI
HTML- -,
. ,
jQuery UI HTML- panel1.html
.
, jQuery UI HTML-
, HTML- .


-, Google, Wikipedia , ,
, .
,
, -, .

:
. ,
HTML- h e a d e r t i t l e ,
CSS JavaScript,
. .
HTML-,
.


HTML-, HTML-,
. ,

,
( , head,
-).


- ,
(. ).
: j Query UI
lo ad .
, j Query UI .
j Query
484
9.

, .
, .

-,
.
, ,
, <div> ,
, <div id="panelContentlf>.
, HTML-,
head title.

load tabs ().


load ,
(.
4), jQuery UI,

. load jQuery
UI HTML-
.
HTML-, .
j Query HTML-
. ,
.

:
$ (1#tabContainer ') .t a b s ({
load: function(evt,ui) {
var newHTML =
u i . p a n e l .f i n d (1# p a n e l C o n t e n t 1).h t m l ();
ui.panel.html(newHTML);
}
})
2-5 load. jQuery UI

( evt ui 2). evt
j Query.
, 5.
,
load: ui. ui

485
III. jQuery UI

.
u i . p a n e l u i . t a b . u i . p a n e l
( d iv ,
jQuery UI -).

3 newHTML,
(
HTML-, head). jQuery UI
, HTML- ,

HTML-. ui .panel.find (1#panelContent1)
HTML-
panelContent (jQuery find ()
DOM 15). html () (.
: j Query 4) HTML-
. ,
HTML-
newHTML.


-
_.11
.
HTML-
load.

4 HTML- ( HTML-
head, t i t l e
) HTML- ( ).
,
,
HTML-.



jQuery UI, ,
,
. . 9.11.

486
9.

. 9.11 . jQuery Ul
d i v () ,
()


,
, .

487
III. jQuery Ul

,
.

, , .
,
HTML- .
:
d iv , .
div j Query,
Accordion.
, .
,
(, ?
. 9.11). ,
h2, h3 .
. (

,
.)
, .
div , .
div .
div
. ,
/ div. ,
HTML- , ,
:

<div id="ac co rd ion ">


<h3>Tpnrrep < / >
<div>
<! -->
</div>
<h3>Tpnrrep </113>
<div>
<! >
</div>

488
9.

< h3>T pnrrep </>


<div>
<!-- -->
< /d iv >
< /d iv >

HTML- CSS
JavaScript j Query j Query UI
Accordion -
a c c o rd io n ():

$ ( 1# a c c o r d io n 1) . a c c o r d i o n ( ) ;

, j Query UI
HTML- ,
. 9.11. , jQuery UI
,
:
active. a c t i v e
(.
). ,
,
. , ,
:
a c tiv e : 1
,
0. f a l s e ,
c o l l a p s i b l e tr u e ,
.
collapsible. tr u e ,
a c t i v e f a l s e ,
. ,
tr u e ,
: ,
, .
, .
animate.
.

489
III. jQuery Ul

,
false:
animate: false


. j Query UI
( ). ,
,
5 :

a n im a te : 5000
,
easing.
12, easing
: ,
, . ,
easelnElastic,
animate :

animate: 'easelnElastic1

easing, ,
, .
event. ,
. , event
,
.
heightStyle.
(.
).
ic o n s. . 9.11, jQuery UI
.
, , ,
. ,
, ,
. j Query UI
(
api.jqueryui.com/theming/icons/).
, icons ,
:
490
9.

icons : {
header: "ui-icon-plus",
a c t i v e H e a d e r : "ui-icon-minus"
}
,
j Query UI. header ,
, ,
activeH ea de r ,
. + -
.
j Query UI,
Accordion
. ,
- ,
, ,
. ,
a c c o r d i o n ():
$ ( 1# a c c o r d i o n 1).a c c o r d i o n ({
e v e n t : 1m o u s e ove r 1,
icons : {
h e a d e r : 1u i - i co n-c ir cl e- plu s 1,
a c t i v e H e a d e r : 1u i - i c o n - c i r c l e - m i n u s 1
}
}) ;

jQuery Ul
.
HTML-.
HTML- , HTML-
.
HTML-:
1. HTML-, ,
. - 09_07.html.
j Query UI
, (.
. 9.11).
491
III. jQuery UI

2. 09_07.html
HTML-, h i.
d iv , ,
. d iv
h3, d iv . h3
, d iv
. HTML-
h 3 /d iv ,
.
j Query .
3. d iv h i
:
< d iv id = " a c c o rd io n " >
HTML-,
.
.
4. $ (document) .rea d y ()
a c co r d io n ():
$ (document) . r e a d y ( f u n c tio n () {
$ ( 1# a c c o r d io n ). a c c o r d io n ( ) ;
} ); / / re a d y
.
. 9.11. ,
-?
jQuery UI . . ,
.
5. (
) ta b s ():
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$ ( 1# a c c o r d io n 1) . a c c o r d i o n ({
a c tiv e : f a ls e ,
c o l l a p s i b l e : tr u e
} );
} ); / / re a d y
, ,
. ,

492
9.

, ,
.
, c o l l a p s i b l e
tr u e .
j Query UI (api.jqueryui.com/theming/icons/).
6. ic o n s .

:
$ ( ' # a c c o r d io n 1) . a c c o r d i o n ({
a c tiv e : fa ls e ,
c o lla p s ib le : tr u e ,
ic o n s : {
header: 1ui-icon-circle-plus1,
activeHeader: 1ui-icon-circle-minus1
}
}) ;
He t r u e 3.
, JavaScript
.
, ,
,
, ,
.
7. .

. 9.11. ,
4.
_09_07.html 09.


jQuery UI Selectmenu,

.
,
, (. 9.12).

493
III. jQuery Ul

,
Selectmenu .

. 9.12. jQuery Ul
, jQuery Ul.
-,

jQuery UI,
.
HTML-, . ,
Smart Menus
7.
,
.
,
< li> . , HTML-
,
:
< u 1 id= " inMe n 11>
<li><a href="about.html">0 Hac</a></li>
c l i x a href="contact.html">KoHTaKTbi</ax/li>
c l i x a href="products.html">npoflyKTbic/a>

494
9.

<ul >
clixa href="a .h t m l " > A c/ a>c/li>
cli>ca h r e f = f,b .h t m l fT>npoflyKT B c / a x / l i >
cli>ca h r e f = " .h t m l n>IIpoflyKT C c / a x / l i >
c /u l>
c /li>
/ul>

HTML- ,
,
.
j Query UI, , ,
. ul,
.


,
.
l i , :
c li> - c /li>
jQuery UI ( ).

:
1. CSS jQuery UI, JavaScript jQuery JavaScript
jQuery UI.
j Query UI,
j Query UI -
.
2.
, .
,
.
3. CSS,
.
CSS-, jQuery UI,
,
. -

495
III. jQuery Ul

, . ui-m enu
w idth:
.u i-m en u {
w id th : 10em;
}
ui-m enu jQuery UI,
.
u l ( ).
, , %,

.
,
. , 100%
(
u l u l),
. :
.u i-m en u {
w id th : 25%;
}
.u i-m en u .u i-m en u {
w id th : 100%;
}
CSS CSS- ,
CSS- j Query UI.
jQuery UI ,
, CSS- j Query UI,
. j Query
UI 11.
4. u l menu ():
$ ( 1#mainMenu1).m e n u ();


_09_08.1
.

496
9.

jQuery UI,
,
. menu ()
:
icons. . 9.12, jQuery UI
,
.
,
. j Query UI
( api.jqueryui.com/theming/icons/
).
, ic o n s ,
:
ic o n s : {
subm enu: " u i - i c o n - c i r c l e - t r i a n g l e - e "
}
, , ,
,
, .
position. p o s i t i o n
.
,
jQuery UI p o s i tio n ,

j Query UI . ,
,
,
:
p o s itio n : {
my: " c e n t e r to p " ,
a t : " c e n t e r bo tto m "
}

( a t ) .
,
.

497
III. jQuery Ul

j Query UI
, ,
-. ,
SmartMenus,
7.

, CSS,
. 9.13.

,
j Query UI
.
(. 9.12) :
.

(. 9.13 ), -
. , jQuery UI,
,
,
, . 9.13.
1. ,
,
( HTML-
).
CSS-,
.
CSS- ,
CSS- j Query UI.
2. CSS-,
:
#mainMenu > l i {
w id th : 10em;
flo a t: le f t;
}
CSS #mainMenu > l i l i ,

i nMe nu. (, -
498
9.

ul ,
.

. 9.13.
CSS- jQuery Ul
,
jQuery Ul,
( ). Selectmenu jQuery Ul
( ).

, .
_09_08_02.html
09 08 03.html

499
III. jQuery UI

,
). >
, l i ,
u l,
.
,
. .
3. CSS:
.ui-m enu .u i-m en u {
w id th : 10em;
}
. j Query UI
( u l) .u i-m en u ,
. ui-m enu . ui-m enu u l,
u l. ,

.
4. , ,
:
#mainMenu {
flo a t: le f t;
}
escaping float,
,
f l o a t .
, ,
f l o a t .
,
f l o a t .
CSS
JavaScript.
5. menu (),
* ,
,
, :

500
9.

$ ( 1#menu1) .m enu({
p o s itio n : {
my: 1c e n t e r t o p 1,
a t: c e n t e r b o tto m 1
},
ic o n s : {
subm enu: 1u i - i c o n - t r i a n g l e - l - s 1
}
}) ;
p o s i t i o n (
) .
,
. ,
, .
, ,
,
( 1u i - i c o n - t r i a n g l e - 1 - s 1).
10

-
-.
, ,
. . 8
, -
. jQuery UI
, ,
.

, j Query
UI Datepicker, Autocomplete, Selectmenu Button,
.


.
,
.
, ,
12/10/2014,
,
. , ,
. ,
- ( , , : ,
, , : ,
, ), , ,
.

, j Query UI Datepicker
. ,
,
(. 10.1).
, .
502
10.

. 10.1. jQuery Ul Datepicker


-

j Query UI, Datepicker


:
1. , jQuery
UI - 9, CSS
JavaScript jQuery UI -.
j Query,
j Query UI
CSS jQuery UI, JavaScript jQuery JavaScript jQuery UI
( ).
2. in p u t
.
,
j Query. ,
:
cinput type=fftext" name="birthdate" id="birthdatel!>

(, ),
,
Datepicker :

503
III. jQuery Ul

cinput type="text" name=,larrival" class="date">


<input type="text11 name="departure" class="date">

3. $ (document) .ready ():


$ (document).r e a d y (function() {
}); // ready

4. jQuery ()
datepicker ():
$ (document).r e a d y (function() {
$(1#birthdate1).datepicker();
}); // ready

, 2,
:
$ (document).r e a d y (function() {
$ (1.date 1) .datepicker();
}); // ready

, ,
. 10.1. Datepicker
, . Datepicker

.


HTML5 date ,

Datepicker
JavaScript.

. , Datepicker jQuery
Ul ,
date HTML5.

Datepicker

Datepicker, ,
, j Query UI

504
10.

, datepicker ().
datepicker
.

, numberOf Months ,
.
1, . 10.1,
, . 10.2, 3:

$ ( 1.date 1) .datepi cke r({


numberOfMonths : 3
}) ;

. 10.2. Datepicker jQuery Ul .


,
,

:
changeMonth. , ,
Datepicker,

(. . 10.1). (),
().
, , ,
. true changeMonth,
,
(. . 10.2).
changeMonth : true

changeYear. changeMonth,
true j Query UI
.

505
III. jQuery Ul

yearRange (
), ,
.

changeYear : true

dateFormat. , ,
j Query UI
.
.
, dd , mm
, .
, / -.
, 27 2015
, ,
01-27-2015.
dateFormat :

dateFormat : 'mm-dd-yy1

j Query UI
.
. 10.1. ,
Datepicker j Query UI, : api.jqueryui.
com/datepicker/#utility-formatDate.


Datepicker jQuery Ul
, . api.jqueryui.
co m /da te picker/.

monthNames. , 12 ,
. ,
,
, d a t e p i c k e r ():
monthNames: [ "11, "", "",
"", "", "", "", "", -1
"", "", "", "" ]

numberOfMonths.
, ,
.

506
10.

. 10.1 . d a t e F o r m a t .

1y y - m m - d d 1 , , 2015-02-05
, , ,
, .


M ySQL.
'm /d /y ' 1 2 , 2 /5 /1 5
, , 1 2
, ,
, 2 ,
' D, d, ' Thu, Feb 5, 2015
, , ,
, , 1
2 , ,
, ,
' DD, d d , 1 , Thursday, February 5, 2015
, ,
, , 1 2 ,
, ,
,
' @' Unix. 1423123200000
,
1 1979
(. D a t e ,
16)

,
. ,
3 (. . 10.2), Datepicker
. ,
,
, ,
. ,
1, 2, 3.
maxDate. ,
Datepicker.
,
.
, ,
, ,
, .
,
. ,

507
III. jQuery Ul

, 30 ,
maxDate :
maxDate : 30


, ,
: , m , w
d . ,
, :
maxDate : f+ l y f

. ,
, ,
:
maxDate : f+3m +2w + 5 d f

maxDate
.
m inD ate. maxDate.
, .
, .
, ,
(
).
,
maxDate. ,
, 0:
minDate : 0

,
. ,
,
:
minDate : 1+ 3 w f


. ,
,
.
,
,
508
10.

, ,
- .
:
minDate : f- 2 y f

, . ,
,
, :
minDate : f-ly -2 - 3 d 1


minDate maxDate JavaScript
Date . ,
13 2010 .
Datepicker
:
minDate : new Date(2010, 2, 13)
16 ,
JavaScript Date.

yearR an g e. changeYear
(. ) ,
. , ,
. true
changeYear, 20,
30 50 . , changeYear
10
10 .
. ,
yearRange
,
.
, ,
.

. ,
, 120 .
:

yearRange : '-120:0'

509
III. jQuery Ul

j Query UI
,
100 , .
, .

Datepicker.

.



JavaScript 1
.

1. 10_01.html
10.
j Query UI
jQuery, $ (docum ent) .r e a d y ()
(. j Query 5).
.
2. $ (document) . ready () :
$ ( '# d o b ')
HTML- ,
: < in p u t ty p e = " te x t " id = " d o b lf
n a m e = " b irth d a te " > . dob,
.
Datepicker.
3. d a te p ic k e r ()
:
$ ( ' #do b 1) . d a te p i c k e r ( ) ;
, !
4. .
.

510
10.

.
Lightness j Query UI,
, .
.

12 ,
! , ,
.
5.
d a te p ic k e r ():
$ ( 1# d o b 1) .datepicker ({

}) ;
datepicker ()
{}, , .
.
6. changeMonth : true:
$ ( 1# d o b 1).datepicker({

changeMonth : true

}) ;
,
,
, 12
.
, 9 .
.
7. ,
Enter changeYear : true:
$ ( 1# d o b ).d a te pic ke r({

changeMonth : true,

changeYear : true

}) ;
.
, 10 10

511
III. jQuery Ul

, , .
10 , ,
, .
, ,
.

8. ,
Enter yearRange : 1-1 2 0 : +0 1:
$ ( 1# d o b 1) . d a t e p i c k e r ({
changeMonth : true,

changeYear : true,

yearRange : f-120:+0f

}) ;
,
. 120 ,
. .
, ,

.
.

9. ,
Enter maxDate : 0:
$ ( ' #d o b 1) . d a t e p i c k e r ({
changeMonth : true,

changeYear : true,

yearRange : l-120:+0f,

maxDate : 0

}) ;
.
,
: 1-27-2015.

10.
, Enter dateFormat
'm-dd-yy':

512
10.

$ ( 1# d o b 1).datepicker({

changeMonth : true,

changeYear : true,

yearRange : '-120:+0f,

maxDate : 0,

dateFormat : fm - d d - y y f

}) ;
,
.
11. .

(. 10.3).
_10_01.html .

. 10.3. Datepicker jQuery Ul


, .
,
.
28 2014 ,

513
III. jQuery Ul


j Query UI
. ,
, .
, ,
, ,
CSS.
,
(Windows, OS X, Linux), ,
CSS.
, j Query UI
Selectmenu, HTML-
,
j Query UI (. 10.4). Selectmenu

span, CSS.
JavaScript,
,
, JavaScript.
,
- .

. 10.4.
().
jQuery Ul
, jQuery Ul

jQuery UI
,
j Query UI :
1. ,
jQuery UI - 9, CSS
JavaScript jQuery UI -.

514
10.

]Query UI -
jQuery UI CSS, jQuery JavaScript
jQuery UI JavaScript ( ).
2. ,
s e l e c t , o p tio n :
< s e l e c t name="meal" id = "m eal">
<opt .></opt ion>

< ^ > BeraHOB</option>

< option> B e3 < / ^ >


< ^ > < / ^ >
<option> < / ^ >
< /s e le c t>

j Query.
,
, ,
c la s s = " s e le c t" .
3. jQuery- $ (document) . ready ():
$ (document) . r e a d y (f u n c t i o n () {
}); / / re a d y
,
JavaScript ,
$ (document) . r e a d y
5.
4. j Query
selectm en u ():
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {
$ ( 1# m e a l' ) . s e l e c t m e n u ( ) ;
}); / / r e a d y

, :
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {

515
III. jQuery Ul

$ ( 1. s e l e c t ) . s e l e c t m e n u () ;
}); / / re a d y
,
j Query UI Selectmenu
. , ,
. ,
.
5. selectm en u ()
width:
$ (document) . r e a d y (f u n c t i o n () {
$ ( 1# m e a l 1) . s e l e c t m e n u ({
w idth: 200
}>;
}); / / re a d y
] Query UI (, Datepicker,
Datepicker
),
Selectmenu, , /.
w id th
,
( ,
w idth).

, ,
, . 10.4.

Selectmenu .
,
, j Query UI.
,
:
width. .
j Query UI ,
,

516
10.

. ,
. ,
,
, , j Query
UI .
:
w i d t h : 300
,
, % . ,

(, d iv ), 100%
:
w i d t h : , 100%|
,
:
w i d t h : 1 1
ic o n s . j Query UI
(, . 10.4).
j Query UI
( api.jqueryui.com/theming/icons/,
). ,
i c o n s ,
:
icons : {
button: "u i-ico n -circle-trian g le-s"
}


, , icons
/.
, ,
icons. , Selectmenu
, .
, ,
, Accordion (.
9),
. ,

517
III. jQuery Ul

/,
.
jQuery Ul Selectmenu
icons.

p o s i t i o n .
. ,

.


. p o s i t i o n
j Query UI- position.
,
, ,
,
. (

jQuery UI.)

, -
. , -
,
. ,
,
. ,
. jQuery UI

.

change.
, , ,
, s e l e c t m e n u ().
change
. ,
c o l o r s .
Selectmenu j Query UI change:

518
10.

$ ( 1# c o l o r s 1) . s e l e c t m e n u ({
w i d t h : 300,
change : f u n c t i o n ( e v e n t , u i ) {
//
}
}) ;
, (
), .
: e v e n t ui. e v e n t
jQuery UI (. 5). ,
,
, , X Y
,
.

u i
. ,
.
( 0). u i
. u i
, ,
, (.
, 2).
u i . ite m , in d ex
.
, :
0, 1 . .
u i . ite m , la b e l
. ,
. HTML-
o p t i o n .
:
< s e le c t id="colors">
<option>KpacHbii</option>
<^></^>
<o p t i on>CHHH^/option>
</select>

519
III. jQuery Ul

:
, .

u i . ite m , v a lu e
.
value option.
. value
HTML-.
. ,
,
. ,
,
,
, , R7 85.

<select id="colors11>
<option value=,,R7 85">KpacHb^</option>
Copt ion value=nG101 ">/^>
Copt ion value="B4 98" > / ^ >
c/select>


"R785", 11G10111 "498", - ,
.

,
,
. , HTML-
, : ,
. ,
, .
,
HTML-:

cimg src="red_shirt.jpg" id="shirtff ^ = " -1


!">

7,
src,

520
10.

. ,

s r c :

$ ( 1#s h i r t 1) . a t t r ( s r c 1, ' b l u e _ s h i r t . j p g 1);

, ,
:

$ ( ?t c o l o r s 1) . s e l e c t m e n u ({
w i d t h : 300,
change : f u n c t i o n ( e v e n t , u i ) {
v a r newlmage;
i f ( u i . i t e m . l a b e l === '') {
newlmage = ' r e d _ s h i r t . j p g ' ;
} e l s e i f ( u i . i t e m . l a b e l === ' ') {
newlmage = ' g r e e n _ s h i r t . j p g ' ;
} else {
newlmage = ' b l u e _ s h i r t . j p g ' ;
}
$ ( ' # s h i r t ') . a t t r ( ' s r c ' , new lm age );
}
}) ;
change ,
, HTML-,
, ,
. .


jQuery Ul Selectmenu ,
. , : api.jqueryui.
com /selectm enu/.


j Query UI ,
,

521
III. jQuery Ul

. Button
, input, button:
cinput type="button">. ,
HTML- button,
CSS- j Query UI (. 10.5):
1. , jQuery
UI - 9, CSS
JavaScript jQuery UI -.
j Query,
j Query UI
CSS jQuery UI, JavaScript jQuery JavaScript jQuery UI
( ).
2. . ,
, b u tto n . :
<inputtype=" submit" id=" submit11value=" !">
<input type="reset11id="reset" value=" .11>
<input type=f,button,f id="inputButton" -1
value="KHonKa .">

j Query.
,
, , class="button".
3. j Query- $ (document) . ready ():
$ (document) . r e a d y (f u n c t i o n () {
}); // ready
,
JavaScript ,
j Query
5.
4. j Query,
b u t t o n ():
$ (document) .r e a d y (function () {
$ ( 1# s u b m it 1) . b u t t o n ( ) ;
}); // ready

522
10.


, :
$ (document) . r e a d y ( f u n c t i o n () {
$ ( 1. b u t t o n 1) . b u t t o n ( ) ;
}); / / r e a d y

,
jQuery UI (. . 10.5).

. 10.5. jQuery Ul Button


, , , ,
HTML () ,
()

j Query UI Button
. , ,
v a l u e in p u t,
. button,
<button>H -
Ka</button>, , ,

523
III. jQuery Ul

, .
,
button ().
ic o n s. j Query UI
(
button . 10.5). jQuery UI
(
: api.jqueryui.com/theming/icons/).
, icons ,
:
icons : {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-l-s"
}
, .
, , ,
.
. ,
button :
$ (1button 1) .b u t t o n ({

icons : { secondary: 1ui-icon-circle-arrow-e1 } });


i c o n s ,
in p u t, ,
b u tto n .

t e x t . button
icons,
. false
text,
. , :
<button id="next"></button>

j Query UI,

:

524
10.

$ ( 1# n e x t ') . b u t t o n ({
i c o n s : { s e c o n d a r y : 1u i - i c o n - a r r o w t h i c k - l - e 1 },
tex t : false
}> ;


Button jQuery Ul
, ,
a p i.jq u e ryu i.co m /b u tto n /.


,
(. . 10.5 ).
,
, CSS
, HTML-.
, j Query UI ,

j Query UI (. . 10.5 ).
,
. jQueryUI . b u t t o n s e t ().
. b u t t o n ()
.

, , HTML-:
, ,
d iv , j Query.
, ,
0, 1 2. HTML-
:

<d iv i d = r a d i o ">
< c l a s s = ,f 1 1" </>
ci-nput t y p e = " r a d i o " i d = f,n o n e ,f name=Mb a gs" *-
checked="checked">
<l a b e l f o r = " n o n e " > 0 < / l a b e l >

525
III. jQuery Ul

< i n p u t t y p e = " r a d i o " id = " on e " name="bags">


<label for="one">l</label>
< i n p u t t y p e = " r a d i o " id=" two " name="bags">
<l a b e l f o r = " t w o " > 2 < / l a b e l >
</ d iv >

< i n p u t
t =" a d i " >, d iv
r a d io . j Query UI,
1-3 j Query UI -
9, CSS JavaScript j Query
jQuery UI, $ (document) . r e a d y ().
JavaScript-:

$ ( ' # r a d i o 1) . b u t t o n s e t () ;

. $ ( 1#r a d i o 1) div,
; . b u t t o n s e t ( )
d iv
. b u t t o n s e t () ,
,
(. 10.6).


CSS- jQuery Ul
, (. . 10.6).
.
,
, button ()
. ,
HTML-
JavaScript-, :
$ (1#radio input) .button ();
button ()
div.

.
, ,
<div i d = " c h e c k " >,
b u t t o n s e t (). ,

526
10.

jQuery UI , . 10.6.
-:

.
( ). jQuery UI
.

. 10.6.
(). 1 (
jQuery Ul). , ,
(). ( )
( )

b u t t o n s e t () .
b u t t o n ()
. ,
, , .



, ,
, , ,
. , ozon.ru
,
, ,
: , , . .
(. 10.7). ,

i , .

, jQuery UI
,
.
. ,
, ,

527
III. jQuery Ul

.
, ,
.

, .

. 10.7. ?
, ,
,

,
.
,
,
. ,
,
. ,
PDX.
, . -

, .

Autocomplete,
j Query UI ,
528
10.

,
. , ,
j Query UI ,
. :
JavaScript -,
Ajax, -
.
,
:
1. , jQuery
UI - 9, CSS
JavaScript jQuery UI -.
j Query,
j Query UI
CSS jQuery UI, JavaScript jQuery JavaScript jQuery UI
( ).
2. :
< i n p u t t y p e = " t e x t " i d = ffa i r p o r t ,f name=f,a i r p o r t fl>

j Query. ,
.
3. $ (document) . ready ():
$ ( d o c u m e n t ) . r e a d y (f u n c t i o n () {
}); / / r e a d y
,
JavaScript ,
$ (document) . r e a d y
5.
4. jQuery
:
$ ( d o c u m e n t ) . r e a d y (f u n c t i o n () {
$ ( 1# a i r p o r t 1) . a u t o c o m p l e t e ( ) ;
}); / / re a d y
, a u t o c o m p l e t e ()
, s ou rc e,

529
III. jQuery Ul

, URL- ,
, , .
,
, ,
.

Autocomplete

Autocomplete ,
j Query UI ,
.
, j Query UI. ,
: ?
autocomplete ()
:

var colors = [fBarn R e d 1, 1Beetroot1, <-J


1B r i c k 1Bright M a r o o n 1, Burgundy1]; -1
$ ( 1#redlnput1).autocomplete( { source : colors } );

, colors.
autocomplete () source
, : source :
colors }.

,
, ,
: Barn Red, Beetroot, Brick, Bright
Maroon Burgundy (. 10.8 ).
, ,
, : Brick
Bright Maroon (. 10.8 ).

, ,
. , ,
,
.

Autocomplete ,

, . -

530
10.


JavaScript, ,
source .
,
, .

. 10.8. jQuery Ul Autocomplete


, , ,

JavaScript, , airports.js,
:

var airports = [
Aberdeen Regional Airport, Aberdeen, South Dakota1, ^
'Abilene Regional Airport, Abilene, Texas', 'Abraham
Lincoln Capital Airport, Springfield, Illinois', 'Adak^
Airport, Adak Island, Alaska', 'Adirondack Regional J
Airport, Saranca Lake, New York'
]; //


!

, .

531
III. jQuery Ul

,
,

, Autocomplete.
, JavaScript
(. JavaScript 1). :

<s c r i p t s = " a i r p o r t s . j s " x / s c r i p t >

,
Autocomplete,
a u t o c o m p l e t e (). ,
JavaScript- -
:

< l i n k h r e f = " c s s / j q u e r y - u i . m i n . c s s " r e l = " s t y l e s h e e t ">


c l i n k h r e f = " c s s / s i t e . c s s " r e l = " s t y l e s h e e t ">
<s c r i p t s r c = " j s / j q u e r y . m i n . j s " > < / s c r i p t >
<s c r i p t s rc = " j s / j q u e r y - u i .min . j s " x / s c r i p t >
<s c r i p t s rc = " j s / a i r p o r t s . j s " x / s c r i p t >
<script>
$ (d o c u m e n t) . r e a d y ( f u n c t i o n () {
$ ( 1# a i r p o r t 1) . a u t o c o m p l e t e ( { s o u r c e : a i r p o r t s } );
}); / / re a d y
< /script>

, airportsjs
a u t o c o m p l e t e (), ,
a i r p o r t s , .


j Query UI .
, . 10.8,
Bright Maroon,
j Query UI Bright Maroon.

j Query UI -
,

532
10.

. ,
. Autocomplete ,
: Aberdeen Regional Airport, Abilene Regional
Airport Abraham Lincoln Capital Airport.
j Query UI
, Abilene Regional Airport,
j Query UI
ABI.
, .
l a b e l v a l u e . ( l a b e l )
, ,
( v a l u e ) , jQuery UI
, .
,
. , ,
Abilene Airport, :

{
label : 1Abilene Regional Airport, Abilene, Texas1,
value : fA B I f
}
:

var airports = [
{
label : Aberdeen Regional Airport, Aberdeen, South
Dakota ',
value : fA B R f
},
{
label : 1Abilene Regional Airport, Abilene, Texas1, *-J
value : fA B I f
},
{
label : Abraham Lincoln Capital Airport,
Springfield, Illinois1,
value : fS P I f

533
III. jQuery Ul

},
{
label : Adak Airport, Adak Island, A l a s k a 1,
value : 1A D K 1
},
{
label : Adirondack Regional Airport, Saranca Lake, <-J
New Y o r k 1,
value : !S L K !
}
]; //


,
. airports.js .

.
a u t o c o m p l e t e (), jQuery UI
, ,
.

$('#airportf).autocomplete( { source : airports} );

Autocomplete ,

.
,
value. 12
.

Autocomplete ,
, .
,
?
.
534
10.

,
. , ozon.ru, ,
JavaScript,
: ,
.
, (
, yandex.ru ozon.ru),

. :
1. .
2. .
Ajax,
. ,
.
3. ,
, .
. ,
,
,
,
.
4.
.
,
Ajax,
JavaScript -
- (
Ajax 13).
,
, PHP, Ruby,
Python JavaScript ( Node.js).
.
Autocomplete
j Query UI : ,

s o u r c e , URL-,
.
535
III. jQuery Ul

, , ,
,
250 .
,
. ,

JavaScript.
products.php, .
, source.
,
"productSearch":

<input type="text" id="productSearch" <-J


name="productSearch">

JavaScript
Autocomplete :

$ ( 1#productSearch1). autocomplete ( { source : <-J


1/products.p h p 1} );

URL-,
:

$ ( 1#productSearch1). autocomplete ( { source : -1


1h t t p ://myCompany.com/products. p h p ' } );

source
( ), j Query UI
, ,
,
. Autocomplete -,
source URL-. jQuery UI
, ,
. ,
, ,
, , jQuery UI
.

,
. , ( )

, j Query

536
10.

UI URL, ,
. term, ,
. ,
, j Query UI
:

http://myCom pany. co m /p roducts.php?term = light

products.php
, , ,
.
, ,
: ,
. . , ,
,
, ,
. . ,
.


,
-. -
, Ajax,
,
JSONP,
JSONP 13.

,
:

[
"",
11 ",
" "
]
,
, ,
Autocomplete .
J SON,

537
III. jQuery Ul

JSON 13. ,
:
var airports = [
{
"label" : "Aberdeen Regional Airport, Aberdeen, <-J
South Dakota",
"value" : "ABR"
},
{
"label" : "Abilene Regional Airport, Abilene, Texas", -1
"value" : "ABI"
},
{
"label" : "Abraham Lincoln Capital Airport, ^
Springfield, Illinois",
"value" : "SPI"
},
{
"label" : "Adak Airport, Adak Island, Alaska", -1
"value" : "ADK"
},
{
"label" : "Adirondack Regional Airport, ^
Saranca Lake, New York",
"value" : "SLK"
}
];

, Autocomplete,
. ( ) source
.
.
, Autocomplete
autocomplete () . :

538
10.

$ ('#airport1) .autocomplete({
source : 1/airportSearch.p h p 1,
delay : 500,
minLength : 2
}) ;
:
source. .
URL-
. ,
label value (.
). URL-
,
(.
Autocomplete ).
delay.
j Query UI
, -
.
Autocomplete.
,
-,
. ,
,
:
delay : 500

minLength.
, , Autocomplete
.
, , ,
.
, ,
.


,
Autocomplete : api.jqueryui.com /
autocom plete/.

539
III. jQuery Ul

jQuery Ul Form


: ,
button (. 10.9 ). jQuery UI
jQuery UI Form,
, (. 10.9 ).

. 10.9. jQuery Ul
.
, , ,
( )



JavaScript 1
.

540
10.

1. 10JD2.html
10.
j Query j Query
UI, $ (docum ent) . re a d y () (.
j Query 5). HTML-
:
<form>
<div>
<label for="departure" class="label">Bbi6epHTe
</11>
< in p u t ty p e = "t e x t " id = "d e p a r tu r e " name="d e p a r tu re ">
</div>
<div>
clabel for="airport" 1="1 1" > -1
</label>
<input type="text" id="airport" name="airport">
</div>
<div>
< la b e l for= "m eal" class= "label"> riM TaH ne 4-1
< / lab el>
<select name="meal" id="meal">
<option>HeT</option>
<option>JH BeraHOB</option>
<option>Be3 rjuoTeHa</option>
<option>ftnn </^>
< ^ > MHCoeflOB</option>
</select>
</div>
<div id="bags">
<p 1 = " 1 1" > </>
<input type="radio" id="none" name="bags" -1
checked="checked">
< label for="none">0</label>
<input type="radio" id="one" name="bags">
< label for="one">l</label>

541
III. jQuery Ul

C in p u t type=" r a d io 11 id="tw o" name="bags">


< label f o r= "t won>2</label>
</div>
<div id =" se a t T y p e s 11>
<p cl ass =" la be l"> </>
< in p u t ty p e = 11checkbox" id = " a is le " n a m e= " a isle" >
< label for="aisle">y < / la b e l >
< in p u t typ e= "ch eckb ox" id="window" name="window">
<label f or =" w i n d o w "> </11>
< in p u t typ e= "ch eckb ox" id = " e x it " n am e= "exit">
<label f or = " e x i t "> </ 1 1 >
< in p u t typ e= "ch eckb ox" id="any" name="any">
< label for="any">JlK)6oe</label>
</div>
<div>
< b u tto n id = " n ex t" > +-1
< /b u tto n >
</div>
</form>

,
j Query UI, .
.
,
input departure.

2. $ (docum ent) .r e a d y ()
:
$ ( 1# d e p a r t u r e 1)

Datepicker.
3. d a t e p ic k e r () ;,
:
$ ( 1# d e p a r t u r e 1) .datepicker ();

,
.
, ,

542
10.

. ,
, ,
,
, .
4. datepicker ()
{. Enter },
:
$ ( 1#departure1).d a te pi ck er ({

}) ;
{} ,
, . -
, .
5. minDate : 0.
minDate ,
: 0 , -7
, 7 .

. ,
, ,
.
6. ,
Enter maxDate : 1+ 1 1,
:
$ ( 1#departure1).d a tep ic ke r({
minDate : 0,
maxDate : !+ l y f
}) ;
minDate maxDate ,
,
,
: !+1'
1 , 1-2 w 1 2 , 1+ lm + 10df 1
10 .
7. .
.

543
III. jQuery Ul

. ,

, (
, ,
12 ).

, Autocomplete
.
, .
Autocomplete
, a u to c o m p le te ()
JavaScript , ,
, -.
, ,
JavaScript-.

8. airports.js.

JavaScript,
a i r p o r t s , , :
l a b e l v a lu e . ( l a b e l )
, (v a lu e )
, .

, ,
, .
,
.

9. 10_02.html.
< s c r ip t s r c =" . . / _ j s / j q u e r y - u i .m in. j s " X / s c r i p t >
s c r i p t , :

<s c r i p t s r c = 11a i r p o r t s . j s f,x / s c r i p t >


JavaScript,
JavaScript.
,
Autocomplete.

10.
DatePicker :
$ ( 1# a ir p o r t1) . auto co m p lete({ source : ' a i r p o r t s . j so n 1});

544
10.

, ,
a i r p o r t , $ ( 1# a i r p o r t 1)
, . a u to c o m p le te ()
.
11. .
Port.

, , .
, ,
Port, , La Guardia Airport.
12. Portland International Airport,
Portland, OR.
, PDX.
,
. , ,
Portland International Airport, Portland, OR,
jQuery UI PDX.

.
13. 10_02.html.
, 10:
$ ( 1# m e a l 1).s e l e c t m e n u ();

, , ,

. , ,
.
!
,
.
14. selectmenu () {
width 200 },
:
$ ( 1# m e a l1) . s e le c tm e n u ( { w id th : 200 } );
w id th s e le c tm e n u (.
)
.
545
III. jQuery Ul

200 200 ,
, ,
,
.
-. ,
?

.
15. ,
:
$ (f# ba gs 1) .buttonset();

$ ('#seatTypes1) .buttonset();

buttonset () ,
.
button jQuery UI.

16. :
$ (1#n ex t1) .button();

HTML-
.
jQuery UI button,
.
.
17. button () :
{
icons : {
secondary : 1ui-icon-circle-arrow-e1
}
}
JavaScript :
$ (document) .r e a d y (function () {
$ (1#departure1) .da te pic ke r({
minDate : 0,
maxDate : f+ l y ?
}) /

546
10.

$ ( 1# a i r p o r t 1).a u t o c o m p l e t e ({ source : airports});


$( 1# m e a l 1). selectmenu ({width : 200}); $ ( 1#bags 1) -1
.buttonset (); $ ( 1# s e a t T y p e s 1) . b u t t o n s e t ();
$ (f# n e x t 1) . b u t t o n ({
icons : {
s econdary : 1u i - i c o n - c i r c l e - a r r o w - e 1
}
}) ;
}); // ready


-.
18. .

. 10.9. , ,
17.
JavaScript (.
1). , ,
j Query ,
j Query.

10 02.html 10.
11

JQUERY Ul

j Query UI
,
,
j Query,
, ,
CSS, .
j Query UI ,
- ,
CSS.

, ,
, j Query UI
? j Query UI
, -
. ,
jQuery UI,
.

ThemeRoller
jQuery UI :
CSS, (
) . , j Query UI
- ThemeRoller.
24 ,
j Query UI.
,
, .

ThemeRoller,
jqueryui.com/themeroller/ (. 11.1).
, Gallery ()

548
11. jQuery Ul

().
j Query UI:
,
.

. 11.1. ThemeRoller
jQuery Ul. 24 .
Download () .

. Edit () ,
ThemeRoller ,

, Download
() ,
j Query,
jQuery UI 9.
, , Download
() , .

549
III. jQuery Ul



jQuery Ul
jQuery Ul 9.

j Query UI ,
, ThemeRoller
, .
Roll Your Own ( )
( . 11.2):
, . .

. 11.2. Font Settings ( ),


.
,
( ). ThemeRoller

,
, .
:
Font Settings ( )
, .
550
11. jQuery Ul

(), , Family ().


,
: , ,
, .
, .
,
( s e r i f ( ), s a n s - s e r i f ( ), m onospace (
) f a n ta s y ()).
,
. ,
Helvetica Neue, :
"Helvetica Neue", Arial, sans-serif. ( ,
, ,
Helvetica Neue,
.) jQuery UI
, .
,
,
j Query UI.


-,
, Typekit Google
Fonts, , ,

ThemeRoller.

Weight ()
, normal () bold (
). bold ,
j Query UI
, ,
, , ,
.
.

jQuery UI. .
,
.

551
III. jQuery Ul

Comer radius ( ). j Query


UI ,
. 0 ,
.
, , .
Header/Toolbar (/ )

, .
:
, , , ,
.
,
:
Background color ( ).
, .
( ),
( ). .
. 11.3.
Background texture ( ). jQuery UI
, ,
.
, .
,
.
. . . 11.3.
Background texture opacity ( )
. 0,
. 10 ,
75% . . . 11.3.
Border color ( )
. ,
. ,
, ,
. ( ,
, . 11.3.)
Text color ( ). ,
,
.
552
11. jQuery Ul

. 11.3. ThemeRoller jQuery Ul


: ,
. ,
jQuery Ul

Icon color ( ).
. , Datepicker
.
,
, ,
.



, ,
#644.

Content ().
, ,
,
Selectmenu Datepicker.

Header/Toolbar (/ ):

553
III. jQuery Ul

, , ,
, .
Clickable items ( ). Theme
Roller ,
,
, - :
, , , Datepicker,
,
.
: (
),
(
) .
,
, Datepicker
(, ).

, Header/
Toolbar (/ ): ,
, , ,
.
Highlight () Error ()
.
CSS: . ui-state-highlight . ui-state-error,

. , Dialog (.
9)
. ,
Highlight (),
( ) dialog ():
$ ( 1#dialogDiv1).d i a l o g ({ dialogClass :
1ui-state-highlight1 });

, . ui-state-error,
,
. , - ,

error:
$ (1#userNameLabel1) .a ddC las s(1ui-state-error1);

554
11. jQuery Ul

j Query
, ThemeRoller.
j Query UI
( ).
.
Dialog (.
9) .

.
,
, ,
Facebook?
j Query UI
.

, , (

Header/Toolbar (/ )).
. :
j Query UI, Tooltip, .
, .


ThemeRoller
jQuery Ul URL-
: URL-
. ? ThemeRoller URL-
, .
, URL- ,
ThemeRoller
.
,
.


jQuery UI
Download Theme ( ),
ThemeRoller. Download Builder

555
III. jQuery Ul

( ) (. . 11.2).
, jQuery UI,
Download () .
, , Dialog,
Datepicker Tabs, , ,
, ,
Download ().

j Query UI
, ,
, . ,
, .
, Download Builder (
) (. . 11.2), ,
(, ),
. ,
, CSS, .
, j Query
UI, ,
Dialog, CSS-,
. ,
Dialog, j Query UI,
CSS CSS-,
, ,
CSS.

jQuery UI ,
(, j Query UI,
JavaScript).
images CSS:
1. CSS jQuery UI
.
j Query UI
9, jQuery UI CSS-.
.
- jquery-ui.min.css.
j Query CSS
556
11. jQuery Ul

() . ,
, .min,
. CSS ,
, , css
.
2. images j Query UI images.
,
. ,
, ,
. images j Query UI
, CSS
j Query UI, , css
jquery-ui. ,
CSS- j Query, .


, jQuery Ul
. jQuery Ul ,
, , JavaScript jQuery Ul
. ,
CSS, JavaScript jQuery Ul (Jquery-ui.min.js)
.

CSS- jQuery Ul

jQuery UI CSS-,
,
: (
, jquery-ui.min.css), CSS-
(, jquery-ui.css). , -
,
. ,
CSS- j Query UI.

jquery-ui.css
(jquery-ui.structure.css jquery-ui.theme.
css). jQuery UI ,
CSS,
.

557
III. jQuery Ul


jQuery UI , z -in d e x
p o s i t i o n .
jquery-ui.structure.css.

. ,
, ,
.
query-ui-theme.css.
, .

, jquery-ui.min.
css , jquery-ui-theme.css

j Query UI.

jQuery Ul
j Query UI , .
, ThemeRoller (.
ThemeRoller )

, , . .
,
?

,
,
CSS- jQuery UI. CSS- j Query
jQuery UI,
jquery-ui.css, j Query UI,

CSS- jquery-ui.css.

j Query UI,
ThemeRoller

.

j Query UI
CSS. CSS,
j Query UI,
558
11. jQuery Ul

.
. ,
j Query UI,
CSS.
, ,
,
jQuery UI, jQuery UI:

<link href="css/jquery-ui.min.css" rel="stylesheet">


<link href="css/site.css rel="stylesheet>


jQuery UI, ,
j Query UI.
,
j Query UI.

CSS .

, ,
. CSS, -
. CSS
.
:
,
, ,
. :
< id="susanlf class=lfperson"> : -1
CSS</p>

HTML- .
, CSS-:

#susan {
color: green;
font-size: 24px;
}
.person {

559
III. jQuery Ul

c o lo r : b lu e ;
t e x t - a l i g n : c e n te r;
f o n t - w e i g h t : b o ld ;
}
P {
c o lo r : o ra n g e ;
fo n t- w e ig h t: n o rm al;
f o n t- f a m ily : A r i a l , s a n s - s e r i f ;
}
, c o lo r.

, ,
.

,
t e x t - a l i g n .p e r s o n ,
, .
24 (
#susan), (
. p e rso n ), Arial ( ).

j Query UI
, ,
.
, , .

( ),
, .
j Query UI.
, j Query UI
jQuery UI. ,
jQuery UI :
/* jq u e r y - u i * /
.u i - w id g e t- c o n te n t {
c o lo r : #222222;
}

560
11. jQuery Ul


j Query UI,
,
j Query UI:
/* * /
.ui-widget-content {

color: #FF0;

}
.

. ,
.
,
100 , 10 ,
1 . , #main
. u i - s t a t e - d e f a u l t ,
101 ( ),
11 ( ). ,
j Query UI
, .
! im portant.
CSS ! im p o rta n t.
CSS,
.
, CSS,
, :
{
color: orange !important;

font-weight: normal !important;

font-family: Arial, sans-serif !important;

}
! im p o rta n t,

# su san .p e rso n . ! im p o rta n t
.

561
III. jQuery Ul

,
! im p o rta n t, .
( ! im p o rta n t,
,
, ,
, .)

jQuery Ul

j Query UI
: . u i - d i a l o g
j Query,
. , . u i- w id g e t,
.
:

.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.lem;
}
,
.
Dialog j Query . ,

:

class="ui-dialog ui-widget ui-widget-content 4-1


ui-corner-all ui-front ui-draggable ui-resizable11


.
, j Query UI
. ,
, j Query
UI (. 9):

class="ui-menu ui-widget ui-widget-content

, u i- w id g e t u i -
w id g e t- c o n te n t .

562
11. jQuery Ul

,
.

, d iv
(.
9),
(. 9).
jQuery UI HTML- div,
span HTML-, .
, ,
HTML- jQuery UI.
HTML- ( HTML-
, j Query UI), ,
j Query UI .

, j Query UI
,
.
HTML-. Chrome,
, jQuery UI
Inspect Element (
). ,
HTML- Elements
() (. 11.4).

( . 11.4)
.
,
HTML- Elements (
).
, , .


. ,
Chrome , HTML-,
, . u i - d i a l o g - t i t l e (. 11.5).
,
:

.u i- d ia lo g - title {
c o l o r : re d ;
}
563
III. jQuery Ul

. 11.4. Elements ()
HTML-.
, HTML-,
. HTML-

. 11.5. Inspector () (
),
HTML-, .
HTML-, jQuery Ul

564
12

JQUERY Ul

j Query UI
.
, -
-. j Query UI
,
. ,
. ,
, ,
.
,
,
, , .

, j Query UI ,

. ,
, ,
, , ,
.
jQuery UI .

Draggable

.
, ,
, . .
, .
j Query UI
Draggable
Droppable ( Droppable ).

565
III. jQuery Ul

Draggable
. j Query UI
Dialog (.
9): jQuery UI ,
.
Draggable Droppable
.
, .

Draggable -


. ,
. ,

.
,
- .

Draggable :
1. ,
jQuery UI - ,
CSS JavaScript.
, j Query UI
CSS JavaScript, JavaScript- jQuery
UI JavaScript-
j Query.
2. $ (document) . ready ()
JavaScript-:
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
} ); / / re a d y

j Query 5, ,
JavaScript-
HTML.
JavaScript
</body>.
$ (document) . r e a d y ().
566
12. jQuery Ul

3. jQuery,
Draggable:
$ (document).ready(function() {
$ ( 1#dia lo g1).d ra g ga b le ();
}); // ready

,
.
,
HTML-, , K<divclass=" dr aggab 1 " >,
,
draggable () :

$ ( 1.draggable 1) .dragga ble ();

4. .
, . , ,
. , j Query UI
.
Draggable .

Draggable

,
.



JavaScript 1
.

1. 12_01.html
12.
j Query UI
jQuery, $ (document) .ready () (.
j Query 5).
HTML div
note .
.
567
III. jQuery Ul

2. $ (document) . ready ()
, :
$ (docum ent) . r e a d y (f u n c t i o n () {
$ ( 1# n o t e 1) . d r a g g a b l e () ;
}); // ready

div .

3. (. 12.1).
div
.
,
.


-
_12_01.html.

. 12.1 .
d i v . Draggable
jQuery Ul Dialog (.
9)

568
12. jQuery Ul

Draggable

j Query UI Draggable ,
. ,
, ,
, .
j Query UI, ,
d ra g g a b le () . ,
h2 ,
,
:

$ ( 1# c o n t r o l s 1) . d r a g g a b l e ({
c u r s o r : 'p o i n t e r 1,
h a n d le : fh 2 '
}) ;
:
axis.

. ,
. ,

. 1 1 (
) 1 1 (
):
a x is : ! !
cancel.
. ,
, .
,
, . ,
(,
Google Maps),
.
can c e l:
c a n c e l : fp f
, - ,

569
III. jQuery Ul

. h a n d le , ,

.

connectToSortable.
,
. j Query UI
sort able, ,
, , (

). ,
,
(. ):
connectToSortable : f#toDoListf

containment.
. ,
,
, .
d iv ,
, ,
. ,
, , ,
. c o n ta in m e n t
.
:
. , j Query UI
.
, d iv
r e f r i g e r a t o r ,
d iv , :
containment : 1#refrigerator1

parent, document window.


,
p a r e n t. ,
d iv d iv ,
d iv ,
p a r e n t :
containment : p a r e n t 1

570
12. jQuery Ul

document window
, document
, window
.
.
,
.
. , ,
,
, 50 100
, 500
600 .
:
containment : [50, 100, 500, 600]


,
. -
.
c u r s o r .
. (
)
( ).
j Query UI
, cursor
CSS.
: developer.mozilla.org/en-US/docs/Web/CSS/cursor,
,
pointer, crosshair default ():

cursor : 'pointer1

c u rs o rA t.
. ,
. ,
div ,
div
. ,
, ,
, .
cursorAt .
571
III. jQuery Ul

, left,
right, top bottom. ,
,
left top :
cursorAt : {
left : 5,
top : 5
}
left right,

.
top bottom.
(left right top
bottom). ,
. , ,

, top.
,
:
cursorAt : { top : 5 }

d is a b le d . , .
true,
. , , ,

draggable (). , , ,
disabled,
Draggable.
, -
. ,
, .

(
drop ).
g rid .
. ,

. , - .

572
12. jQuery Ul

8 x 8 .
, ,
, . ,
.
j Query UI
. grid
, .
, .
, ,
50 ,
100 .
grid :
grid : [50, 100]

h a n d le . ,
. ,
, .

.
handle, ,
.
, ,
, , , h2:
handle : fh 2 f

h e lp e r . , ,
. ,
.
,
,
. , ,
,
.
,
, .
helper 1clone 1:
helper : 1c l o n e 1

helper
, HTML-, jQuery UI

573
III. jQuery Ul

. ,
d iv (
HTML-)
h e lp e r :
h e lp e r : f u n c t i o n ( e v e n t ) {
r e tu r n $( "< div c l a s s = 1u i- w id g e t- h e a d e r 1> <-J
< ^ > ) ;
}
, ,
j Query UI .
, j Query,
$ ().
HTML- .
o p a c ity .
. , 50%,
.
,
. 0 () 1 (
). ,
CSS o p a c ity . ,
50% , 0.5:
o p a c ity : 0 .5
r e v e r t . ,
,
. ,
f a l s e , ,
, , .
,

- .

. ,
Droppable (. Droppable ), ,
, ,
, . ,
.

574
12. jQuery Ul

.

, .
,
, .
r e v e r t :
t r u e
(
). 1i n v a l i d 1
,
(.
Droppable ).

i n v a l i d :
re v e r t : 'i n v a l i d 1
.
tr u e ,
.
JavaScript , :
, ,
(,
, ).
tr u e , j Query
UI .
r e v e r t : f u n c tio n () {
//
// t r u e ,
// f a l s e ,
// ,
//
}
r e v e r tD u r a tio n . j Query UI
( ),
. 500
. ,
( 500)
( 500).

575
III. jQuery Ul

revertDuration,
, ,
. , ,
(250 ),
revertDuration :
r e v e r tD u r a tio n : 250
scope. sco p e
. ,
.
.
,
c a le n d a r:
scope : 'c a l e n d a r 1
'c a l e n d a r 1
. ,
.
, ,
scope,
(. Droppable ).
sco p e ,

. ,
, ,
, .
scope ,
,
(. Droppable
Droppable).


12_01.html,
-.
, _12_01 .html
draggable () .

snap. ,

576
12. jQuery Ul

, ,
.
,
, ,
:
true jQuery UI ,

. ,
.
. . ,
,
div photoholder,
:
snap : '#photoholder1


snapMode snap Tolerance,
.
snapMode.
snap : inner, outer
both. ,
, ,
inner,
,
snap.
outer, ,
.
, ,
.

, both:
snapMode : fb o t h f

sn ap T oleran ce ,
, .
,
, .
:

577
III. jQuery Ul

s n a p T o le ra n c e : 30
zln d ex . z In d e x
. CSS z ln d e x
.
z ln d e x
, . ,
,

. (
Drag-and-Drop .)
z ln d e x : 100



Draggable api.jqueryui.com /draggable/. . . 12.2.

Draggable

Draggable ,

. ,

.

, ,
.
, .
.

c r e a t e

,
d ra g g a b le () .

.
Draggable.

578
12. jQuery Ul

, c r e a t e
d ra g g a b le ():
$ ( 1. p r o d u c t 1) . d r a g g a b l e ({
c r e a t e : f u n c tio n ( e v e n t ) {
/ /

}) ;

. 12.2. jQuery Ul . ,
Draggable, ,
,

s t a r t

,
.
, Draggable. , s t a r t ,

579
III. jQuery Ul

, ,
, .

, d iv .

s t a r t :
$ ( 1# ra c e C a r) . d ra g g a b le ({
s t a r t : f u n c tio n (e v e n t, u i) {
/ /
}
}) ;
, s t a r t ,
: e v e n t u i. e v e n t
j Query ,
,
. (
5.) u i
:
u i . h e lp e r j Query,
, . ,
, d ra g g a b le ().
. h e lp e r
1c lo n e 1
HTML- ( ),
u i . he 1 , :
, j Query,
(. ). , ,
,
. ,
.
u i . h e l p e r ,
,
. , ,
.
CSS u i . h e lp e r :
$ ( 1#photo f ) . d ra g g a b le ({
s t a r t : f u n c tio n (e v e n t, u i) {

580
12. jQuery Ul

u i . h e l p e r . c s s ( 1t r a n s f o r m 1, 1s c a l e (2) 1) ;
}
}) ;
j Query c s s () (.
CSS 4), CSS tra n s fo rm
.
j Query a d d C la ss (), ,
, , ,
. ,
rem oveC lass () (.
s to p ).


CSS ,
: developer.m ozilla.org/en-U S /docs/W eb/G uide/C S S /U sing_
CSS_transforms.

u i . p o s i t i o n
h e lp e r (
). CSS p o s i t i o n ,
(
). ,
d iv , d iv
, l e f t to p

.
u i . p o s i t i o n JavaScript,
to p l e f t . to p
,
(
,
). l e f t

.


( ) (. d ra g s to p
).

581
III. jQuery Ul

: u i . p o s i t i o n .
to p u i . p o s i t i o n . l e f t .
u i . o f f s e t
to p l e f t .
. u i . p o s i t i o n n u i .
o f f s e t ,
- ,
CSS p o s i t i o n a b s o lu t e r e l a t i v e .
u i . o f f s e t . t o p ,

. u i . o f f s e t . l e f t ,

.
u i . o r ig in a lP o s it io n to p
l e f t , u i . p o s i t i o n u i . o f f s e t.
u i . o r i g i n a l P o s i t i o n
, ,
, . u i .
p o s itio n , u i . o r i g i n a l P o s i t i o n
.

d ra g

d ra g
. ,
. ,
,
.
,
, . d ra g
, .

d ra g ,
s t a r t , , e v e n t u i.
,
. ,
span
l e f t to p .
:

582
12. jQuery Ul

$ ( f t r a c e C a r 1) . d r a g g a b l e ({
d ra g : f u n c tio n (e v e n t, u i) {
$ ( 1# l e f t 1) . t e x t ( u i . p o s i t i o n . l e f t ) ; $ ( ' # to p 1) ^
. te x t( u i.p o s itio n . to p );
}
}) ;

s to p

s to p Draggable ,
s t a r t , , ,
.
,
( ).
,
. ,
(
s t a r t ) , (
d rag ), (
s to p ),
, .

s to p , s t a r t .
, ,
.

:

$ ( 1# p h o to 1) . d r a g g a b l e ({
s to p : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . c s s ( 1tr a n s f o r m 1, 1s c a l e (1) 1) ;
}
} );

Droppable
Draggable
, (
, ). Droppable,

583
III. jQuery Ul

,
.

,

, . ,
, ,

, .

Droppable

Droppable
Draggable. Droppable
. ,
Droppable
.
. , ,
- , ,
,
, .
Droppable d iv ,
, .

Droppable :
1. ,
jQuery UI - ,
CSS JavaScript.
, jQuery UI CSS
JavaScript, JavaScript- j Query UI
JavaScript- j Query.
2. $ (document) . ready ()
JavaScript-:
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
} ); I I re a d y

j Query 5, ,
JavaScript-

584
12. jQuery Ul

HTML.
JavaScript
</body>.
$ (docum ent) . r e a d y ().
Droppable ,
,
, , .
3. jQuery,
Draggable:
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$ ( 1#dialog1).d ra gg abl e();

} ); / / re a d y
,
.
p ro d u c t,
.
4. jQuery,
Droppable:
$ ( 1. p r o d u c t 1) . d r a g g a b l e ( ) ;
$ ( 1# c a r t ') . d r o p p a b le ( ) ;
} ); / / re a d y
c a r t
. .
, -
, ,
. , ,
d ro p p a b le ().
5. dropp able ():
$ (d o c u m e n t). r e a d y ( f u n c t i o n () {
$ ( 1. p r o d u c t 1) . d r a g g a b l e ( ) ;
$ ( 1# c a r t 1) . d r o p p a b le ({
a c tiv e C la s s : 'h i g h l i g h t 1,
d ro p : f u n c tio n ( e v e n t,u i) {

585
III. jQuery Ul

a l e r t (' ');
}
}) ;
} ); / / re a d y

,
, . -
, a c ti v e C la s s jQuery UI
h i g h l i g h t , .
CSS
. CSS
.
, drop, .

.
.

Droppable

Draggable, Droppable
( Droppable
, , ,
):
a c c e p t. ,
Droppable.
.
. ,
p h o to ,
,
:
a c c e p t : '. p h o t o '
a c tiv e C la s s .
. ,
,
, , . .
,
. Droppable,
Draggable.
586
12. jQuery Ul

, , -
(,
,
). ( ) ,
j Query UI
:
activeClass : 'highlight1

d is a b le d . ,
.
true, .

. ,
, ,
5 .
, ,
(
drop, , ,
):
$ ( 1#dropZone1).dropp abl e({
disabled : true
}) ;
, , ,
, disabled.
, , ,
Droppable.
, -
Droppable. , ,
.
,
,
.
h o v e rC la s s . ,

(. 12.3). ,
,
:
hoverClass : 1openTrashcan'

587
III. jQuery Ul

. 12.3. h o v e r C la s s Droppable,
,
. -,
(
CSS). , ,
,
CSS-,

scope.
Draggable (.
Draggable ).
Draggable Droppable.
scope : 'c a l e n d a r 1
'c a l e n d a r '
. ,
Draggable
Droppable.
to le r a n c e . ,
,
:
' f i t '
;
1i n t e r s e c t '
50% .
,
.
Droppable;

588
12. jQuery Ul

1p o i n t e r 1
;
1t o u c h 1
.

f f i t f ,

, ,
.
' i n t e r s e c t 1,
:

to le ra n c e : 'i n t e r s e c t '


, Droppable
: api.jqueryui.com /droppable/.

Droppable

Droppable ,
,
, . ,
,
,
, .

Droppable ,

. ,

,
. ,
:
,
.
drop.

,
.

589
III. jQuery Ul

drop

,
.
, , a c c e p t (. ),
scope, (.
Draggable ).

,
Droppable . ,
d iv tr a s h c a n .
d iv d ro p
:

$ ( 1# t r a s h c a n ') . d ro p p a b le ({
drop : f u n c tio n (e v e n t, u i) {
//
}
}) ;
, drop, : e v e n t u i.
e v e n t jQuery (.
5), ,
, .
u i ,
Draggable (. Draggable ).
u i . h e l p e r j Query,
, ,
u i .h e lp e r ,
s t a r t .
u i .h e lp e r ,
,
. , ,
, :
$ ( 1# t r a s h c a n ') . d ro p p a b le ({
drop : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . h i d e ( f e x p lo d e 1);
}
}) ;
590
12. jQuery Ul

1e x p lo d e f
jQuery UI,
.
u i . dra g g a b le j Query,
, d ra g g a b le ().

u i . h e lp e r . h e lp e r
(. Draggable )
'c l o n e 1,
, .

. , ,
.
,
, 10. ,
.
, d ro p u i . d ra g g a b le ,
(
Ajax ( 13)
).
u i . p o s i t i o n
,
. ,
s t a r t .
u i . o f f s e t

. u i . o f f s e t ,
s t a r t .
u i .o r i g i n a l P o s i t i o n
,
.
u i . o r i g i n a l P o s i t i o n ,
s t a r t .

, ,
drop. ,
, ,
.
. , , ,
591
III. jQuery Ul

. ,
, , .

:

$ ( 1. s q u a re 1) . d r o p ({
drop : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . d ra g g a b le ({
d is a b l e d : t r u e
}) ;
}
}) ;
h e lp e r u i ( ,
),
d ra g g a b le (), ,
d is a b l e d tr u e . ,
d is a b l e d (.
Draggable ), .
,
d is a b l e d f a l s e (.
Draggable ).

a c t i v a t e
,
(.
Droppable a c c e p t scope),
a c t i v a t e .
. , -,

d iv , ,
.
,
.
a c t i v a t e ,
.
, d iv
photoZ one,
:

592
12. jQuery Ul

$ ( ' # p h o to Z o n e 1) . d r o p p a b le ({
a c t i v a t e : f u n c tio n (e v e n t, u i) {
$ ( t h i s ) . append ( 1<p id=f,dropMessage">BpocbTe
</>?);
}
}) ;
$ ( t h i s ) (
t h i s $ ( t h i s ) 4,
, $ ( th i s ) ).
append () HTML-
(.
4). drop, a c t i v a t e
: e v e n t u i (. drop ).

d e a c t i v a t e
d e a c t i v a t e
a c t i v a t e . ,
, , .
, ,
a c t i v a t e . ,
,
, ,
:
$ ( ' #photoZ one ?) . d r o p p a b le ({
a c t i v a t e : f u n c tio n (e v e n t, u i) {
$(this) .append (1<p id="dropMessage">BpocbTe -1
</>1);
},
d e a c t i v a t e : f u n c tio n (e v e n t, u i) {
$ ( 1# d ro p M essag e1) . re m o v e ( ) ;
}
}) ;

o v e r

,
. o v e r ,
593
III. jQuery Ul


, . ,
, , ,
,
: , .
!
, ,
,
. ,
, .
drop,
,
.

o v e r ,
Droppable
over:

$ ( 1# t r a s h c a n 1) . d ro p p a b le ({
o v e r : f u n c tio n (e v e n t, u i) {
$ (' #trashC anIm age 1) . a t t r (' s r c 1, <-J
1im a g e s /o p e n - lid - c a n .p n g 1) ;
}
}) ;

,
( ) .


tolerance (. Droppable
) , jQuery Ul ,
,
.

o u t

,
. ,
, .
594
12. jQuery Ul

, ,
, . o u t
:

$ ( 1# s h o p p in g C a rtf ) . d r o p p a b le ({
d ro p : f u n c tio n (e v e n t, u i) {
/ / ,
},
o u t : f u n c tio n (e v e n t, u i) {
/ /
}
}) ;
,
, .
, o u t drop, d e a c t i v a t e
a c t i v a t e .

Drag-and-Drop

Draggable Droppable.
--,
.
,
(. 12.4).



JavaScript 1
.

1. 12_02.html
12.
CSS
JavaScript, $ (docum ent) . re a d y () (.
j Query 5).
595
III. jQuery Ul

,
(. . 12.4).
HTML-
:
<img src=" . ./_images/trashcan-empty-icon.p n g -1
id="trashcan">
<div id="photosn>
<img src=". ./_images/small/slidel_h.jpglf>
<img src=" . ./_images/small/slide2_h.jpgfl>
<img src="../_images/small/slide3_h.jpg">
<img src="../_images/small/slide4_h.jpg">
<img src="../_images/small/slide5_h.jpg">
<img src="../_images/small/siide6_h.jpg">
</div>

. 12.4.
.
,

tr a s h c a n ,
d iv
p h o to s. .
596
12. jQuery Ul

2. $ (document) .ready ()
, :
$ (d o c u m e n t). r e a d y (f u n c t i o n () {
$(1#photos img1).draggable();
} ); / / re a d y
img d iv
p h o to s .
,
,
,
, - .
3. draggable ()
revert 1invalid1:
$ ( ' # p h o to s im g1) . d r a g g a b l e ({
revert : 'invalid1
} );
r e v e r t (. Draggable
)
. ' i n v a l i d ' ,
:
( r e v e r t ) , ( ' i n v a l i d ' ).
?
, Droppable.
Droppable,
,
.
4. .
.
.
,
JavaScript (.
1).
Draggable,

. ,
CSS.
597
III. jQuery Ul

5. in v a l id ,
, Enter
s t a r t :
$ ( 1# p h o to s im g') . d r a g g a b l e ({
r e v e r t : ' i n v a l i d 1,
s t a r t : fu n c tio n (e v e n t, u i) {
}
}) ;
s t a r t
. ,
, j Query- c l i c k ()
m ouseover () (. :
j Query 5). s t a r t
. ,
j Query UI, , -
. ,
.
CSS j Query- c s s () (.
CSS 4).

6.
( ):

$ ( ' # p h o to s im g') . d ra g g a b le ({
r e v e r t : ' i n v a l i d ',
s ta rt : f u n c tio n (e v e n t, u i) {

u i .h e lp e r . c s s (' transform ' , ' r o ta te (5deg) s c a le ( 1 . 5 ) ' ) ;


}
}) ;
s t a r t ,
, Draggable,
: e v e n t ,
u i. u i,

. u i . h e l p e r (. s t a r t -

598
12. jQuery Ul

) ,
,
j Query, j Query-
. c s s ()
CSS, 1,5 .
,
. ,
,
.


CSS :
w w w .s ite p o in t.co m /css3 -tra n sfo rm a tio n s-2 d -fu n ctio n s/.

7. stop:
$ ( 1# p h o to s im g 1) . d r a g g a b l e ({
r e v e r t : ' i n v a l i d 1,
s ta rt : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . c s s ( ' tr a n s f o r m ', ' ro ta te (5 d e g ) s c a l e (1.5) ') ;
},
s to p : fu n c tio n (e v e n t, u i) {
u i .h e l p e r . c s s ( ' transform ' , ' rotate(O d eg) s c a l e ( 1 ) ' ) ;
}
}) ;
He s t a r t .
CSS,
,
.
, :
, ,
- , (. 12.5).
. 12.5.
, z -in d e x
.

599
III. jQuery Ul

8. z In d e x .
$ (1tphotos i m g 1) .drag ga ble ({
revert : 'invalid1,
start : function (event, ui) {
ui.helper.c s s ('transform1, 'rotate(5deg) scale(1.5)');
},
stop : function (event, ui) {
ui.helper.css('transform', 'rotate(Odeg) s c a l e (1)');
},
z In d e x : 100
}) ;
He sto p . z In d e x
(. Draggable )
CSS z -in d e x
. z -in d e x ,
. 100 ,
,
.

. 1 2 .5 . z - i n d e x .
, HTML
. img
( ) HTML-
img,
(. HTML- 1 ). ,
,

9. .
.

,
. ,

, .

600
12. jQuery Ul

.
.

10. d ra g g a b le ()
:
$ (1ttrashcan1) .drop pa ble ();


Droppable. ,
, .

,
.
,
,
.
, ,
.

11. droppable ():


$ (1ttrashcan1) .dropp abl e({

a c t iv e C la s s : ' h i g h l i g h t 1
}> ;
activeClass(cM. Droppable
) Droppable ,

. highlight,
interactions.css, opacity
1 ( ).
CSS 60%
( 0,6) .
0,6 1 CSS,
.

,
, ,
.
drop Droppable.

601
III. jQuery Ul

12.
1h i g h l i g h t 1, Enter
drop :
$ (1#trashcan') .dro pp abl e({
activeClass : 'highlight1,
drop : fu n c tio n (e v e n t, u i) {
}
}) ;
d rop
, s t a r t s to p .
,
, , ,
!

13. drop ,
:
$ (1#trashcan1) .dropp ab le({
activeClass : 'highlight1,
drop : function (event, ui) {
u i . h e l p e r . h i d e ( ' e x p l o d e 1) ;
}
}) ;
u i . h e l p e r
(. s t a r t ). h id e ()
j Query, (.
6).
j Query UI
. e x p lo d e
.
(
j Query UI.)
:
, ,
.
14. drop:
$('#trashcan') .droppable ({
activeClass : 'highlight',

602
12. jQuery Ul

d ro p : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . h id e ( 1e x p lo d e 1) ; $ ( t h is ) . a t t r ( 1s r c 1 ,
1. . / _ im a g e s /t r a s h c a n - f u ll- ic o n .p n g ') ;
}
}) ;
$ ( t h i s )
, img tr a s h c a n .
s r c ,
. ( , ,
7.)
:
$ (d o c u m e n t). r e a d y ( f u n c t i o n () {
$ ( 1# p h o to s im g 1) . d r a g g a b l e ({
re v e rt : " in v a lid " ,
s ta rt : f u n c tio n (e v e n t, u i) {
ui .helper.c s s (1transform1, frotate(5deg) s c a l e (1.5) ') ;

b
s to p : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . c s s ( 1tr a n s f o r m * , 1ro ta te (O d e g ) s c a l e (1) ' ) ;
},
z ln d e x : 100
}) ;
$ ( ' # t r a s h c a n ') . d r o p p a b le ({
a c tiv e C la s s : ' h i g h l i g h t 1,
d ro p : f u n c tio n (e v e n t, u i) {
u i . h e l p e r . h i d e ( ' e x p lo d e ' ) ;
$ ( t h i s ) . a t t r ( ' s r c ' , ' . . /_ im a g e s /tra s h c a n - fu ll-ic o n .p n g ');
}
}) ;
} ); / / re a d y
15. .

, (. . 12.4). -
603
III. jQuery Ul

d ro p
. , Ajax

( Ajax 13).
, ,
Draggable Droppable.



_ 12_02. html.


j Query UI
, , , ,
, .
Sortable ,
. ,
, ,
,
, ,
(. 12.6).
Sortable
.
,
d iv ,
.

Sortable

Sortable ,
: ,
.
, Sortable,
, . ,
Sortable , ,
(u l), ( o l) d iv ,
, , d iv ,
.
604
12. jQuery Ul

. 12.6. jQuery Ul Sortable


. , ,
.
, , Runes,

Sortable :
1. ,
jQuery UI - ,
CSS JavaScript.
, j Query UI CSS
JavaScript, JavaScript- j Query UI
JavaScript- j Query.
2. - -.
div:
<ul i d = ffpla y l is t" >

</ul>

,
j Query.
3. .

l i . , ,
. d iv
605
III. jQuery Ul

, d iv ,
:
<ul i d = " p l a yl i st ">
<li>My Way -- Frank Sinatra</li>
<li>Like a Rolling Stone -- Bob Dylan</li>
<li>Respect -- A retha F ra nklin</li>
</ul>

4. jQuery- $ (document) . ready ()


JavaScript-:
$ (document) .r e a d y (function () {
}); // ready


j Query 5, ,
JavaScript-
HTML.
JavaScript
</body>.
$ (document) . r e a d y ().
5. jQuery -,
2:
$ (document) .r e a d y ( f u n c t i o n () {
$ ( f# p l a y l i s t f ) . s o r t a b l e ( ) ;
}); // ready

- ( <ul>,
3)
. Sortable
, .
6. s o r t a b le ():
$ (document).r e a d y (f u n c t i o n () {
$ ( 1# p l a y l i s t 1) .sortable ({
o p a c ity : 0 . 5 ,
p la c e h o ld e r : 1u i - s t a t e - h i g h l i g h t 1
} );
}); // ready

606
12. jQuery Ul

,
, . -,
o p a c ity j Query UI
. ,
p la c e h o ld e r , jQuery UI
, .


Sortable -
14.

Sortable

j Query UI Sortable .

, ,
, .
j Query UI,
, s o r t a b l e (). ,
, h2
,
:

$ ( 1# p l a y l i s t ) . s o r t a b l e ({
c u r s o r : 'p o i n t e r 1,
h a n d le : fh 2 '
}) ;

:
axis. a x is

. ,
d iv ,
(. . 12.6). ,
. ' '
( ) ' ' (
):
a x is : ' '

607
III. jQuery Ul

c a n c e l.
. ,
( ).
,
,
. ,
.

,
cancel:

cancel : '.trashcan'

,
( , trashcan),
.
, :
cancel : '.trashcan, .addToFavorites'

handle, ,
.
connectW ith.
( ),
. , :
, , ,
, , .
, ,
,

, .
,
sortable (). connectWith

:
$('#wishList') .sortable ({

connectWith : '#shoppingCart'

}) ;
connectWith .
,
, .
608
12. jQuery Ul

c o n n e c tw ith
:
$ ( 1tshoppingCart1) .sortable ({

connectwith : f#wishListf

}) ;
, c o n n e c tw ith ,
, ,
s o r t a b l e ().
containm ent.
-.
Draggable (.
Draggable ).

, .
c o n ta in m e n t :
. , j Query UI
.
, div
inContent,
div, containment
:
containment : 1#mainContent1

p a ren t, document window.


,
parent. , ,

, :
containment : 'parent1

docum ent window ,


, docum ent
, window
(
, ,
window).
cu rsor. cursor
(. Draggable ).
609
III. jQuery Ul

cursor At. curs or At


(. Draggable
).
delay.
( ).
, ,
.
,
,
:
delay : 100

distance. ,
.
,
, .
,
, distance,
,
.

(
,
):
distance : 10

grid. .
,
div: ,
,
.

Draggable (. Draggable
).
handle. ,
, .
, ,
.
,
, , .
610
12. jQuery Ul

Draggable (.
Draggable ).
items. ,
. ,
sortable () , ,
(. 12.7). ,
( . 12.7
). ,
,

.
items
1li li 1,
, (
).
, :
items : fli l i 1

opacity.
. ,
50% , .

, .
0 ( ) 1 (
). CSS
opacity. ,
50% , 0.5:
opacity : 0.5

placeholder. , jQuery UI
, .
j Query UI
(. jQuery UI ),
:
pl a c e ho ld er : 'ui-state-highlight'


Sortable
: a pi.jqu e ryu i.co m /sorta b le /.

611
III. jQuery Ul

. 12.7. (
) HTML
( u l ) ( o l ) : <1.>
A < u l > < l i > n o f l c n M c o K < / l i x / u l x / l i > . jQuery Ul
, Sortable
, ,

Sortable


jQuery UI , ,

. j Query UI
Sortable,
.
,
.
Draggable Droppable,
Sortable ,
sortable (). ,

:
$ (1#playList1) .sortable ({
stop : function (event, ui) {
a l e r t (' , ! 1);

}) ;
612
12. jQuery Ul

,
, ( )
,
. , ,
.
,
:
create. ,
s o r t a b l e () .

: ,
.
Sortable.


Sortable, create
ui (. create
).

start. ,
. , ,
: e v e n t (.
5) u i,
. u i ,
.
ui.helper. h e lp e r jQuery,
, .
j Query UI ,

HTML-: ,
.
. h e lp e r
j Query,
jQuery, c s s (),a n im a te () f in d ().
u i .item. ,
, , ,
l i . HTML-,
,
.

613
III. jQuery Ul

j Query,
.
u i . p o s it io n
(,
)
. Sortable
,
u i . p o s i t i o n
.
,
: u i . p o s i t i o n . to p u i . p o s i t i o n . l e f t .
u i . o r ig in a lP o s it io n .
, , ,
. , u i . p o s i t i o n ,
: to p l e f t .
u i . o f f s e t : to p l e f t .

. u i . o f f s e t . t o p ,

.
u i . o f f s e t . l e f t ,
.
u i . sender.
.
u i . s e n d e r jQuery ,
.
p la c e h o ld e r . j Query,
, .
u i
Sortable a c t i v a t e , over, s o r t . ., c r e a te .
a c t iv a t e . s t a r t ,
.
, ,
, s t a r t .
so r t. s o r t
.

614
12. jQuery Ul

, ,
,
.
, ,

.
change. ,
.
,
, change.
, ,
, .
b e fo r e sto p . b e f o r e s t o p
.
, u i . h e lp e r .
u i . h e l p e r (
) .
update.
DOM u p d a te .
d e a c tiv a te . , u p d a te
d e a c t i v a t e .
stop .
, sto p .
s to p d e a c tiv a te .
, ,
, ,
. ,
s to p , ,
(. . 12.7).
,
. ,
Sortable.
out. o u t ,
Sortable, ,
Sortable
.
.

615
III. jQuery Ul

over.
. ,
, ,
over.
,
, .
r e c e iv e . receive
(.
connectWith Sortable
). Sortable ,
receive.
u i .sender (. ), ,
.
remove. ,
. , :
.
,
remove ( o u t). (
o v e r r e c e iv e .)

Sortable

Sortable
, .
, j Query-, ,
: $ ( 1b o d y 1) . hide ().
sortable ()
. , destroy,
Sortable
, .
destroy :

$ (1#sortableItems1) .so rtable(1d es tr oy1);

, #sortableItems,
Sortable.

Sortable, .
, ,
,

616
12. jQuery Ul

, ,
.
,
Sortable : api.jqueryui.com/sortable/,
:
c a n c e l.
. , -
.
r e c e iv e (. ),
, Sortable. ,
s to p (. ) ,

,
. ,
, .
,
, ,

.
d e str o y .
, d e s tr o y .
d is a b le .
d is a b l e . ,
.
, e n a b le
( ).
en ab le. ,
d is a b l e .
s e r i a l i z e .
-
Ajax .

. ,
,
,
, , ,
( ) .
:
617
III. jQuery Ul

.
,
,
(_).
_
.
, . HTML-
:
<ul id="playlist11>
<li id=Msong_l">My Way -- Frank Sinatra</li>
<li id="song_2fl>Like a Rolling Stone -- Bob Dylan</li>
<li id="song_3ff>Respect -- Aretha Franklin</li> </ul>

,
"song_"
. ,
. ,

.
serialize
:
var listOrder = $("#playlist") .sortable ('serialize ');

serialize ,
:
s o n g []= 2 & s o n g []= 3 & s o n g []=1

.
2, 3 1 ,
. ,
serialize URL-, Ajax
( 13).


s e r ia liz e ,
, .
: a pi.jq u e ryu i.co m /
sortable/#m ethod-serialize.

618
12. jQuery Ul

to A rra y . serialize, toArray



Sortable.
,
.
serialize, -
.
Sortable
.
, Sortable colorList.
:
<ul id="colorList11>
<li id="red">KpacHbiPi</li>
<li id=greenfl>3ee</li>
<li id="blue"> < / >
</ul>

, ,
, ,
. toArray
:

var colors = $('#colorList1).sortable('toArray') ;

colors :

[fb l u e f, fr e d f, !g r e e n T]

JavaScript (.
2). ,
, .

toArray , ,

. , ,
.

.
stop (. ),
toArray
, (. 12.8).

619
III. jQuery Ul


jQuery Ul .
Resizable Dialog (.
9),
,
.
.
: a pi.jqueryui.com /resizable/.

. 12.8. t o A r r a y Sortable
,
.
.

. , .
.htm l 12


Selectable (
), .
,
.
: a pi.jqu e ryu i.co m /selecta ble/.

jQuery Ul
j Query UI
, -.
, ,

620
12. jQuery Ul

Drag-and-Drop ,
.
, , .

, ,
, , .
j Query-,
, j Query U I e f f e c t ( ) . ,
drop jQuery UI,
, show ()
:
$ ( #pageElement1) .s h o w (1drop 1, 1000);

1
(1000 ). show () (.
6). j Query-,
. j Query
UI j Query- show (),
j Query-. j Query UI
:
show () . jQuery UI show ( ) ,
15
. ,
(. hide ()
6), show ().
, , .
h id e () . j Query UI
, hide ().
j Query- (.
6), ,
.
, , .
to g g le () . toggle () .
, toggle ()
. ,
toggle () .
e f f e c t () . jQuery UI

. , , bounce, highlight, pulsate

621
III. jQuery Ul

shake
, . highlight, ,
,

. ef fect () j Query
UI j Query.


e f f e c t () -,
14.

j Query UI
-.

.
.
:

$ (1#element1) .hide (1ef fectName 1, { optionName : -1


optionValue }, duration, callBackFunction);

,
deleteThis, 16
,
!, :
$ ( 1#deleteThis 1). hide (1explode 1, { pieces : 16 }, -*
500, function () {
a l e r t (1 ! 1);
}) ;

,
.
, .
,
explode:
{ pieces : 16 }

622
12. jQuery Ul

,
. j Query UI
:
b lin d . b l i n d ,
.
d i r e c t i o n ,
: up (), down (), l e f t () r i g h t ().
,
. ,
,
:
$ ( 1# element1) .hide (fb l i n d 1, { direction : l ef t1},*-1
1000 );

bounce. bounce
. bounce
e f f e c t (),
, : !!!
:
d is ta n c e . ( ),
. ,
.
tim es. , .
, 20
100 ,
:
$ ( 1# th e E le m e n t *) . c l i c k (f u n c tio n () {
$ ( t h i s ) . e f f e c t ( 1bounce 1, {
d is ta n c e : 100,
tim e s : 20
b
1000
);
}> ;
c lip . c l i p CSS c l i p ,
. -
623
III. jQuery Ul

d i r e c t i o n v e r t i c a l
h o r iz o n ta l:
{ d ire c tio n : 'h o r i z o n t a l 1 }
drop. d rop ,
, , .
d i r e c t i o n ,
: up, down, l e f t r i g h t .
explode. e x p lo d e
, .
show ()
,
.
p ie c e s , ,
.
: 1, 4, 9, 16, 25 . . (
25, ):
{ p ie c e s : 16- }
fade. j Query f a d e ln () fad eO u t ().
, .
fo ld . f o ld ,
.
. s i z e (
),
. h o r i z F i r s t ,
,
( ) :
{ s iz e : '5 0 % ', h o r i z F i r s t : t r u e }
h ig h lig h t . h i g h l i g h t
, . ,
,
. c o lo r.
, , 1
, e f f e e t ()
:
$ ( ' #element' ) . e f f e c t ( ' h i g h l i g h t ', { c o lo r :
' # f f 0 0 0 0 ' }, 1000);

624
12. jQuery Ul

p u ff.
( ).
p e r c e n t,
:
{ p e r c e n t : 200 }
p u ls a te . , ,
, .
. ,
, tim es:
$ ( 1# e l e m e n t 1) . e f f e c t ( 1p u l s a t e 1, {ti mes : 20}, 2000);
s c a le . .
h id e () show ().
, show (),
,
.
, h id e (),
.
shake. ,
, e f f e e t () (
).

. ,
, ,
, :
,
.
. d i r e c t i o n
, : up, down,
l e f t r i g h t . d i s t a n c e ,
, .
, . ,
tim e s , . ,
10 , 50
( ),
e f f e e t () ,
:
{ direction : f l e f t f , d i s t a n c e : 50, tim e s : 10 }

625
ill. jQuery Ul

s iz e .
. : to
wi dt h h e i g h t ,
.
o r i g i n
s i z e . ,
: top, l e f t .
s c a l e ,
. b o th , box
c o n t e n t . ,
(, , )
box. (, )
.
s l i d e .
( ) ( ).
d i r e c t i o n l e f t , r i g h t , up down,
:
$ ( 1# e l e m e n t ' ) . show ( 1s l i d e 1, { d i r e c t i o n : r i g h t 1 } , -1
1000 );


jQueryUI, :
api.jq u eryui. co m /ca te g o ry/e ffe cts/.

e a s i n g

jQuery UI e a s i n g ,
.
e a s i n g ,
, . ,
bounce,
e as i ng,
.


jQuery Ul Easings,
easing: api.jqueryui.com /easings/.

626
12. jQuery Ul

easing
options.
easing,
easelnOutQuart, easelnSine . . (
easing api.jqueryui.com/easings/).
, bounce (
), ,
. , 20
100 (
bounce). , e a s i n g
,
.
e a s i n g o p t i o n s :

$ ( 1#theElement1).click(function () {
$ (this) .effect(bounce*, {
distance : 100,
times : 20,
easing : *easeOutBounce1
},
1000
);
}) ;
e a s i n g
jQuery UI.
6,
j Query U I.

j Query UI ,
CSS
.
jQuery-: addClass (), toggleClass ()
removeClass () (.
4). j Query UI ,
j Query UI
, - CSS.
627
III. jQuery Ul


jQuery Ul
CSS. :
CSS
CSS, jQuery JavaScript.
CSS ,
-
JavaScript. CSS
Internet Explorer 9 ,

jQuery Ul,
.
Internet Explorer, CSS
jQuery Ul. CSS,
: developer.m ozilla.org/en-U S /docs/W eb/G uide/C S S / Using_
C S S jtransitions.

j Query UI
, .
,
. , easing
. ,
effect () (. jQuery UI
). , feature,
highlight ,
,
:

$ ('#feature 1) .addClass (1highlight1, 1000, -1


1easeOutBack1, function () {
a l e r t (1 1);
}) ;
highlight

1 (1000 ), easeOutBack (
). j Query UI
, ,
.

.
628
12. jQuery Ul

j Query UI
:
addC lass ()

.


,
, - , jQuery Ul
jQuery- .
:
$ (1#feature') .addClass(1highlight1);
highlight,
.

em oveClass ( ) , a d dCl as s ().


, ,
e a s i n g
.
,
.
to g g le C la s s () , ,
, .
c l i c k (.
5),
, .
, -,
, . ,
, .


toggleClass () jQuery Ul
. :
api .jqueryui.com /toggleC lass/.

sw itc h C la ss () jQuery
UI, j Query.
: , j Query UI -

629
III. jQuery Ul

, ,
j Query UI.
removeClass () addClass (),
. ,
,
j Query UI
:
$ (1#feature ') .switchClass (1defaultStyles 1, <-J
'highlight1,1000);


jQueryUI ,
Effects Core : a p i.jq u e ryu i.co m /ca te g o ry/e ffe cts-co re /.
IV

JQUERY
JAVASCRIPT

13. Ajax

14.

13
AJAX

JavaScript , .
,

HTML-, -.
-. ,

.

, -
. ,
. , Facebook, Twitter, Google Docs
Gmail,
. ,
-, Ajax.

Ajax -
-,
.
. , Google Maps (. 13.1)
,
, .

Ajax
Ajax 2005 .
, Google: Google Maps
(maps.google.com), Gmail (www.gmail.com). Ajax
Asynchronous JavaScript XML ( JavaScript XML).
Ajax HTML, JavaScript
CSS.
JavaScript, -

.
632
13. Ajax

. 13.1. Google Maps (maps.google.com)


, Ajax
. ,
, ( ,
)

,
JavaScript -,
. JavaScript
- . , Google
Maps , ,
JavaScript
Google. Google ,
.

, ,
Google Maps, ,
Ajax:
HTML-
. , ,
, ,
, .
,
.
, .
633
IV. jQuery JavaScript

. ,
.
,
. ,
Ajax, .
.
JavaScript
. , Login
, ,
, , , ,
.
. ,
(
),
.
, .
Ajax

: , ,
. j Query,
: www.wbotelhos.com/raty/.
. Ozon.ru
,
. , ,
JavaScript, JavaScript,
. ,
,
, 10 .
Ajax
.
Ajax Twitter:
,
. ,
.
. , .
,


HTML- (,

634
13. Ajax

).
Ajax -
.

Ajax:
,
Ajax, . JavaScript,
, .
,
. . 13.2 ,
- HTML-,
, Ajax.

Ajax ,
,
. , Ajax
.
, -
JavaScript. ,

Ajax , XMLHttpRequest.
,
JavaScript -
.
XMLHttpRequest Internet
Explorer 5
. .
JavaScript Ajax:
-, , ( )
,
. ,
, JavaScript
,
( ,
).

635
IV. jQuery JavaScript

JavaScript ,
,
.

. 13.2. - ()
-.
-.
Ajax .
,
JavaScript - ()

, JavaScript
, ,
, . -

636
13. Ajax

(
, DOM,
(DOM) 4) ,
HTML- . , ,
, :
JavaScript.
-
. HTML-
, XML (.
XML ) JSON
(. JSON ). ,
,
, ,
. JavaScript
10 , -
10 .


. ,
-, . -
:
. ,
,
.
, Java, #, Ruby Cold Fusion
Markup ,
HTML- ( ,
Ozon
). ,
,
.
MySQL, PostgreSQL SQL Server.


,
.
, -
,
(
).

637
IV. jQuery JavaScript

-,
. ,
- Microsoft IIS ASP.NET ( ) SQL Server
( ). : Apache (-),
( ) MySQL ( ).


Apache,
MySQL ( ). ,
.
(.
).


-
Ajax -.
JavaScript .
( ) ,
,
-, ,
Ajax.
, Ajax
-. ,
:

FTP , ,
.
,
- ,
Ajax- .
,
,
,
.
Windows
Apache, MySQL
WAMP (w w w .w am pserver.com /ru/),
, ,
.

638
13. Ajax

OS X
(w w w .m am p.info/en),
, Apache, PHP
MySQL. (
Windows.)
-.
, -
.
, - (, IIS
Microsoft), , ,
, Ajax
. IIS Windows 8,
. , ,
: www.youtube.com /watch?v=m Rm 9-Xddt2w.

Ajax XMLHttpReques t,
XHR.
JavaScript
- .
, JavaScript.
1. XMLHttpReques t.
: ,
, .
XMLHttpRequest JavaScript
:
var newXHR = new XMLHttpRequest();

,
Ajax JavaScript
. , j Query
Ajax.
.
2. XHR- open ()
, .
: GET POST,
, HTML-. GET
- URL-,

639
IV. jQuery JavaScript

, shop .php?productID=34.
,
, ? (
product ID=3 4). /, product ID
, 34 . ,
, .
POST URL-.
GET ,
POST (,
, ).
get () post ()
.
open ()
, . ,
(, )

; URL-. ,
XHR,
(GET) :
newXHR.open(1GET 1, 1s h o p .php?productID=341);


URL-, open (),
, , .
Ajax-
. JSONP
.
JSONP .

3. .
- (
,
), - .
.
.
JavaScript
( ),
.

640
13. Ajax

, (
DOM) (, ,
Ajax), (
HTML-
) (,
,
).
, ,
j Query , ,
, ,
JavaScript .
4. .
XHR
s en d (). , ,
, : ...
!. GET,
:
x h r . s e n d ();
s en d () ,
. GET
URL-, , s e a r c h . p h p ? q = j a v a s c r i p t ,
q=j a v a s c r i p t . POST,
send ():
x h r . s e n d ( 1q= j a v a s c r i p t 1);
, , ,
j Query , .
, JavaScript
. Ajax, ,
, ,
JavaScript - .
, .
5. .
, .
, 3,
, XHR ,
, , , XML.

641
IV. jQuery JavaScript

, :
, , 404, ,
. , 200 ,
, 304.
500 ,
, 403:
. :
www.w3.org/Protocols/rfc2616/rfc2616-secl0.html.

,
XHR responseText. HTML-
, JSON
(. JSON ). ,
XML-, XHR
responseText. XML - ,

, HTML- JSON-, , ,
XML-.

,
-.
Ajax
( Ajax- ).

Ajax jQuery
, XMLHttpRequest
, XHR
. , j Query ,
. ,
, , , -
,
, 3.
j Query,
.

load ()

Ajax, j Query,
load (). HTML-

642
13. Ajax

. ,
.
. ,
,
: , ,
. . ,
, ( Ajax !),
-


.
, ,
, HTML- ,
,
(. 13.3).



jQuery- l o a d ( ) (
) HTML- -
,
Ajax. Ajax
, JavaScript
.
,
, JavaScript,
,
.

, ,
PHP, Ruby on Rails, .NET JSP ( ,
).
, (
). ,
- .
.

, :
- , MySQL JavaScript (
) MySQL ( ).

643
IV. jQuery JavaScript

. 13.3.
HTML-.
(), ().
Ajax jQuery- lo a d ()
HTML-, ().
HTML- d i v ( )

644
13. Ajax

-
. , 101 Zend,
, ,
(devzone.zend.com /6/php-101-
p h p -fo r-th e -a b so lu te -b e g in n e r/). W3Schools

(w w w .w 3schools.com /P H P ).

l o a d ( ) ,
j Query ,
HTML-;
l o a d () URL- ,
. , d iv h e a d l i n e s
HTML todays_news.html
. :

$ ( 1# h e a d l i n e s ' ) . l o a d ( 1t o d a y s _ n e w s . h t m l 1);

todays news,
html -.
d iv h e a d l i n e s
. HTML- -
( html, head body) ,
, h i
. HTML-
() .


HTML- . ,
Google
div load ().

l o a d ()
. -, URL-,
l o a d (), .
, ,
HTML-, .
, HTML-
HTML ,
, URL- ,
l o a d (). ,
645
IV. jQuery JavaScript

(. URL- 1),
HTML- ,

HTML- . :
, ,
, ,
l o a d ().

, l o a d ( ) ,
HTML- . ,
:
, ,
. ,
, d iv .
, j Query URL-.
d iv
news todays_news.html
:

$ ( 1h e a d l i n e s 1) . l o a d ( 1t o d a y s _ n e w s . ht ml #n e ws 1) ;

todays_news.html,
d iv
h e a d l i n e s , d iv ( , )
news.
.

load ()

j Query
( ) HTML- (. 13.3
) ,
HTML- (. 13.3 ).

, ,
HTML- ,
Ajax-. . 13.4:
,
, .
646
13. Ajax

u l, ,
n e ws l i n k s . , d iv
. h e a d l i n e s
.
j Query- l o a d ()
d iv .

. 13.4. JavaScript
, d i v
. , d iv
. ,
d i v (< d iv i d = " h e a d l i n e s M>) .
Ajax d i v
,

-
. ,
HTML ,
. , JavaScript,
, . ,
JavaScript.
,
647
IV. jQuery JavaScript

JavaScript,
.


load ()
-,
(.
).
Safari OS X
load () -.

JavaScript,
. ,
, .



JavaScript 1
.


JavaScript ,
URL- ,
d iv .
.
1. 13_01.html -
13.
c l i c k
.
( u l) n e ws l i n k s ,
j Query
c l i c k ().
j Query
s c r i p t $ (document) . r e a d y ().
2. $ (document) .
ready () :
648
13. Ajax

$ ( 1# n e w s l i n k s 1) . c l i c k (f u n c t i o n () {
}) ;
$ ( 1# n e w s l i n k s a 1) ,
j Query, . c l i c k ()
( ) c l i c k (
. :
j Query 5).
URL- .
3. c l i c k () ( 2)
v ar u r l = $ ( t h i s ) . a t t r ( 1h r e f 1) ; Enter
.
( u r l )
h r e f .
j Query 4, (
c l i c k () ) jQuery ($ ( 1# n e w s l i n k s 1)
) ( )
. $ (t h i s )
. ,
$ ( t h i s )
. a t t () (
, HTML
4)
; h r e f
URL- , .
URL- l o a d ()
d iv
.
4. $ ( 1# h e a d lin e s 1) . lo a d (url) ; ,
:
$ ( 1# n e w s l i n k s 1) . c l i c k (f u n c t i o n () {
v a r u r l = $ ( t h i s ) . a t t r ( fh r e f f );
$ ( 1# h e a d l i n e s 1) . l o a d ( u r l ) ;
}) ;
, d iv (
HTML-) h e a d l i n e s ,
$ ( 1# h e a d l i n e s 1) d iv .

649
IV. jQuery JavaScript

l o a d () HTML-,
URL-, ,
d iv . , ,
, j Query
.
.
, ,
,
! Ajax? , -

. ,
.
5. ,
, retu r n f a l s e ;. ,
:
$ ( 1# n e ws l i n k s 1) . c l i c k ( f u n c t i o n () {
v a r u r l = $ ( t h i s ) . a t t r ( 1h r e f 1);
$ ( 1# h e a d l i n e s 1) . l o a d ( u r l ) ;
retu rn f a l s e ;
}) ;
: , ,
.
.
j Query-
p r e v e n t D e f a u l t (),
5.
6. .
-,
. - .
, . 13.5.
l o a d () , .
l o a d () d iv .
, JavaScript j Query
.
. ,
l o a d () .
650
13. Ajax

. 13.5. jQuery lo a d () HTML-


.
HTML
, ,
.
.
,

7. l o a d ( ) + 1
#n ew sItem s1 u r l.
:
$ (1#newslinks 1) .c l i c k (function() {
var url=$ (this) .attr (1href 1);
$ ( 1#headlines1).load(url + 1 #newsIterns');
return false;
}) ;
,
, load ()
URL-,
,
.
: -,
div news Items.
651
IV. jQuery JavaScript

HTML- .
l o a d ()
HTML-
#newslterns URL-,
l o a d (). , today.html
h e a d l i n e s HTML-,
news Items, :
$ ( 1# h e a d l i n e s 1) . l o a d ( 1t o d a y . h t m l # n e w s l t e m s 1);

u r l 1#newsIt ems 1
,
JavaScript ( +): l o a d ( u r l + 1 #newsl t ems 1). (.
2 ,
.)
8. .
-,
. .

. Ajax
! ( _13_01.html
13.)

g e t () p o s t

l o a d (), ,
HTML- -
.
HTML- ,
, JavaScript.
, Ajax
, XML-,
(. XML-
), JSON (. JSON
).
HTML-.

J Query- g e t () p o s t ()
-.
2 -,

652
13. Ajax

XMLHttpRequest GET POST


. j Query ,
get () post () . (
? GET POST?)

:
$.get(url, data, callback);

:
$.post(url, data, callback);

j Query,
get () post () jQuery,
, , :
$ ( 1#mainContent1) .get ( 1products . php 1).
- ,
$, get post:
$ .get ().

get () post() .
url ,
(, 1processForm.php1). data
, JavaScript, ,
( ,
). , callback
, ,
(.
6 ).

get() post()
URL-.
, ,
.
.

, JavaScript,
Ajax, - .
, ,
, .

653
IV. jQuery JavaScript

XHR,
,
Ajax
-
.

, get () post ().
, ,
JavaScript,
.


:
URL-, ?. ,
URL- http://www.chia-vet.com/products.
php ?pr odl D=18&sessID=1234 :
prodID=18&sessID=1234. /
prodID=18 sessID=1234 ,
, p r odI DH sessID
.
URL-.
, ,
Ajax. , -,
,
.
5. ,
, : rating=5. ,
, , rateMovie .php,
Ajax
GET:
$ . g e t ( 1r a t e M o v i e . p h p 1, 1r a t i n g = 5 1);
POST :

$.p o s t (1rateMovie.php f, 1rating=5 f);


JQuery- get () post ()
.

654
13. Ajax

URL- .
. , $ .get (1rankMovie.
php1, 1rating=51) ; URL- ,
.
,
, - .

GET POST?
- GET POST
. ?
.
. ,
, .
, ,
JavaScript .
,
. ,
GET-, POST-. ,
, ,
, ,
jQuery get () post ().
( )
, JavaScript ,
. GET
,
. , ,
, ,
. POST
, ,
,
.
,
GET ,
POST - .
, POST. ,
,
, , ,
, POST. GET

655
IV. jQuery JavaScript

, (
,
). , -
POST , .

/,
&:

$ . p o s t (1r a t e M o v i e . p h p 1, 1r a t i n g = 5 & u s e r = B o B a 1);

,
.
, & /
; = .
:

1favFood=Mac & C he es e1 //

& Mac & Cheese,


& /.
,
.
, %2 0, & %2 , =
%3D. , :

*favFood=Mac%2 0%2 6%2 0Cheese1 //

JavaScript encode
URIComponent (). endcodeURI Component ()
, . :

var queryString = 'favFood=f + encodeURIComponent -1


(1Mac & Cheese 1);
$ .post(* foodChoice.php', queryString);

(
) .
, j Query get () post (),
.

CSS 4, ( )
656
13. Ajax

JavaScript /.
:

{
namel: ?v a l u e l f,
n a m e 2 : fv a l u e 2 f
}

get () post (). ,
:
$.p o s t (* rankMovie.p h p 1, 1rating=51);

:
$ .post(1rankMovie.php1, { rating: 5 });


get () post (), ,
get () post ():
var data = { rating: 5 };
$ .post(frankMovie.php1, data);

, /-
, get () post ():

var data = {
rating: 5,
user: '1
}
$ . p o s t ( 1ra n k M o v ie .p h p 1, d a t a ) ;

,
$ .post ():

$.p o s t (1rankMovie.p h p 1,
{
rating: 5,
user: ! !
}
); // post

657
IV. jQuery JavaScript

JQuery- serialize ()
/
.
,
,
JavaScript. , j Query
,
, get () post ().
serialize () (
).
j Query, ,
serialize (). ,
login. ,
:
var formData = $ ( 1#login').serialize() ;

var formData ;
$ ( 1# login 1) j Query, ; ,
.serializeO
.
get () post (),
serialize ()
URL-. ,
login login.php.
:
var formData = $( 1#login1).serialize();
$.g e t ('login.p h p 1,formData,1oginResuits);

login.php,
GET. get () loginResults
, ,
, . ,
.

Ajax .
JavaScript , , ,
JavaScript,

658
13. Ajax

. ,
, get () post ().
, .

XML
HttpRequest . ,
. ,
( ) ,
.

, ,
. , ,
. ,
( ),
XML JSON (.
XML JSON ).


, . success
, .
, , ,
,
.
error.


, , -,
, , , ,
request successful.
jQuery html ()
text (),
4. DOM
4.

/,
(. 13.6).
, ,
.
,
,
.
-.

659
IV. jQuery JavaScript

. 13.6.
(). Ajax,
, ,
()

JavaScript,
,
, . ,
() (. . 13.6) :
r a t e .php?rate=5& m ovie=123. ,
, r a t e .php, ?rate=5& m ovie=123
: (r a te = 5 )
, (m ovie=123).
JavaScript
Ajax- :
660
13. Ajax

1 $ ( !#message 1).click(function() {
2 var href=$(this) .attr (1href 1);
3 var querystring=href.slice(href.indexOf(1? 1)+1) ;
4 $.g e t (1rate.php1, querystring, processResponse);
5 return false; //
6 });

1 ( )
message ( ,
,
div message).
.

2 HREF, , ,
h r e f U RL- r a t e , php ? a t =5 &mov i =12 3.
3 ? URL-,
s l i c e () (. s l i c e ()
16) indexO f () (.
: indexO f () 16)
? ( s l i c e ()
).
4 Ajax-. GET,
, ,
rate.php (. 13.7).
processResponse. 5

.



: 3 .

.
( 1success 1,
). ,
(. 4 ).
processResponse.
:

661
IV. jQuery JavaScript

1 function processResponse(data) {
2 var newHTML;
3 newHTML = f<h2>Bani </2>!;
4 newHTML += 1<> -1
1;
5 newHTML += data + '.</>';
6 $ ( 1#message1) .html(newHTML);
7 }

. 13.7.
JavaScript -. g e t () ,
p r o c e s s R e s p o n s e () ,

,
, . ,
HTML, XML JSON. 2
, HTML-,
(, ). 3 4
newHTML HTML-, h2 .
5
( d a ta ) newHTML.

, , 13 1.

, 6 HTML- -
j Query- htm l () (.

662
13. Ajax

4) d iv
message HTML-.
. 13.6.


,
jQuery,
: w w w .w b o te lh o s.co m /ra ty/.


$ . get ();
(. 4),
Ajax :

$.g e t (1file.php1, data, function(data,status) {


//
}) ;
, 4
, :

$.g e t (1r a t e .p h p 1, querystring, function(data) {


var newHTML;
newHTML = f<h2>Bam </2>';
newHTML += 1<> <-J
1;
newHTML += data + '.</>';
$ ( 1#message1).html(newHTML);
}); // get

,
Ajax , - .
,
. , $ .get () $ .
post () , .
, -

663
IV. jQuery JavaScript

, ,
- (,
, ).

,
. error () $ . get () $ . post ().
:

$.get(url, data, successFunction).error(errorFunction);

, 4
:

$.g e t (1ra te.p h p 1, querystring, processResponse)


.error(errorResponse);

errorResponse,
. :

function errorResponse () {
var errorMsg = " -1
.";
errorMsg += .";
$ ( 1#message1) .html(errorMsg);
}
errorResponse
, .


. e r r o r () jQuery . l o a d ( ),
,
JSONP (. JSON ).

get ()

Ajax
.
,
, . ,
.

664
13. Ajax


AMP (Apache, MySQL ) .
-
,
.


XM L-
XML
. HTML, XML HTML-
. , HTML,
,
. , XML-
:
<?xml v e r s i o n = " 1 . 0 ?>
<message i d = ,f2 3 4 " >
<from>BoBa</from>
<toKaHHa</to>
<subj1:>, </ject>
<contentKaHHa, . </content>
</message>
, (
) <message> HTML- html
,
.
Ajax,
, XML-. jQuery
XML-.
g e t ( ) p o s t ( ) ,
XML-, ,
, DOM XML-. ,
jQuery XML-
. jQuery
XML-.
, XML-.^ XML-,
, ,
c o n t e n t . XML- ,

665
IV. jQuery JavaScript

.
jQuery- find () XML-
CSS,
jQuery. , , , ,
(. 4)
jQuery (. jQuery 4).
:
$.get('xml.php1,1id=2341,processXML);
function processXML(data) {
var messageContent=$(data).
find('content').text();
}
$ (data), find
(1content1), jQuery
content data.
data XML-,
jQuery content XML-.
L, www. learn-
xm l-tutorial, com /xm l-basics.cfm .
ojQuery- find() , api.jqu e ry.co m /
find.

, . 13.8.
.
.
, .

Ajax
XMLHttpRequest.
,

, .


JavaScript 1
. HTML-,
j Query Ajax.

666
13. Ajax

. 13.8.
. ,
. Ajax
,

1. 13__02.html -
13.
jQuery $ (document) .
re a d y () .
subm it.
2. $ (document) .
ready () :
$ ( 1# l o g i n 1) . s u b m i t ( f u n c t i o n () {
} ); / / su b m it
form lo g in , , ,
j Query ( $ ( f # l o g i n ') ) ,
su b m it () subm it.
, ,
, .

.
, , ,

667
IV. jQuery JavaScript

, ,
. , j Query-
s e r i a l i z e () .
3. Enter, ,
:
var formData = $ (this) .serialize();

,
, serialize().
, $ ( thi s )
, ,
$ ( 1#login 1) (. this $(this)
4 ,
$ (this ) ). serialize () (. JQuery-
serialize ) ,
,
.
$ . get () XMLHttp
Request.

4. Enter, ,
:
$ .get(1login.php*, formData,processData);

$ . g e t ().
( 'l o g i n . p h p 1) , ,
, login.
php. ,
, , . ,
p ro c e s s D a ta ,
. .

5. :
1 function processData(data) {

2
3 } // processData

;
. ,
(d a ta ),

668
13. Ajax

.
, pass
f a i l .
,
, ,
.


, ,
. ,
, ,

. ,

-
.
, jQuery,
: w w w .w ikihow .com /C reate-a-Secure-Login-
Script-in-PHP-and-M ySQL.

6. p r o c essD a ta () ,
:
1 function processData(data) {

2 if (d ata === fp a s s f ) {
3 $ (1 . m ain 1) . htm l ( 1<> !< /p > 1) ;

4 }
5} // proce ss Da ta

1 , 1p a s s 1.
,
( 2). d iv
main, $ ( 1 .m a in 1) .h tm l ( 1<>
! </> 1) , d iv ,
. , ,
.
e l s e ,

.

669
IV. jQuery JavaScript

7. else processData (),


( ):
1 function processData(data) {
2 if (data==1p a s s ') {
3 $ (1 .m a i n ') .h t m l ('<> !< / p > 1);
4 } else {
5 $('# formwrapper1) .prepend(f<p id="fail"> -*
. p a 3 < / p > f);
6 }
7 } // processData

5 ,
. prepend ().

prepend () .
, , ,
.
, .
8. .
URL-, http://localhost/
13/13_021 . .
-
-.
9. .
, !
, . ,
, . :
,
(. 13.9). , prepend ()
, . !
.
div (<div
id=fIfailMessage">). HTML-
.
div.

. ,
.
670
13. Ajax

. 1 3. 9 . jQuery prepend () HTML-


. ,

10. ( 5 7):

1 function processData(data) {
2 if (data==1pass 1) {
3 $ ( 1.main 1).h t m l (1<> !< / p > 1);
4 } else {
5 if ($ (1# f a i l 1) . l e n g t h = 0 ) {
6 $ ( 1#formwrapper).prepend('<p id="fail">HeKoppeKTHaH
7 . </>');
}
9 }
10 } // processData

,
f a i l , j Query
.
, .
-

671
IV. jQuery JavaScript

jQuery. le n g th
. , le n g th
0. , $ ( f # f a i l f )
f a i l . ,
,
0,
.
,
.
, ,
, Ajax.

11. r e tu r n f a l s e ; subm it
( 15).

:
1 $ (d o c u m e n t). r e a d y ( f u n c t i o n () {
2 $ ( 1#login1).submit(function() {
3 var formData = $ (this) .serialize ();
4 $ .post (1login.php1,formData,processData);
5 function processData(data) {
6 if (data==fpass 1) {
7 $(*.main 1) .h t m l (1<> !</p> *);
8 } else {
9 if ($('#fail') .length === 0) {
10 $ (1#formwrapper1) .prepend(1<p id="fail">HeKoppeKTHaH
11 . < / > ?);
12 }
13 }
14 } // processData
15 r etu r n f a l s e ;
16 }); // submit
17 }); // ready

12. .
: 007,
s e c r e t.

672
13. Ajax

_13_02.html
13.


get () post ()
, jQuery- post () get () ,
, jQuery
, Ajax-
. ,
post get (. 4 11).

GET-, POST-.

JSON

JSON (JavaScript Object Notation JavaScript).
JavaScript XML (.
XML ) ,
. J SON ,
JavaScript.
JSON JavaScript. ,
XML JavaScript,
. JSON
Ajax.

JSON, . , JSON
JavaScript, /
. JSON:

{
"firstName" : ",
"lastName" : "",
"phone" : "495-333-1212"
}
{ J SON, } .
/, , "f irstName" :
"". .
JavaScript JSON

673
IV. jQuery JavaScript

. ,
:

firstName : *

"firstName : ""

JavaScript, /
.
( Internet Explorer ).

/ :
, .
"lastName" ,
"" .

- Ajax-,
JSON. JavaScript-:
, JSON.
JavaScript ,
JSON. , j Query
$ . get JSON (), .
$ . get JSON () $ . get () $ . post ().
:

$.getJSON(url, data, callback);

$. get JSON ()
$.post() $.get() URL- ,
, ,
. , $ . get JSON ()
( ) (
JavaScript) JavaScript.

, $.getJSON()
$ . post () $ . get (), ,
, JSON. ,
$ .getJSON (), ,
JSON . ,
Ajax - ,
contacts.php;
JSON ( ). :
674
13. Ajax

$ .getJSON('contacts.php1, 1contact=1231,processContacts) ;

contact=123 contacts,
php,
.

processContacts.
:
function processContacts(data) {
}
processContacts () data,
JSON, . ,

JSON.

JSON

JSON: dot syntax array


notation. Dot syntax, (.
, 2),
,
, .

JavaScript . , 1abc 1 .
length length
1abc 1, 3.

,
:

var bdate = {
"person" : "",
"date" : "10/27/1980"
};
bdate ,
, ,
:

bdate.person // ""

675
IV. jQuery JavaScript

:
bd a t e .date // "10/27/1980"

JSON,
-. ,
$ .get JSON () :

$.getJSON(1contacts.php1, 1contact=1231,processContacts);
function processContacts(data) {
}
, JSON
(. ), JSON
data ( processContacts () )
, :
var data = {
"firstName" : "",
"lastName" : "",
"phone" : "495-333-1212"
};

f irstName:
d ata .firstName // ""

:
dat a.lastName // ""

, Ajax
,
div info.
:
$.get JSON(1contacts.php *, 1contact=12 3 1,processContact
s); function processContacts(data) {
var infoHTML=1<>: 1 + d a t a .firstName;
infoHTML+=f 1 + data.lastName + ?< b r > f;
infoHTML+=f: 1 + data.phone + !</p>';
$ (1#inf 1) .html(infoHTML);
}

676
13. Ajax

, ,
:
:
: 4 95-333-1212

JSON

,
JSON,
, ,
. : ,
, JSON.
contacts.php ,
, .
:

$ .getJSON(' contacts.php1, 1limit=21,processContacts);

l i m i t =2 ,
, . -
. ,
( ),

JSON:

{
"firstName" : "",
"lastName" : "",
"phone" : "495-555-5235"
}
- ,
JSON, :

{
"contactl:" {
"firstName" : "",
"lastName" : "",
"phone" : "495-333-1212"

677
IV. jQuery JavaScript

"contact2:lf {
"firstName" : "",
"lastName" : "",
"phone" : "495-555-5235"
}
}

,
data (, function processContacts (data) ).
data JSON
, :
var data = {
"contactl:" {
"firstName" : "",
"lastName" : "",
"phone" : "4 95-333-1212"
},
"contact2:" {
"firstName" : "",
"lastName" : "",
"phone" : "495-555-5235"
}
}

d a t a .contactl

da t a .contactl.firstName


, j Query $ . e ac h (),
JSON.
:

678
13. Ajax

$ . each (JS O N ,fu n ction (n am e,valu e) {


}) ;
JSON
$ . e a c h ( ) .
J SON. :

1 $ . g e t J S O N ( 1c o n t a c t s . p h p T, 1l i m i t = 2 1, p r o c e s s C o n t a c t s ) ;
2 fu n ction p rocessC ontacts(data) {
3 //
4 v a r i n f o HT ML =f 1;
5
6 // JSON
7 $ .ea ch (d a ta ,fu n ctio n (co n ta ct, contactlnfo) {
8 i nf oHTML+=1< > : 1 + contactlnfo.firstName;
9 i n f o H TM L += 1 f + contactlnfo.lastName + f < b r > ' ;
10 infoHTML+=! : ' + c o n t a c t l n f o .phone + ' < / p > ! ;
11 }); // e a c h ( )
12
13 // HTML-
14 $ ( 1# i n f o ') h t m l ( i n f o H T M L ) ;
15 }

.
1. 1 Ajax- (limit=2)
(processContacts).
2. 2 ,
JSON, ,
(data).
3. 4 . HTML-,
.
4. 7 $ .each (),
JSON.

$ . e a c h () JSON
( d a t a ) .

679
IV. jQuery JavaScript

. 13.10. ,
( c o n ta c t 1 c o n t a c t 2)
( c o n ta c t 7)
( c o n t a c t l n f ).
c o n t a c t l n f o ,
.

. 13.10. jQuery- $ . e a c h ()
JSON.
.
, : docs.jquery.com/Utilities/jQuery.
each#objectcallback

5. 810 .
, $ . each () ,
810
.
6. 14 HTML-
.

680
13. Ajax

HTML-:
<>: <br>

: 495-333-1212</>

<>: <>

: 495-555-5235</>

JSONP
Ajax
. , Ajax,
, , .

(, ).
. - XMLHTTP
, ,
, JavaScript.

JSONP QSON with padding)


. ,
Ajax , , JSON.
,
JavaScript, .


. JSONP ,
JSONP.
, , ,
Google Maps, Twitter, Flickr, Facebook, Netflix YouTube
(API, Application Programming
Interface), , ,
, . .,
jQuery $ . get JSON () (. 13.11).

Flickr

Flickr .
.

681
IV. jQuery JavaScript

,
, Flickr ( ,
, ,
, . .).

. 13.11 . Ajax
, JSONP JSON
, JavaScript.
Twitter, Google
Flickr ( )

Flickr
. ,
, API Flickr
. Flickr
API ( ,
).
. Flickr Feed.
. , ,
, RSS-,
. Flickr

20 .

682
13. Ajax


Flickr
, jQuery- $ .get JSON ()
J S O N P .

URL-

Flickr U R L -
(
: www.flickr.com/services/feeds/).
, : http://api.flickr.com/services/feeds/photos_
public.gne
(, , )
(, -,
).

, , U R L -,
,
.
.
( ,
? U R L -,
/: http://api.flickr.com/services/
feeds/groups_pool.gne?id= 25053835@N03&&format=json,.)
.
,
id=,
. ,
:

h t t p : / / a p i . f l i c k r . / s e r v i c e s / f e e d s / g r o u p s _ p o o l .
gne?id=37 996591O930NO1

Flickr
.
,
( Flickr)

:

h t t p ://api .f l i c k r .com/services/feeds/photos_public. -1
gne?ids=862322O0NO2,250538350NO3

683
IV. jQuery JavaScript

,
. ,
:

.


- Flickr,
, idgettr.com .

JSON. Flickr
RSS
Atom, CSV JSON. Flickr,
JSON,
&format=j son. ,
JSON,
URL-:
http://api.flickr.com/services/feeds/photos_public.
gne?ids=25053835@N03&format=j son

(
flickrjson.txt,
13). ,
, .
, Fickr,
$ .get JSON () ( JSON
). JavaScript, ,
.
( JSON- Flickr
,
.)
URL- JSONP. ,
JSON
, URL-
: &j soncallback=?. ,
XMLHTTP
. , &j soncallback=?
Flickr,
JSONP j Query- $ . get JSON ()
,
684
13. Ajax

JavaScript. ,
Flickr,
$ . get JSON () URL-:
h t t p ://api .flickr.com/services/feeds/photos_public -1
.gne?ids=25053835@N03&format=j son&j soncallback=?

Flickr ,
. ,
. ,
.
,
, , .

Flickr ,
:
t a g s . URL- tags ()
, ,
&tags=fireworks, night.
, URL-
:
https ://api .flickr.com/services/feeds/photos_public 4-J
.gne?tags=fireworks,night&format=j son&j soncallback=?
tagm ode. , , Flickr
, . ,
?tags=chipmunks,baseball, winter.
,
. ,
( ,
), URL- &tagmode=any.
:
https://api.flickr./services/feeds/photos_public ^
.gne?tags=chipmunk, baseball, winter&tagmode= 4-1
any&format=j son&j soncallback=?


,
. ,
685
IV. jQuery JavaScript

,
. ,
Flickr,
20 , .
,
:

https :/ /api .flickr ./services/feeds/photo s_public. <_J


gne?ids=25053835@N03, 862322O0NO2&tags= -
chipmunk&format=json&j soncallback=?

$. g e t JSON ()

$. get JSON ()
Flickr , JSON
. .
, , Flickr
:

1 var flickrURL = "https://api.flickr.com/services/


feeds/photos_public .gne?ids=25O538350NO3& -1
format=j son&j soncallback=?";
2 $.g et JSO N(flickrURL, function(data) {
3 // - JSON
4 }); / / get

1 flickrURL
URL- ( ,
). 2 URL- Ajax
. Ajax-

data.
, ,
, JSON Flickr.

JSON- Flickr

JSON ,
JSON JavaScript,
, :

686
13. Ajax

{
11firstName" : ",
"lastName" : ""
}
firstName
.
(. . 13.10 ),
, . ,
JSON Flickr.
,
:
1 {
2 "title": "Uploads from Smithsonian Institution",
3 "link": "h t t p ://www.flickr.com/photos/smithsonian/",
4 "description": "",
5 "modified : 2011-08-llT13:16:37Z,
6 "generator": "http://www.flickr.com/",
7 "items": [
8 {
9 "title": "East Island, June 12, 1966.",
10 "link": "http://www.flickr.com/photos/ <-J
smithsonian/5988083516/",
11 "media" : {"m :"http://farm7 .static .flickr . -1
com/6029/5988083516_bfc9f41286_m.jpg"},
12 "date_taken": "2011-07-29T1 1:45:50-08:00",
13 "description": "Short description here",
14 "published : "2011-08-11T13:16:37Z,
15 author": "nobody@flickr.com (Smithsonian -1
Institution)",
16 "author_id": "25053835@N03",
17 "tags": "ocean birds redfootedbooby"
18 },
19 {
20 "title": Phoenix Island, April 15, 1966.",
21 "link": "http://www.flickr.com/photos/ -1

687
IV. jQuery JavaScript

smithsonian/5 988083472/",
22 "media" : {"m" :"http://farm7 .static .flickr. -1
com/6015/59880834 72_c64 6ef277 8_m.jpg"},
23 "date_taken": "2 011-07-29T11:4 5:4 8-08:00",
24 "description": "Another short description",
25 "published": "2 011-08-11T13:16:37Z",
26 "author": "nobody@flickr.com (Smithsonian <"J
Institution)",
27 "author_id": "25053835@N03",
28 "tags": ""
29 }
30 ]
31 }

J SON Flickr
: "title", "link" . . "title" ( 2)
. , "Uploads from Smithsonian
Institution", "link" ( 3)
Flickr.

.

,
, ,
2. , :
, , JSON
data ( 2). ,
"title" "data" :
d at a.title

"items" ( 7),
,
. , 8-18
, 19-29 .
, ,
( 9), Flickr
( 10), ( 12), ("Short
description here" ( ) 13 [
]) . .

688
13. Ajax

"m edia11.
,

{
"m" :"http://f arm7 .static .flickr./ 602 9/5 98808351 _
bfc9f41286_m.jpg"
}
"" medium, URL-
. Fickr
, , medium (), thumbnail () small
( ).
, URL- , .
, img
Flickr. ,
.


Flickr

,
,
Flickr.



JavaScript 1
.

1. 13_03.html -
13.

URL-, Flickr.
2. $ (document) .
ready () :
var URL = "https://api.flickr.com/services/feeds/ ^
photos_public.gne?j soncallback=?";

689
IV. jQuery JavaScript

URL-
? j so n c a llb a c k = ? , Flickr
JSONP. ,
Flickr JavaScript-
.
,
Flickr.
URL-,
URL- .

. ,
Flickr,
.


Flickr,
. , : idgettr.com .

,
URL-.
3. ,
:
v a r s e a r c h ln f o = {
};
JavaScript.
JSON ,
Ajax.
,
.
Flickr,
.
4. / (
):
v a r s e a r c h ln f o = {
id : "25O538350NO3"

690
13. Ajax

};
API- Flickr
.
.
,
id.
, ( ,
,
).
Flickr
J SON.


, ,
, URL- 2 https://api.flickr.com /
services/feeds/groups_pool.gne?jsoncallback=?,
.

5. ,
Enter form at : "j son":
var searchlnfo = {
id : "25O538350NO3",
format : "json"
};
,
XML.
Ajax
$ .getJSON ().
6. :
$.getJSON(ajaxURL, searchlnfo, function(data) {

}); // get JSON;

$.getJSON(),
URL-, 2,
, 3-5,
Flickr.

691
IV. jQuery JavaScript

data.
.
hi.
7. , :
$.getJSON(aj axURL,function(data) {
$ ( 1h i 1) . t e x t ( d a t a . t i t l e ) ;
}); // get JSON;

j Query $ ( 1hi *) . text (),



hi , .
JSON data.
(. ,
2), d a t a .title
.
, Uploads from Smithsonian
Institution.
,
HTML-, -.
8. , :
$.getJSON(aj axURL,function(data) {
$(1h i 1).text(data.title);
var photoHTML = 11;
}); // get JSON;

, HTML-,
Flickr .
HTML-
items, Flickr.
HTML-
photoHTML.

9. , :
$.getJSON(ajaxURL,function(data) {

$ (1h i 1) .text(data.title);

varphotoHTML= 1 1; $. each (d a ta . it e m s , fu n c tio n ( i , photo)


{

692
13. Ajax

} ) ; / / each
}); // get JSON;

. e ac h ()
4.
j Query. $ . eac h () . ,

(. 2), .
$ .e a c h ( )
. $ .e a c h ()

.
( i n p h o to ),
, .
,
(.
2). , 0.
( p h o to )
, , , URL- . .,
.
Flickr d a t a . ite m s
- JSON, $ . each ()

p h o to . ,
, - .
,
Flickr.
HTML-
. ,
<span class=nimage11>
< href="http://w ww .flickr.com/photos/ -*
smithsonian/5 988083516/11>
<img src=ffh t t p :/ /f arm7 .static .flickr.
com/6029/5988083516_bfc9f41286_s.jpg">
</a>
</span>

,
: URL- Flickr .
,
693
IV. jQuery JavaScript

HTML-, URL-
.
10. $ . e a c h ( ) ,
:
$.each(data.items,function(i,photo) {

photoHTML += '<span class="image">';

photoHTML += '<a href="' + photo.link + '

photoHIML += '<img sro=M + photo.media.m + 'X/aX/span>!;

}); // each

<span>
photoHTML.
( +=
2).
: p h o t o .link photo .
media.m. JSON JSON-
Flickr , ,
, title ( )
description (). link
Flickr.com, media \
.
HTML, 6.
.
11. , :
$.each(data.items,function(i,photo) {

photoHTML = '<span class="image"> 1;

photoHTML += !<a href=" 1 + photo, link +

photoHTML += '<img src="1 + photo.media.m + 1"></aX/span>f;

}); // each

$ (1#photos 1) .append (photoHTML) ;


,
. HTML- ,
. $ ( 1#photos 1)

694
13. Ajax

d iv ,
append () (.
4) HTML- div.
12. .
20 , . (
,
(. 1)
.) ,

. , Flickr
.
Fickr
.

. , . Flickr
:
: http://farm7.static.
flickr.com/6029/5988083516_bfc9f41286_m.jpg,
: http://farm7.static.flickr.com/6029/5988083516_
bfc9f41286_s.jpg. : _
, _s
(75x75 ), _t ,
100 , _
(
Flickr), _ ( 1024
). ( _
_5, ), .
, JavaScript
.
13. p h o to . m ed ia . m p h o to .
m e d ia .m .r e p la c e ( '_mf , f_ s f ).
:
$ (docum ent) . r e a d y (f u n c tio n () {
v a r URL = "h t t p s : / / a p i . f l i c k r . c o m / s e r v i c e s / f e e d s / ^
p h o to s _ p u b lic . g n e ? j s o n c a llb a c k = ? ";
v a r s e a r c h ln f o = {
id : "25O538350NO3",

695
IV. jQuery JavaScript

format : 11j son"

};
$.getJSON(URL,searchlnfo,function(data) {

$ (1h i f) .text(data.title);

var photoHTML = 11;

$ .each(data.items,function(i,photo) {

photoHTML += !<span class="image">1; photoHTML += -*


<a href="1 + photo, link + photoHTML += !<img -1
src=" 1 + photo, media, m. replace (f_ m f, '_sf) + !"></a></
span>1;

}); // each

$ (1#photos1) .append(photoHTML);

}); // get JSON

}); // ready

JavaScript replace () (
16)
, ( f_ m 1) ,
( 1_s 1).
14. .
20
(. . 13.11). ,
Flickr.
_ 13_03.html 13.


Flickr 20 .
, 10 ,
13 03 02.htm l 13.
14

j Query j Query UI
,
-. j Query
, ,
DO . j Query UI
, ,
,
.

.

.



:
.
, jQuery UI ( 1 . 14.1),
jQuery UI.
.
( 2 . 14.1).

.
-
( 3 . 14.1).
,
Sortable j Query UI.
,

697
IV. jQuery JavaScript

,
. ,

.

( 4 . 14.1).
.
j Query UI .

. 14.1. jQuery jQuery Ul


.
, ,
,
,

j Query UI
,
.
. ,
, .

. , ,
, ,
.
698
14.



j Query UI.
, 14: index,
html todo.js. JavaScript todo.js
HTML- index.html.



JavaScript 1
.

1. index.html
14.
CSS-
j Query j Query UI. todo.js,
.
2. < s c r ip t s r c = " j s /j q u e r y -u i .min.
j s " X / s c r i p t > :
< s c r i p t s rc = " to d o . j s 11></ s c r i p t >
, todo.js ,
jQuery jQuery UI.
,
.
.
.
3. HTML- < ! - -
> HTML-:
c b u tto n id= "add-todo"> flo6aB bT e 3 a fla 4 y < /b u tto n >
,
HTML- b u tto n . ,
,
. j Query UI.
4. todo.js
$ (document) . ready () :
699
IV. jQuery JavaScript

$ (1# a d d - t o d o 1) .button ();

,
jQuery UI (.
ThemeRoller 11). ,
jQuery UI.
5. b u tto n () JavaScript,
(
):
$ (1#add-todo f) .b u t t o n ({

ic o n s : {
prim ary: " u i- ic o n - c ir c le - p lu s "
}
} );
+
.
10, jQuery UI
: ( p rim a ry )
( se c o n d a ry ).
.
6. todo.js index.html.
index.html .
j Query UI
Button (. 14.1). , , JavaScript .
JavaScript
, - .


, . ,
,

. HTML-:
1. <!
> index.html HTML-:
<div id="new-todo" title="flo6aBbTe ">

700
14.

<form>

<>
clabel for=fltaskfl>Ha3BaHne : </label>

<input type="text" name="taskn id=f,taskIf>

</p>
</form>

< /d iv >

9,
HTML-. d iv ,
.

.
HTML- ,
JavaScript.
2. todo.js. , 5
, :
$ (1#new-todo1) .d i a l o g ();

index.html todo.js,
index.html . (.
. 14.2). ,
. j Query
UI. ,
d ia lo g ().
3. d ia lo g ():
$ (1#new-todo1) .d i a l o g ({

modal : t r u e ,
autoOpen : f a l s e
} );

9, modal ,
, -
. ,

701
IV. jQuery JavaScript

. 14.2. jQuery Ul
. ,
,
, , .
, ,
, ,

autoO pen f a l s e ,
.
, ,
!
4. c l i c k ,
c l i c k () b u tto n ():
$ (#add-todo') .button({

ic o n s : {

702
14.

p r im a r y : " u i - i c o n - c i r c l e - p l u s "
}
}) . c l i c k ( f u n c t i o n () {
$ ( f #new -todo ') . d i a l o g (' open 1);
}) ;
j Query-,
, .
a d d -to d o (),
j Query UI- b u tto n (),
c lic k .
open (.
9). ,
.
.
5. todo.js index.html .
.

( . 14.2). ,

. ,
. ,
, . , ,
. !
jQuery UI .
6. todo.js.
b u tto n s
:
$ ( 1# n e w - t o d o 1) . d i a l o g ({
modal : t r u e ,
autoO pen : f a l s e ,
b u tto n s : {
}
}) ;

703
IV. jQuery JavaScript

buttons ,
j Query UI . ,
,
, - .
, , .
, ( buttons)
( options, dialog () ).
.
7. b u tto n s (
):
$ (1#new-todo1) .d i a l o g ({

modal : true,

autoOpen : false,

buttons : {

"" : fu n c tio n () {
}
}
}) ;
.
, .
, .

. .
8. }
add ta sk () :
$ ( 1# n e w - t o d o ' ) . d i a l o g ({
modal : true,

autoOpen : false,

buttons : {

"" : function () {

},
"" : fu n c tio n () {

704
14.

$ ( t h i s ) . d i a l o g ( 1c l o s e 1) ;
}
}
}) ;
.
. $ (t h i s )
, ,
.
c l o s e
Dialog jQuery UI (.
9).
.
, .
9. todo.js index.html
. .
(. 14.3).
, ,
.
,
.
,
.

. 14.3.
,

705
IV. jQuery JavaScript


,
.
. ,
,
7 .
4 :
1. ,
.
,
j Query- v a l () (.
8),
.
2. l i , .

. HTML-
:
<li>
<span c l a s s = " d o n e M>%</span>
<span c l a s s = fld e l e t e " > x < / s p a n >
<span c l a s s = fltask">Hcne4b TopT</span>
</li>

span ,
, .
span .
span ,
. HTML-
,
, , .


CSS
. ,
% span
-,
.

706
14.

3. 11 .
j Query
DOM - ( 4
).
j Query UI,
.
4. .
.
8 .

, ,
. -, ,
:
1. , (
buttons dialog () ) ,
:
"" : f u n c t i o n () {
var taskName = $(1#task1).val();
},
taskName
. , 1
HTML-
.
t a s k , $ ( 1# t a s k ') . v a l ( )
, , ,
.
,
.
,
, TaskName .
2. ,
(
):
"" : f u n c t i o n () {
v a r taskName = $ ( 1# t a s k 1) . v a l ();
if (taskName === 1') {
707
IV. jQuery JavaScript

return false;

}
},
, TaskName
(
: f 1), ,
, .
return false ,
.
, ,
(
X,
j Query UI).
HTML- .
3. ,
(
):
"" : function () {

var taskName = $ (1# t as k1) .v a l ();

if (taskName === 11) {

return false;

}
var taskHTML = f<liXspan class="done">%</span>!;
taskHTML += !<span class="delete">x</span>f;
taskHTML += '<span class="task"X/spanX/li>1;
},
,
taskHTML
.
JavaScript.

. += ,
(.
2).

708
14.

,
taskName, , .

4. j Query,
HTML- (
):
"" : function () {
var taskName = $ ( 1#task').v a l ();
if (taskName === '') {
return false;
}
var taskHTML = ?<li><span class="done">%</span>1;
taskHTML += '<span class="delete">x</span>1;
taskHTML += ?<span class="task"x/span></li> 1;
var $newTask = $ (taskHTML);
},
j Query ,
, 1<hl>A headline</hl> 1, DOM.
, taskHTML ,
, .
HTML-. ,
HTML-, $ ()
DOM. ,
j Query, j Query-
. $ $newTask
,
JavaScript-,
j Query. $ ,
j Query
jQuery, , . show () . addClass ().
, .
5. " " (
):
"" : function () {
var taskName = $ (1# t a sk1) .v a l ();
if (taskName === ff) {

709
IV. jQuery JavaScript

return false;
}
var taskHTML = !<li><span class="donell>%</span>1;
taskHTML += T<span class="delete">x</span> 1;
taskHTML += f<span class=taskx / s p a n > < / l i > 1;
var $newTask = $ (taskHTML);
$newTask.find(1.task1).text(taskName);
},
find() jQuery
(. DOM 15).
j Query l i ,
$newTask,
task span,
(. 3). J Query- text ()
taskName span.
,
taskName 4:
taskHTML += f<span class=" task" >' + taskName +
1</span></li>1;

, -
- :
<script>alert ( 1 , , ,
1) ;</script>.
HTML-, JavaScript
. , j Query- text ()
HTML- ,
<script> &lt; script&gt.
,
, h i
, .

.
6. "" (
):
" : function () {
var taskName = $ ( ?# ta sk1) .val ();

710
14.

if (taskName === 11) {


return false;
}
var taskHTML = !<li><span class="done">%</span>1;
taskHTML += '<span class="delete">x</span>1;
taskHTML += *<span c l a s s = " t a s k " x / s p a n x / l i > 1;
var $newTask = $ (taskHTML);
$newTask.f i n d (1 .task1) .text(taskName);
$newTask.hide();
$(1#todo-list1).prepend($newTask);
},
$newTask jQuery,
.
, , -
. ,

to do-list,
() (.
4, ,
prepend () ).

.
7. ,
(
):
"" : function () {
var taskName = $ (1# task') .val ();
if (taskName === 11) {
return false;
}
var taskHTML = !<li><span class="done">%</span>1;
taskHTML += '<span class="delete">x</span>1;
taskHTML += '<span class="task"x/span></li> ';
var $newTask = $ (taskHTML);
$newTask.find(1.task1).text(taskName); $newTask.hide();

711
IV. jQuery JavaScript

$ ( 1# t o d o - l i s t 1) . p r e p e n d ( $ n e w T a s k ) ;
$newTask.show( 1c l i p 1, 2 5 0 ) . e f f e c t ( 1h i g h l i g h t 1, 1 0 0 0 ) ;
$ ( t h i s ) . d i a l o g ( c l o s e 1) ;
},

, jQuery show(),
.
jQuery UI: c l i p (. 12)
.
e f f e c t ()
,
.
(
8
). , .
8. todo.js index.html .
,
,
.
.
, JavaScript
.
.

, .
, .
.
9. b u tto n s ,
d ia lo g (),
:
close: f u n c t i o n () {
$ ( 1#new-todo i n p u t 1) . v a l ( 1 1);
}
d i a l o g () :
$ ( 1# n e w - t o d o 1) . d i a l o g ({

712
14.

modal : true,
autoOpen : false,
buttons : {
" : function () {
var taskName = $ ( 1# t a sk1).v a l ();
if (taskName === 11) {
return false;
}
var taskHTML = '<li><span class="done">%</span>1;
taskHTML += !<span class="delete">x</span>1;
taskHTML += !<span c l a s s = " t a s k"x /s pan ></ li >1;
var $newTask = $ (taskHTML);
$newTask.find(1.task*) .text(taskName); $newTask.hide();
$ ( 1#todo-list').prepend($newTask);
$newTask. s h o w ( f c l i p f ,250) . e f f e c t ( 1h i g h l i g h t ' , 1000);
$ (this) .d i a l o g (1close 1);
},
"" : function () {
$ (this) .dialog(1close 1);
}
},
close: function () {
$ (1#new-todo i n put 1) .v a l (1 1);
}
}) ;
. ,
buttons. close Dialog
j Query U I ,
. ,
,
. (
,

close.)

713
IV. jQuery JavaScript



.
,
. .
: ,
( )
.

,
.
j Query
:
$ ( 1. done 1) . c l i c k ( f u n c t i o n () {
// -
}) ;
,
. -
,
, .
, .
-
, ,
. ,
. c l i c k ()
,
j Query ,
(.
on () 5).

,
, ,
. -
, ,
c l i c k , .
, ,

714
14.

(,
), , .


- :

< ul i d = " t o d o - l i s t " >


< /u l>
,
:

< ul i d = " t o d o - l i s t " >


< li>
< span c la s s = " d o n e " >%</span>
< span c l a s s = 11d e l e t e 11> x< /span>
<span c l a s s = fltask">M cne4b < / >
< /li>
< /u l>

c lic k ,
done,
:
1. d i a l o g (),
$ (document) . ready () :
$ ( 1# t o d o - l i s t 1) . o n ( 1c l i c k 1, ' . d o n e 1, f u n c t i o n ( ) {
}) ;
.
. j Query on (),
. ,
1c l i c k 1.
,
. span done.
,
, .
2.
:
$ ( 1# t o d o - l i s t 1) . o n ( 1c l i c k 1, ' . d o n e 1, f u n c t i o n ( ) {

715
IV. jQuery JavaScript

var $taskltem = $ (this).parent(1li 1);


}) ;
,

. ,
j Query span ,
l i .
j Query p a r e n t ()
.
$ ( t h i s ) ,
, <span cl a s s =" do n e " >%</
span>. , $ ( t h i s ) . p a r e n t ( 1l i 1)
, l i .
, !
$ t a s k l t e m ,
.


this $(this)
t h i s $ ( t h i s ) 4.

3. ,
:
$ ( 1# t o d o - l i s t 1) . o n ( 1c l i c k 1, f . d o n e f , f u n c t i o n ( ) {
v a r $ t a s k l t e m = $ ( t h i s ) . p a r e n t (1l i 1); $taskltem. ^
slideUp(250, function() {
}) ;
}) ;
j Query s l i d e U p
(. 6).
.
s l i d e U p -
, CSS.
j Query 6, j Query-
(, h id e (), show () s l i d e U p () )
. 250
, 250 .

716
14.

.
, ,
jQuery. , s l i d e U p
,
.
.
.
4. ,
:
$ ( 1# t o d o - l i s t 1).o n (1c l i c k 1, f.done 1, f u n c t i o n () {
var $taskltem = $ ( t h i s ) . p a r e n t ( 1l i 1 ) ; $taskltem. -1
slideUp(250, f u n c t i o n () {
v a r $ t h is = $ ( t h i s ) ;
$t h i s . d e t a c h ( ) ;
}) ;
}) ;
$ ( t h i s )
. ,
j Query- $ ()
.
, j Query-

. (
15).
j Query d e t a c h ( ) ,
HTML- ,
. ,
, .
$ t h i s .
!


a pi.jqu e ry.co m /de tach /,
jQuery deta ch ().

5. ,
( ):

717
IV. jQuery JavaScript

$ ( 1# t o d o - l i s t 1 ) . o n ( 1 c l i c k 1 , ' . d o n e 1, function() {
var $taskltem = $ ( t h i s ) . p a r e n t ( ' l i 1) ;
$ t a s k l t e m . s l i d e U p (250, f u n c t i o n () {
var $this = $(this);
$ t h i s . d e t a c h ();
$ (1#completed-list1) .prepend($this);
$this.slideDown();
}) ;
}) ;
prepend () ( 6
).
HTML- .
$ (this)
( completed-
list). ,
slideUp (),
slideDown () (.
6).
6. todo.js index.html
. ,
,
, .

(. 14.4). ,
JavaScript
.

. ,
,
, :
, . jQuery UI Sortable
. ,

,
.
7. index.html
u l
718
14.

. c l a s s = " s o r t l s t M,
:
<ul id=" todo-list11 class=11sort list ">

<ul id="completed-listfl class= sort list11>


,
.

. 14.4. , ,
, , ,
. JavaScript-, CSS,
, CSS : h o v e r ,
. ,
, todo.css 14/css

8. index.html todo.js
.
, ,
$ (document) . ready (), :
$ (1.sortlist1) .sortable ();

.
index.html,
. , , -
,
. Sortable.
9. s o r t a b le (), ,
:
$ (f.sortlist1) .so rta ble ({
c o n n e c tw ith : ' . s o r t l i s t 1
>) ;
719
IV. jQuery JavaScript

c on ne c t Wi t h Sortable (.
Sortable 12)
.
.
,
Sortable,
.
10. Sortable o p tio n :
$ ( 1. s o r t l i s t 1) . s o r t a b l e ({
connec t Wi t h : ! . s o r t l i s t 1,
cursor : pointer1,
placeholder : ui-state-highlight1,
cancel : 1.delete,.done1
}) ;
He connectW ith. c u r s o r
(. Draggable 12)
.
p la c e h o ld e r (. Sortable
12) ,
. , , c a n c e l (.
Sortable 12)
, :

.
11. index.html todo.js index,
html -.
.
.
,
(. . 14.1).


.
, .
,
,
.

720
14.

1. sortable( ) ,
$ (document) . ready ( ) , :
$ ( 1. s o r t l i s t 1) . o n ( 1c l i c k 1, ' . d e l e t e 1, f u n c t i o n () {
}) ;
.
,
,
. $ ( ' . s o r t l i s t ' )
(

), on () j Query
c l i c k d e le t e .
.
.
2. ,
:
$ ( ' . s o r t l i s t ' ) . o n ( ' c l i c k ' , ' . d e l e t e ' , f u n c t i o n () {
$ (this).parent('li').effect('puff', function() {
$ (this).remove();
}) ;
}) ;
,
. :
$ ( t h i s ) . p a r e n t ( 1l i ') ,
$ ( t h i s ) , ,
l i . ,
, .
jQuery UI e f f e c t ()
. p u f f
, .
e f f e c t ()
.
, e f f e c t () (
, $ ( t h i s ) )
j Query remove ()
(. 4).
d e ta c h (), remove ()
.

721
IV. jQuery JavaScript

3. index.html
.
,
. . 14.1.
-
:
$ ( d o c u me n t ) . r e a d y (f u n c t i o n () {
$ ( 1# a d d - t o d o 1) . b u t t o n ({
icons: {
p r i m a r y : " u i - i c o n - c i r c l e - p l u s 11
}
}) . c l i c k ( f u n c t i o n () {
$ ( 1# n e w - t o d o 1) . d i a l o g ( 1open 1) ;
}) ;
$ ( 1# n e w - t o d o 1) . d i a l o g ({
modal : t r u e ,
autoO pen : f a l s e ,
buttons : {
" : f u n c t i o n () {
v a r taskName = $ ( 1# t a s k 1) . v a l () ;
i f (taskName === ' ' ) {
return false;
}
v a r taskHTML = ' c l i x s p a n c l a s s = " d o n e " > %< / s p a n > 1;
taskHTML += !<span c l a s s = ffd e l e t e " > x < / s p a n > 1;
taskHTML += !<span c l a s s = " t a s k 11> < / s p a n > < / l i > 1;
v a r $newTask = $ (taskHTML);
$ n e w T a s k . f i n d ( 1. t a s k 1) . t e x t ( t a s k N a m e ) ;
$newTask. h i d e () ;
$ ( f # t o d o - l i s t 1) . p r e p e n d ( $ n e w T a s k ) ;
$newTask .s h o w ( ' c l i p 1, 250) .e f f e c t (1h i g h l i g h t ', 1000);
$ ( t h i s ) . d i a l o g ( 1c l o s e 1);
},
"" : f u n c t i o n () {
$ ( t h i s ) . d i a l o g ( 1c l o s e 1);
}
},
722
14.

close: f u n c t i o n () {
$ ( 1#new-todo i n p u t 1) . v a l (f 1);
}
}) ;
$ ( 1# t o d o - l i s t f ) . o n ( ' c l i c k 1, 1. done 1, f u n c t i o n () {
v a r $ t a s k l t e m = $ ( t h i s ) . p a r e n t ( 1l i 1) ; $ t a s k l t e m . <-J
s l i d e U p (250, f u n c t i o n () {
var $ this = $ ( t h i s ) ;
$ t h i s . d e t a c h ();
$ (f#completed-list1) .prepend ($this) ; $this . -1
sl ideDown();
}) ;
}) ;
$ ( 1. s o r t l i s t 1) . s o r t a b l e ({
c o n n e c t w i t h : ' . s o r t l i s t 1,
cursor : ' p o i n t e r ',
placeholder : ' u i - s t a t e - h i g h l i g h t ',
c a n c e l : 1. d e l e t e , . d o n e '
}) ;
$ ( ' . s o r t l i s t ' ) . o n ( ' c l i c k ' , ' . d e l e t e ' , f u n c t i o n () {
$ (t h i s ) . p a r e n t ( ' l i ' ) . e f f e c t ( ' p u f f ' , f u n c t i o n () {
$ ( t h i s ) . remove();
}) ;
}) ;
}); / / r e a d y


complete-
index.htm l com plete-todo.js 14.


, -!
. , ,
, .
,
, ,
.
723
IV. jQuery JavaScript



.
,
. .

.
,
span task.
,

.

. .
HTML-
contentEditable. HTML-
. , HTML-,
,
:
<span class="task" contentEditable>

jQuery: $ (1.t a s k 1) .prop(1contentEditable1, true);

,
contentEditable . jQuery UI Sortable

, , ,
contentEditable .
, j Query UI
sortable ().
10
.
. taskrcancel : 1 .delete, .done, .task1
, ,
, .
,
.
handle Sortable (.
Sortable 12).
724
14.


. ,
.
, , , .

,
.

.
.



,
,
. ,
.
,
, , .
:
developer.mozilla.org/ru/docs/Web/Guide/API/DOM/Storage.
j Query,
: github.com/julien-maurel/jQuery-Storage-API.


-.
,
. ,

.
( ).
.
JavaScript
. Ajax,
, .

725
IV. jQuery JavaScript

j Query
. each (),
. JavaScript ,
, . ,
, ,
Ajax, ,
,
. :
function getData() {
var todoData = {
toDo : [],
completed : []
};
$ (1#todo-list1) .e a c h ( f unction() {
var task = $ (this) .f i n d (1.t a s k 1).t e x t ();
todoData.toDo.push(task);
}) ;
$ (1#completed-list1) .e a c h ( function() {
var task = $ (this).f i n d (1.t a s k 1).t e x t ();
todoData.completed.push(task);
}) ;
return $ .param(todoData);
}
,
,
. -
.


, .
JavaScript, j Query jQuery UI.
: github.
com/sawmac/jquery-todo.
V
,

15.
jQuery

16.

JavaScript

17.
15


JQUERY

j Query
JavaScript
.
j Query
().
,
, ,
.
j Query. ,
, ,
,
.


jQuery
, j Query
, ,
. ,
, .

$ () jQuery ()

, j Query,
:

jQu ery(fp f) .css ('l o r 1, f# F 0 3 !);

$ ( 1 1),
, , j Query () ?

728
15. jQuery

.
:

$ (' 1) .css(fc o l o r 1, 1# F 0 3 ');

$ () j Query ():
. (John Resig), j Query, -
,
j Query () ,
, j Query () $ ().

,
j Query (), $ () ,
. $ () - , , , (
) .


$ () JavaScript
Prototype (www.prototypejs.org).
Prototype ,
jQuery (). ,
jQuery .noConflict ().
: api.jquery.com/jQuery.noConflict/.

,
$() , $ ( 1ttooltip 1)
jQuery ().
,
.

, j Query
:

$ (1# to oltip1) .h t m l (1<></>1);


$ (1#tooltip 1) .fa d e l n (250);
$ (1#tooItip 1) .a n i m a t e ({left : lOOpx},250);


tooltip, -

729
V. ,

. ,
. ,
, ,
( left) 100 .
$ ( 1#tooltip ) jQuery ().
,
.
,
4, .
, , ,
, :
$ (1#tooltip 1) .html (<></> 1) .fadeln (250) . 4_J
animate ({left : } ,250) ;

.

. JavaScript
,
:
$ (1#tooltip1) .h t m l (1<></>1)
.fadeln(250)
.animate ({left: } ,250) ;

, .html, .fadeln .animate


,
, .
: jQuery ()
,
.
:
1 var tooltip = $ ( 1ttooltip')
2 tooltip.h t m l (1<></>1);
3 tooltip.fadeln (250);
4 tooltip.ani mat e({left : 100px},250);

jQuery ()
tooltip,
tooltip. ,

730