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

2-

-
-
2011

681.3.068+800.92 jQuery
32.973.26-018.1
17

. .
17

jQuery. . 2- ., . . .:
-, 2011. 416 .: . + CD-ROM
( )
ISBN 978-5-9775-0732-5

- jQuery.
jQuery, jQuery AJAX.
UI jQuery. jQuery , ,
, cookies, .
jQuery 1.4.4 1.5.2,
UI jQuery 1.8.9. - ,
jQuery 1.4.4 1.5.2, UI jQuery 1.8.9,
.
-
681.3.068+800.92 jQuery
32.973.26-018.1

:

.
.

02429 24.07.00. 30.06.11.


70 1001/16. . . . . 33,54.
1500 .
"-", 190005, -, ., 29.
-
77.99.60.953..005770.05.09 26.05.2009 .
.

" ""
199034, -, 9 , 12

ISBN 978-5-9775-0732-5

. ., 2011
, "-", 2011

............................................................................................................................ 7
.............................................................................................................................. 7
..................................................................................................................... 8
................................................................................................................. 9
............................................................................................................................... 10

I. JQUERY ...................................................... 11
1. ........................................................................................... 13
1.1. ..................................................................................................................... 13
1.2. .................................................................................. 20
1.3. ................................................................................................................ 24
1.4. ............................................................................................... 30
1.5. ....................................................................... 34
1.6. ............................................................................................................. 36
1.7. ..................................................................................................... 40
1.8. ................................................................................... 43
1.9. - .............................................................................................. 47

2. .................................................................................... 53
2.1. ...................................................................................... 53
2.2. class ....................................................................................................... 57
2.3. HTML ..................................................................................................... 59
2.4. value....................................................................................................... 61

3. ................................................................................... 67
3.1. .................................................................................. 67
3.2. "" "" ................................................................................. 70
3.3. ................................................................................................................ 74
3.4. UI jQuery ................................................................................................................ 79

4. CSS- ............................................................................ 84
4.1. CSS- ..................................... 84
4.2. ................................................................................................. 88
4.3. .............................................................................................. 90

5. jQuery ......................................................................... 94
5.1. ........................................................................................ 94

6. ................................................................... 98
6.1. ..................................................................................... 98
6.2. DOM ......................................................................................... 101
6.3. , ..................................................................... 111

7. ...................................................................... 118
7.1. DOM ....................................................................................... 118
7.2. ............................................................................................ 128
7.3. ..................................................................................................................... 138

8. ............................................................................ 144
8.1. .............................................................................................................. 144
8.2. , ............................................................................. 146
8.3. , , ................................................................ 156

9. jQuery AJAX ............................................................... 165


9.1. .......................................................................................................... 165
9.2. $.ajax() $.ajaxSetup() ......................................................... 178
9.3. AJAX ..................................................................................................................... 187
9.4. ................................................................................ 192

10. jQuery ................... 195


10.1. jQuery ............................................... 195
10.2. jQuery ...................................................... 208
10.3. ................................................................. 214

II. JQUERY.............................. 219


11. - .................................................................................. 221
11.1. jQuery Superfish ..................................................................................................... 221

12. .................................................................................. 230


12.1. jqGrid ..................................................................................................................... 230

13. ............................................................................. 250


13.1. jqPlot ...................................................................................................................... 250

14. AJAX- .............................................................................................. 262


14.1. jQuery Form ........................................................................................................... 262
14.2. jQuery Validate ...................................................................................................... 267
14.3. jQuery Uploadify .................................................................................................... 273

15. ............................................................................. 282


15.1. FancyBox ...................................................................................................... 282

16. .............................................................. 297


16.1. jQuery Cookie ...................................................................................................................... 297

16.2. jQuery Timers ...................................................................................................................... 299


16.3. jQuery Cluetip...................................................................................................................... 302

17. UI jQuery ............................................................................... 308


17.1. Accordion .............................................................................................................. 308
17.2. Datepicker .............................................................................................................. 318
17.3. Dialog .................................................................................................................... 329
17.4. Progressbar ............................................................................................................ 337
17.5. Slider ...................................................................................................................... 340
17.6. Tabs ....................................................................................................................... 346
17.7. Button .................................................................................................................... 356
17.8. Autocomplete ......................................................................................................... 361

18. UI jQuery ...................... 370


18.1. Draggable ............................................................................. 370
18.2. Droppable "" ....................................................................................... 379
18.3. Resizable .................................................................. 386
18.4. Selectable .......................................................................................... 392
18.5. Sortable .................................................................................... 399

. - ................................................................. 409
................................................................................................................... 411
.............................................................................................. 412


, , API JavaScript jQuery. UI jQuery , .

, , .
, CSS, HTML JavaScript.
, PHP
, ,
" " AJAX.
,
jQuery UI jQuery.


.
I ,
jQuery, . , :
, , , ,

;
,

;
, UI jQuery;
CSS- ;
jQuery, HTML 5;

, , ,

DOM;
DOM ,

;
, , -

, ;
jQuery AJAX;
jQuery.

II
jQuery, UI
jQuery. :
jQuery

Superfish;
, , -

jqGrid;
-

jqPlot;
AJAX- jQuery Form ( AJAX-),

jQuery Validate ( AJAX-) FileUpload (


);
- FancyBox;
jQuery Cookie (

cookie), jQuery ClueTip ( ), jQuery Timers


( );
UI jQuery Accordion ( ), Datepicker

( ), Dialog ( ), ProgressBar ( ), Slider


( ), Tabs ( ), Button ( ),
Autocomplete ( );
UI jQuery : Draggable (-

), Droppable ("" ), Resizable (


), Selectable ( ), Sortable ( ).
-, .


,
Windows, UNIX .

,
.
, , .
, , .
, .


, , , . ,
, . , :
http://jquery.com/ jQuery (.);
http://api.jquery.com/ jQuery

(.);
http://jqueryui.com/ UI jQuery (.);
http://www.linkexchanger.su ,

jQuery (.);
http://www.linkexchanger.su/forum/ , jQuery, UI jQuery
(.);
http://slyweb.ru/jquerymain/ jQuery (.);
http://plugins.jquery.com/ -

jQuery (.);
http://users.tpg.com.au/j_birch/plugins/superfish/ jQury

Superfish (.);
http://trirand.com/blog/jqgrid/jqgrid.html

jqGrid

(.);
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

jqGrid (.);
http://www.jqplot.com jqPlot (.);
http://malsup.com/jquery/form/ jQuery Form (.);
http://bassistance.de/jquery-plugins/jquery-plugin-validation/ -

jQury Validation ();


http://www.uploadify.com jQuery Uploadify (.);
http://fancybox.net jQuery FancyBox (.);
http://plugins.learningjquery.com/cluetip/ jQuery ClueTip

(.);

10

http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ -

jQuery Cookie (.);


http://jquery.offput.ca/timers/ jQuery Timers (.);
http://firebug.ru , Firebug, -

JavaScript- (.).

, ,
.

jQuery
1.

2.

3.

4.

CSS-

5.

jQuery

6.

7.

8.

9.

jQuery AJAX

10.


jQuery


? ,
- . , CSS , , , ,
, . .
, . ,
, , jQuery.

1.1.

-.

* ( 1.1.1).
1.1.1. *
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
alert($("*").length);
});

14

I. jQuery

</script>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
<p></p>
<div><span></span></div>
</body>
</html>

, ,
, jQuery
-, .
document,
body, head. script . .

-, body, , , .

*,
( 1.1.2).
1.1.2. *
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
alert($("*",document.body).length);
});
</script>
</head>

1.

15

<body>
<ul>
<li></li>
<li></li>
</ul>
<p></p>
<div><span></span></div>
</body>
</html>

. ? 6 13 1.1.1.
, body. body .

id.

id ( 1.1.3).
1.1.3. #id
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#myDiv").css("border","1px solid #f00");
});
</script>
<style type="text/css">
div {
float:left;
width:150px;
height:150px;
border:1px solid #00f;
margin:2px;
}

I. jQuery

16
</style>
</head>
<body>
<div class="myDiv"></div>
<div></div>
<div id="myDiv"></div>
<div><span></span></div>
<div id="otherDiv"></div>
</body>
</html>

, myId,
css(), 1 px,
, .

id .

id, , .
, CSS.

, ( 1.1.4).
1.1.4. #id
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#my\\.Div").css("border","1px solid #f00");
$("#my\\[Div\\]").css("border","1px solid #0f0");
});

1.

17

</script>
<style type="text/css">
div {
float:left;
width:150px;
height:150px;
border:1px solid #00f;
margin:2px;
}
</style>
</head>
<body>
<div></div>
<div id="my.Div"></div>
<div><span></span></div>
<div id="my[Div]"></div>
</body>
</html>

, , css()
. my.Div ,
my[Div] .

- ,
div .

element ( 1.1.5).
1.1.5. element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

18

I. jQuery

$(function(){
$("div").css("border","2px dotted #f00");
});
</script>
<style type="text/css">
div, p { width:150px; height:150px; border:1px solid #00f; margin:2px; }
</style>
</head>
<body>
<div></div>
<p></p>
<div></div>
<p></p>
<div></div>
</body>
</html>

CSS-
p, div.
JavaScript- element
div, -. css(), 2 px.

( ) .

, css ( 1.1.6).
1.1.6. .class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".test").css("border","1px solid #f00");
});
</script>

1.

19

<style type="text/css">
div, p, ul { border:1px solid #00f; margin:2px; }
</style>
</head>
<body>
<div>div</div>
<p class="test">p class="test"</p>
<ul class="test">
<li>li ul class="test"</li>
<li>li ul class="test"</li>
</ul>
<p>p</p>
<div class="test">div class="test"</div>
</body>
</html>

.class ,
test class. css(), 1 px.

,
, .

( 1.1.7).
1.1.7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#item2, p.test, div").css("background-color","#ccc");
});
</script>
<style type="text/css">

20

I. jQuery

div,p,li { border:1px solid #00f; margin:2px; }


</style>
</head>
<body>
<div> div</div>
<p> p</p>
<div> div</div>
<p class="test"> p class="test"</p>
<p> p</p>
<ul id="test">
<li id="item1"> id="item1"</li>
<li id="item2"> id="item2"</li>
</ul>
<p class="test"> p class="test"</p>
<div> div</div>
</body>
</html>

div, p test li item2. , , css().

1.2.

, - .

ancestor descendant ( 1.2.1).


1.2.1. ancestor descendant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">

1.

21

form {
border:2px green solid;
padding:2px;
margin:0;
background:#efe;
}
div {
color:red;
}
fieldset {
margin:1px;
padding:3px;
}
</style>
<script type="text/javascript">
$(function(){
$("form input").css("border", "2px dotted brown");
});
</script>
</head>
<body>
<form>
<div> </div>
<label>:</label>
<input type="text" name="name" />
<fieldset>
<label>:</label>
<input type="text" name="newsletter" />
</fieldset>
</form>
: <input type="text" name="none" />
</body>
</html>

HTML-, 1.2.1, input.


, form. form input,
. input, <form>, .

, -
.

22

I. jQuery

parent > child ( 1.2.2).


1.2.2. parent > child
<script type="text/javascript">
$(function(){
$("form > input").css("border", "2px dotted brown");
});
</script>

1.2.2 JavaScript-, . .
. input,
form, form > input.
input.

, .

prev + next ( 1.2.3).


1.2.3. prev + next
<script type="text/javascript">
$(function(){
$("label + input").css("border", "2px dotted brown");
});
</script>

1.2.3 JavaScript-. prev + next , , input, label. input , label.


input, form, label,
.

1.

23

, , .

prev ~ siblings ( 1.2.4).


1.2.4. prev ~ siblings
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-2-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
form {
border:2px green solid;
padding:2px;
margin:0;
background:#efe;
}
div {
color:red;
}
fieldset {
margin:1px;
padding:3px;
}
</style>
<script type="text/javascript">
$(function(){
$("label ~ fieldset").css("border", "2px dotted brown");
});
</script>
</head>
<body>
<form>
<div> </div>
<label>:</label>
<input type="text" name="name" />
<fieldset>
<label>:</label>

24

I. jQuery

<input type="text" name="newsletter" />


</fieldset>
</form>
: <input type="text" name="none" />
<fieldset>
<input type="text" name="email" />
</fieldset>
</body>
</html>

1.2.4 HTML-,
fieldset, input. label ~ fieldset , fieldset, , ,
fieldset, form, label.

1.3.

:first ( 1.3.1).
1.3.1. :first
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
table {
width:400px;
}
</style>
<script type="text/javascript">

1.

25

$(function(){
$("tr:first").css("background-color","#ccc");
});
</script>
</head>
<body>
<table>
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>
</tr>
<tr>
<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>
</tr>
<tr>
<td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td>
</tr>
</table>
</body>
</html>

HTML-, 1.3.1, . JavaScript-. tr:first,


.

:last ( 1.3.2).
1.3.2. :last
<script type="text/javascript">
$(function(){
$("tr:last").css("background-color","#ccc");
});
</script>

26

I. jQuery

JavaScript- 1.3.2, HTML-


. tr:last .

:even ( 1.3.3).
1.3.3. :even
<script type="text/javascript">
$(function(){
$("tr:even").css("background-color","#ccc");
});
</script>

tr:even , 1.3.3, ( ) .

:odd ( 1.3.4).
1.3.4. :odd
<script type="text/javascript">
$(function(){
$("tr:odd").css("background-color","#ccc");
});
</script>

. , tr:odd , 1.3.4.

1.

27

:eq(index) ( 1.3.5).
1.3.5. :eq(index)
<script type="text/javascript">
$(function(){
$("td:eq(5)").css("background-color","#ccc");
});
</script>

1.3.5 ,
td:eq(5), , .

,
( , ).

:gt(index)( 1.3.6).
1.3.6. :gt(index)
<script type="text/javascript">
$(function(){
$("td:gt(5)").css("background-color","#ccc");
});
</script>

, 1.3.6.
td:gt(5), .

,
( , ).

28

I. jQuery

:lt(index)( 1.3.7).
1.3.7. :lt(index)
<script type="text/javascript">
$(function(){
$("td:lt(5)").css("background-color","#ccc");
});
</script>

. td:lt(5),
.

, , .

:not()( 1.3.8).
1.3.8. :not()
<script type="text/javascript">
$(function(){
$("td:not(:eq(5))").css("background-color","#ccc");
});
</script>

:not() :eq(5), ", ".


.

- , , , h1, h2, h3 . .

:header ( 1.3.9).

1.

29

1.3.9. :header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-3-8</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
table {
width:400px;
}
</style>
<script type="text/javascript">
$(function(){
$(":header").css("background-color","#ccc");
});
</script>
</head>
<body>
<h1> h1</h1>
<p> p</p>
<h3> h3</h3>
<ul>
<li>: 1</li>
<li>: 2</li>
<li>: 3</li>
</ul>
</body>
</html>

HTML-, 1.3.9,
p, ul , , h1 h3. :header, .

,
.

:animated()( 1.3.10).

30

I. jQuery

1.3.10. :animated()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-3-10</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { background-color:#ff0; border:1px solid #aaa; width:80px; height:80px;
margin:0 5px; float:left; }
div.colored { background:#008000; }
</style>
<script type="text/javascript">
$(function(){
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
</head>
<body>
<div></div>
<div id="mover"></div>
<div></div>
<button id="run">Run</button>
</body>
</html>

, 1.3.10, .
. , run
. , , div,
, .

1.4.

, ,
'John'.

1.

31

:contains ( 1.4.1).
1.4.1. :contains
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-4-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div:contains('John')").css("text-decoration", "underline");
});
</script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div>b byJohns a</div>
</body>
</html>

, 1.4.1.
div, . div, 'John',
div:contains('John'), .
CSS text-decoration.

, , .

:empty ( 1.4.2).

32

I. jQuery

1.4.2. :empty
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-4-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("td:empty").css("background-color","rgb(255,204,153)")
});
</script>
</head>
<body>
<table style="width:200px;border:1px solid #000;">
<tr><td>1-1</td><td><span></span></td></tr>
<tr><td>2-1</td><td></td></tr>
<tr><td></td><td>3-2</td></tr>
<tr><td></td><td>4-2</td></tr>
</table>
</body>
</html>

1.4.2 :empty td,


, . . , -,
. , CSS background-color. :empty .

- div, p.

:has()( 1.4.3).
1.4.3. :has()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

1.

33

<head>
<title>example-1-4-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
.test{ border: 3px inset #f00; }
</style>
<script type="text/javascript">
$(function(){
$("div:has(p)").addClass("test");
});
</script>
</head>
<body>
<div><p> p, div</p></div>
<div> div</div>
</body>
</html>

1.4.3 div :has(p). div, p.


, test.

, , .

:parent ( 1.4.4).
1.4.4. :parent
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-4-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
td { background-color:#393; }
</style>
<script type="text/javascript">

34

I. jQuery

$(function(){
$("td:parent").fadeTo(3000, 0.3);
});
</script>
</head>
<body>
<table style="width:200px;border:1px solid #000;">
<tr><td>1-1</td><td><span></span></td></tr>
<tr><td>2-1</td><td></td></tr>
<tr><td></td><td>3-2</td></tr>
<tr><td></td><td>4-2</td></tr>
</table>
</body>
</html>

1.4.4 :parent td,


, . . , -,
. fadeTo(),
CSS- opacity 1 0,3 3000 .
:parent .

1.5.

-
.

:visible :hidden ( 1.5.1).


1.5.1. :visible :hidden
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-5-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { width:50px; height:50px; margin:5px; border:4px outset #00f; float:left; }

1.

35

.starthidden { display:none; }
</style>
<script type="text/javascript">
$(function(){
alert(" ... " +
$(":visible", document.body).length +
"\n ... " +
$(":hidden", document.body).length);
});
</script>
</head>
<body>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
<form>
<input type="hidden" />
<input type="text" />
<input type="hidden" />
</form>
</body>
</html>

1.5.1 . div, CSS- display, form input,


hidden type, . . .
JavaScript-
, . document.body - , :hidden head, title, script . .

:hidden ( ), . ,
CSS.
, 1.5.1
,
.

36

I. jQuery

1.6.

- div, id. .

selector[name] ( 1.6.1).
1.6.1. selector[name]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-6-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { width:100px; height:100px; margin:5px; padding:5px; border:1px solid
#00f; float:left; }
</style>
<script type="text/javascript">
$(function(){
$("div[id]").css({ "border-color": "#f00", "color": "#f00" });
});
</script>
</head>
<body>
<div> div id, class="example"</div>
<div id="test"> div id="test"</div>
<div id="pretest" class="example"> div id="pretest"
class="example"</div>
<div> div id</div>
<div id="testend"> div id="testend"</div>
<div id="sometestvalue"> div id="sometestvalue"</div>
<div> div id</div>
<div id="somevalue"> div id="somevalue"</div>
</body>
</html>

1.6.1 HTML- div.


id class, ,

1.

37

. HTML-
, .
div, id, div[id], .
#f00 CSS- border-color color div, . ""
, , , div.

- div, id
.

selector[name="value"] ( 1.6.2).
1.6.2. selector[name="value"]
<script type="text/javascript">
$(function(){
$("div[id='somevalue']").css({
"border-color": "#f00", "color": "#f00"
});
});
</script>

1.6.2

div[id='somevalue'], , , , id somevalue. ,
div.


1.6.2 .
, , #somevalue.

- div, id .

38

I. jQuery

selector[name!="value"] ( 1.6.3).
1.6.3. selector[name!="value"]
<script type="text/javascript">
$(function(){
$("div[id!='somevalue']").css({
"border-color": "#f00", "color": "#f00"
});
});
</script>

1.6.3 div[id!=
'somevalue'] div, id
somevalue. , div,
id . , ""
div, .

- div,
id .

selector[name^="value"] ( 1.6.4).
1.6.4. selector[name^="value"]
<script type="text/javascript">
$(function(){
$("div[id^='test']").css({
"border-color": "#f00", "color": "#f00"
});
});
</script>

1.6.4, div,
id test, -

1.

39

div[id^='somevalue']. "" div.

- div,
id .

selector[name$="value"] ( 1.6.5).
1.6.5. selector[name$="value"]
<script type="text/javascript">
$(function(){
$("div[id$='test']").css({
"border-color": "#f00", "color": "#f00"
});
});
</script>

1.6.5, div,
id test, div[id$='somevalue']. "" div.

- div,
id .

selector[name*="value"] ( 1.6.6).
1.6.6. selector[name*="value"]
<script type="text/javascript">
$(function(){
$("div[id*='test']").css({
"border-color": "#f00", "color": "#f00"
});
});
</script>

I. jQuery

40

1.6.6, div,
id test,
div[id*='somevalue']. "" , , div. , , , .

- div,
id
class .

[name2="value2"]


( 1.6.7).

selector[name="value"]

1.6.7.
selector[name="value"][name2="value2"]
<script type="text/javascript">
$(function(){
$("div[id*='test'][class='example']").css({
"border-color": "#f00", "color": "#f00"
});
});
</script>

div, id test class example, 1.6.7


div[id*='test'][class='example']. div.

1.7.

- input .

:input ( 1.7.1).

1.

41

1.7.1. :input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-7-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
form { width:450px; }
input { margin-left:75px; }
label { float:right; }
</style>
<script type="text/javascript">
$(function(){
$(":input").prev("label").css("color","#c33");
});
</script>
</head>
<body>
<form>
<label> type="checkbox"</label> <input type="checkbox" /><br />
<label> type="file"</label> <input type="file" /><br />
<label> type="image"</label> <input type="image" /><br />
<label> type="password"</label> <input type="password" /><br />
<label> type="radio"</label> <input type="radio" /><br />
<label> type="reset"</label> <input type="reset" /><br />
<label> type="submit"</label> <input type="submit" /><br />
<label> type="text"</label> <input type="text" /><br />
<label> type="button"</label> <input type="button" value="Button" />
</form>
</body>
</html>

1.7.1 HTML-,
input ,
. :input,
. prev() label , -
.

42

I. jQuery

- input, type
text.

:text ( 1.7.2).
1.7.2. :text
<script type="text/javascript">
$(function(){
$(":text").prev("label").css("color","#c33");
});
</script>

1.7.2 JavaScript-, HTML- . , input


. input text,
:text
label .

- input, type password.

:password ( 1.7.3).
1.7.3. :password
<script type="text/javascript">
$(function(){
$(":password").prev("label").css("color","#c33");
});
</script>

1.7.3 :password ,
.

1.

43


. , . ,
:input, :text :password, :radio, :checkbox,
:submit, :image, :reset, :button :file.
, .

1.8.

- , ,
, . ,
.

:enabled :disabled ( 1.8.1).


1.8.1. :enabled :disabled
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-8-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
form { width:300px; }
input { float:right; margin-bottom:2px; }
br { clear:right; }
</style>
<script type="text/javascript">
$(function(){
$("input:disabled").val("DISABLED");
$("input:enabled").val("ENABLED");
});
</script>
</head>
<body>
<form>
<input type="text" /><label></label><br />
<input type="text" /><label></label><br />
<input type="text" disabled="disabled" /><label> </label><br />
<input type="text" disabled="disabled" /><label> </label><br />
<input type="text" /><label>E-mail </label><br />

44

I. jQuery

</form>
</body>
</html>

HTML- 1.8.1 , ,
disabled disabled. , , .
JavaScript-. input:disabled,
, . val()
, , - .
DISABLED. input:enabled, ,
ENABLED val().

- checkbox.

:checked ( 1.8.2).
1.8.2. :checked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-8-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
form { width:100px; }
input { float:right; margin-bottom:2px; }
br { clear:right; }
</style>
<script type="text/javascript">
$(function(){
function countChecked() {
var n = $("input:checked").length;
$("div").text(" " + n);
}
countChecked();
$(":checkbox").click(countChecked);
});

1.
</script>
</head>
<body>
<form>
<div></div><hr />
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
</form>
</body>
</html>

45

/><label></label><br />
/><label></label><br />
/><label></label><br />
/><label></label><br />
/><label></label><br />
checked="checked" /><label></label><br />
checked="checked" /><label></label><br />

HTML- 1.8.2. checkbox, . div


,
- .
JavaScript-.
checkbox.
checkbox, length() n. div , n
checkbox.
, , click - checkbox.

-
. ,
.

:selected ( 1.8.3).
1.8.3. :selected
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

46

I. jQuery

<head>
<title>example-1-8-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("select").change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();
});
</script>
</head>
<body>
<select name="colors" multiple="multiple">
<option></option>
<option selected="selected"></option>
<option></option>
<option selected="selected"></option>
<option></option>
<option></option>
<option></option>
</select>
<div></div>
</body>
</html>

1.8.3 HTML- select


, , div,
.
JavaScript-. , , select
change, callback. str
. select .
:selected. , each(), , , . ,
str ,
.
div. , ,

1.

47

change() , change .

1.9. -

,
, ,
- , , , - . .

:nth-child(index/even/odd/equation) ( 1.9.1).
1.9.1. :nth-child(index/even/odd/equation)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-9-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
button { width:100px; }
span { color:#00f; font-weight:bold; }
#inner { color:#f00; }
table {
float:left;
margin-left:50px;
border:1px solid #ccc;
}
td {
width:100px;
text-align:center;
border:1px dotted #ccc;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function () {
var str = $(this).text();
$("tr").css("background-color", "#fff");
$("tr" + str).css("background-color", "#f00");

48

I. jQuery

$("#inner").text(str);
});
});
</script>
</head>
<body>
<button>:nth-child(even)</button>
<button>:nth-child(odd)</button>
<button>:nth-child(3n)</button>
<button>:nth-child(2)</button>
<button>:nth-child(3n+1)</button>
<button>:nth-child(3n+2)</button>
<button>:even</button>
<button>:odd</button>
<hr />
<span>tr<span id="inner"></span></span>
<hr />
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</body>
</html>

HTML-, 1.9.1.
,

1.

49

. :even :odd , . . span ,


. , , , .
JavaScript-. jQuery
- button, callback-, click - .
str. tr. , , . .
, .

, tr , str, . . -
. , ,
, span #inner str,
, .
HTML- JavaScript- ,
. .
-, .
:nth-child(even), :even. .
:even, tr, . :nth-child(even)
. , ,
:odd :nth-child(odd).
.

- .

:first-child :last-child ( 1.9.2).


1.9.2. :first-child :last-child
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>

I. jQuery

50

<title>example-1-9-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
span { color:#008; }
</style>
<script type="text/javascript">
$(function(){
$("div span:first-child").css("text-decoration", "underline");
$("div span:last-child").css("text-decoration", "line-through");
});
</script>
</head>
<body>
<div>
<span>,</span>
<span>,</span>
<span></span>
</div>
<div>
<span>,</span>
<span>,</span>
<span></span>
</div>
</body>
</html>

1.9.2 HTML- div,


span. JavaScript- div, span,
:first-child. . span
div, :last-child , .
, .


:first :last, span
div, .

,
, .

1.

51

:only-child ( 1.9.3).
1.9.3. :only-child
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-9-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px;
height:100px;
margin:5px;
padding:5px;
float:left;
background-color:#b9e;
}
</style>
<script type="text/javascript">
$(function(){
$("div button:only-child").text("only-child").css("border", "1px solid #f00");
});
</script>
</head>
<body>
<div>
<button></button>
<button></button>
</div>
<div>
<button></button>
</div>
<div> </div>
<div>
<button></button>
<button></button>
<button></button>
</div>
<div>
<button></button>
</div>

52

I. jQuery

</body>
</html>

HTML- 1.9.3 div.


, button.
div button . JavaScript div button:only-child . .


2.1.
, , . .

href a
title.

attr(), , ( 2.1.1).
2.1.1. attr()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var href = $("a").attr("href"); //
$("a").attr("title", href); //
});

54

I. jQuery

</script>
</head>
<body>
<a href="http://jquery.com"> jQuery</a>
</body>
</html>

HTML-, 2.1.1, .
href. JavaScript-, ,
link.
title.
, , "http://jquery.com",
HTML- title.
, attr() ( ) . .
DOM.

a alt, title href, HTML-.

attr(),
, , ( 2.1.2).
2.1.2. attr(map)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").attr({
"alt": " jQuery",

2.

55

"title": "jQuery.Com",
"href": "http://jquery.com"
}).click(function(){
alert($(this).attr("alt"));
return false;
});
});
</script>
</head>
<body>
<a href="#"> jQuery</a>
</body>
</html>

HTML- 2.1.2 href,


#. JavaScript-. a, attr(map) alt, title href. ,
callback- click a.
alt, , .
, .
"jQuery.Com",
href, . . "http://jquery.com".

p, -, name, .

attr(name, function(index,attr)) ( 2.1.3).


2.1.3. attr(name, function(index,attr))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

56

I. jQuery

<script type="text/javascript">
$(function(){
$("p").attr("name", function(n){
return "pName-" + n;
}).click(function(){
alert("name = " + $(this).attr("name"));
});
});
</script>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

2.1.3 HTML- p - . JavaScript-,


, DOM (Document Object Model, )
. p ,
attr(name, function(index,attr)) name
. , ,
jQuery ( ) . . , , name .
, p click. , ,
name.

input,
disabled disabled.

,
removeAttr(name) ( 2.1.4).

2.

57

2.1.4. removeAttr(name)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function() {
$(this).next().removeAttr("disabled").focus().val("");
});
});
</script>
</head>
<body>
<a href="#"> </a>
<input type="text" disabled="disabled" value=" " />
</body>
</html>

, HTML-, 2.1.4, input, disabled. a,


input .
JavaScript-. a,
click, ,
. .
, this , a, . input, next(),
input. removeAttr(name), disabled input.
input , focus(), "".

2.2. class

-
. , , - , .

58

I. jQuery

jQuery : addClass(), removeClass(), toggleClass() hasClass() ( 2.2.1).


2.2.1. addClass(), removeClass(),
toggleClass() hasClass()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p { border:1px dotted #ccc; }
.test { background-color:#369; color:#fff; }
</style>
<script type="text/javascript">
$(function(){
$("#add").click(function(){
$("p").addClass("test");
});
$("#remove").click(function(){
$("p").removeClass("test");
});
$("#toggle").click(function(){
$("p").toggleClass("test");
});
$("#has").click(function(){
alert($("p:first").hasClass("test"));
});
});
</script>
</head>
<body>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<button id="add"> </button>
<button id="remove"> </button>
<button id="toggle"> </button>
<button id="has"> </button>
</body>
</html>

2.

59

2.2.1 "" ,
CSS- p, ,
, ,
test p.
JavaScript-. click, callback- , , . , , addClass() p test,
. p . toggleClass(),
test.
hasClass(), true
, , false .

2.3. HTML

- HTML .

jQuery html()
text() ( 2.3.1).
2.3.1. html() text()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
alert($("#test").text());
});
$("button:last").click(function(){
alert($("#test").html());
});
});

60

I. jQuery

</script>
</head>
<body>
<div id="test">
<p> , , .
. , , ,
, .</p>
<p><em> </em></p>
</div>
<button> </button>
<button> HTML</button>
</body>
</html>

"" 2.3.1 div test, HTML-.


HTML, click,
text() html(),
div , .

, HTML-.

jQuery html(val)
text(val) ( 2.3.2).
2.3.2. html(val) text(val)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-2-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
#test { border:1px dotted #369; padding:5px; }
</style>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
var txt = $("div:first").text();

2.

61

$("#test").text(txt);
});
$("button:last").click(function(){
var code = $("div:first").html();
$("#test").html(code);
});
});
</script>
</head>
<body>
<div>
<p> , , .
. , , ,
, .</p><p><em> </em></p>
</div>
<button> </button>
<button> HTML</button>
<div id="test"> div html</div>
</body>
</html>

2.3.2 div HTML- HTML. click,


div div test
HTML-. HTML-
, .

2.4. value

( input) , p.

val() ( 2.4.1).
2.4.1. val()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

62

I. jQuery

<head>
<title>example-2-4-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p { border:1px dotted #369; padding:5px; color:#00f; }
</style>
<script type="text/javascript">
$(function(){
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
});
</script>
</head>
<body>
<input type="text" value="- "/>
<p></p>
</body>
</html>

HTML- 2.4.1 input, value . p


.
JavaScript-. input keyup, value val() p. keyup , value input p .

value input text.

val(val) ( 2.4.2).
2.4.2. val(val)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>

2.

63

<title>example-2-4-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("button").click(function () {
var txt = $(this).text();
$("input").val(txt);
});
});
</script>
</head>
<body>
<div>
<button></button>
<button></button>
<button></button>
</div>
<input type="text" value=" " />
</body>
</html>

2.4.2 input, value .


JavaScript button
click. , ,
txt.
val(val)
, .

value radio, checkbox


select.

val() ( 2.4.3).
2.4.3. val()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

64

I. jQuery

<head>
<title>example-2-4-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p { border:1px dotted #369; padding:5px; color:#00f; }
</style>
<script type="text/javascript">
$(function(){
$("#getSingle").click(function(){
var single = $("#single option:selected").val();
$("p").empty().text(single);
});
$("#getMultiple").click(function(){
var multiple = $("#multiple").val();
$("p").empty().text(multiple.join(", "));
});
$("#getCheckbox").click(function(){
var checkbox = $("input:checkbox:checked").val();
$("p").empty().text(checkbox);
});
$("#getRadio").click(function(){
var radio = $("input:radio[name=r]:checked").val();
$("p").empty().text(radio);
});
});
</script>
</head>
<body>
<p></p>
<select id="single">
<option value="s1">Single1</option>
<option value="s2">Single2</option>
<option value="s3">Single3</option>
<option value="s4">Single4</option>
<option value="s5">Single5</option>
</select>
<select id="multiple" multiple="multiple">
<option value="m1" selected="selected">Multiple1</option>
<option value="m2">Multiple2</option>
<option value="m3" selected="selected">Multiple3</option>
<option value="m4">Multiple4</option>
<option value="m5">Multiple5</option>
</select><br />
<input type="checkbox" name="c" value="check" checked="checked"
/><label>check</label><br />
<input type="radio" name="r" value="radio1" /><label>radio1</label>
<input type="radio" name="r" value="radio2" /><label>radio2</label>

2.

65

<input type="radio" name="r" value="radio3" checked="checked"


/><label>radio3</label><hr />
<button id="getSingle">select #single</button>
<button id="getMultiple">select #multiple</button>
<button id="getCheckbox">checkbox</button>
<button id="getRadio">radio</button>
</body>
</html>

, 2.4.3. HTML- , . p
. select,
.
checkbox radio. HTML- button,
.
JavaScript-. click
-.
, - val(), , ,
.
, ,
#getMultiple.
multiple select. ,
val() . p, empty() ,
multiple,
join().

-
select, checkbox radio.

val(val) ( 2.4.4).
2.4.4. val(val)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

66

I. jQuery

<head>
<title>example-2-4-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#single").val("Single3");
$("#multiple").val(["Multiple2", "Multiple4", "Multiple5"]);
$("input").val(["check", "radio3"]);
});
</script>
</head>
<body>
<select id="single">
<option>Single1</option>
<option>Single2</option>
<option>Single3</option>
<option>Single4</option>
<option>Single5</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple1</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
<option>Multiple4</option>
<option>Multiple5</option>
</select><br />
<input type="checkbox" name="c" value="check" /><label>check</label><br />
<input type="radio" name="r" value="radio1" /><label>radio1</label>
<input type="radio" name="r" value="radio2" /><label>radio2</label>
<input type="radio" name="r" value="radio3" /><label>radio3</label>
</body>
</html>

HTML- 2.4.4 select, checkbox radio.


, JavaScript-. DOM
. , select #single val(val),
"Single3", , , .
#multiple, val(val) . checkbox radio , HTML- input .


, , .
/ . CSS- , .

3.1.

, / - .

jQuery hide(), show() toggle() ( 3.1.1).


3.1.1. hide(), show() toggle()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border:1px dotted #369; padding:5px; color:#00f; }
</style>
<script type="text/javascript">

68

I. jQuery

$(function(){
$("button:eq(0)").click(function(){
$("#test").hide();
});
$("button:eq(1)").click(function(){
$("#test").show();
});
$("button:eq(2)").click(function(){
$("#test").toggle();
});
});
</script>
</head>
<body>
<button>Hide</button><button>Show</button><button>Toggle</button>
<div id="test">
<p> , , .
. , , ,
, .</p>
<p><em> </em></p>
</div>
</body>
</html>

3.1.1 HTML- (
) div test ( ).
JavaScript-.
click,
, test. , Hide
, Show .
Toggle .

, / , -,
. / - .

hide(), show() toggle().


, ( 3.1.2).

3.

69

3.1.2. hide(), show() toggle()


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border:1px dotted #369; padding:5px; color:#00f; }
.result { border-bottom:1px dotted #369; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("#test").hide(1000,function(){ $("p:first").text("hide"); });
});
$("button:eq(1)").click(function(){
$("#test").show(2000,function(){ $("p:first").text("show"); });
});
$("button:eq(2)").click(function(){
$("#test").toggle(800,function(){ $("p:first").text("toggle"); });
});
});
</script>
</head>
<body>
<p class="result">&nbsp;</p>
<button>Hide</button><button>Show</button><button>Toggle</button>
<div id="test">
<p> , , .
. , , ,
, .</p>
<p><em> </em></p>
</div>
</body>
</html>

HTML-, 3.1.2, Hide, Show, Toggle div test p. ,


.
JavaScript-, , 3.1.1,
click, -

I. jQuery

70

test ,
. , 3.1.1, . , , / . , .
p HTML- , .

hide(), show() toggle()
easing, / , show(3000, 'swing', fn). swing linear. , easing. . http://jqueryui.com/demos/effect/
#easing.

3.2. "" ""


"".

jQuery
slideUp(), slideDown() slideToggle() ( 3.2.1).
3.2.1. slideUp(), slideDown() slideToggle()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border:1px dotted #369; padding:5px; color:#00f; }
.result { border-bottom:1px dotted #369; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("#test").slideUp(1000,function(){ $("p:first").text("slideUp"); });
});

3.

71

$("button:eq(1)").click(function(){
$("#test").slideDown(2000,function(){ $("p:first").text("slideDown"); });
});
$("button:eq(2)").click(function(){
$("#test").slideToggle(800,function(){ $("p:first").text("slideToggle");
});
});
});
</script>
</head>
<body>
<p class="result">&nbsp;</p>
<button>Hide</button><button>Show</button><button>Toggle</button>
<div id="test">
<p> , , .
. , , ,
, .</p>
<p><em> </em></p>
</div>
</body>
</html>

HTML-, 3.2.1,
Show, Hide Toggle, div, ,
p, - .
JavaScript- 3.1.2 click slideUp(),
slideDown() slideToggle(),
test. : , ( ) , , . , 3.1.2,
p.

slideUp(), slideDown() slideToggle() easing, / , slideDown (3000, 'swing', fn).
swing linear.
easing. . http://jqueryui.com/demos/effect/#easing.

"".

72

I. jQuery

fadeOut(), fadeIn() fadeToggle() ( 3.2.2).


3.2.2. fadeOut(), fadeIn() fadeToggle()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border:1px dotted #369; padding:5px; color:#00f; }
.result { border-bottom:1px dotted #369; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("#test").fadeOut(2500,function(){ $("p:first").text("fadeOut"); });
});
$("button:eq(1)").click(function(){
$("#test").fadeIn(2500,function(){ $("p:first").text("fadeIn"); });
});
$("button:eq(2)").click(function(){
$("#test").fadeToggle(800,function(){
$("p:first").text("fadeToggle");
});
});
});
</script>
</head>
<body>
<p class="result">&nbsp;</p>
<button>Hide</button><button>Show</button><button>Toggle</button>
<div id="test">
<p> , , .
. , , ,
, .</p>
<p><em> </em></p>
</div>
</body>
</html>

HTML- 3.2.2 . JavaScript- . fadeIn(), fadeOut()

3.

73

, , , .
fadeToggle()


fadeIn(), fadeOut() fadeToggle() easing, / , fadeIn(3000, 'swing', fn).
swing linear.
easing. . http://jqueryui.com/demos/effect/#easing.

- , .

fadeTo() ( 3.2.3).
3.2.3. fadeTo()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-2-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border:1px dotted #369; padding:5px; color:#00f; }
.result { border-bottom:1px dotted #369; }
</style>
<script type="text/javascript">
$(function(){
$("p:first").one("click", function(){
$(this).fadeTo("slow",0.33,function(){ alert("!"); });
});
});
</script>
</head>
<body>
<p> .</p>
<p> .</p>
</body>
</html>

74

I. jQuery

HTML-, 3.2.3, .

, . . .
JavaScript-?
p:first click, .
fadeTo(), . slow , ( slow, normal fast ).
, ( 0 1). , .
, , , "",
"!".

3.3.

div
50 .

animate() ( 3.3.1).
3.3.1. animate()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
position:absolute;
background-color:#369;
left:100px;
width:90px;
height:90px;
margin:5px;
}
</style>

3.

75

<script type="text/javascript">
$(function(){
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
});
</script>
</head>
<body>
<button id="left"></button><button id="right"></button>
<div class="block"></div>
</body>
</html>

HTML-, 3.3.1,
, div, . click .
block animate().
,
.
, /,
CSS- .
left, 50 ( )
.

. ( ),
.

, .


div, CSS-
. .

animate() stop() ( 3.3.2).

76

I. jQuery

3.3.2. animate() stop()


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px;
border:1px solid #369;
padding:5px;
}
</style>
<script type="text/javascript">
$(function(){
$("#go").click(function(){
$("#block").animate({
"width": "70%",
"opacity": 0.3,
"marginLeft": "5em",
"fontSize": "3em",
"borderWidth": "10px"
}, 2500, function(){ alert("!"); } );
});
$("#stop").click(function(){
$("#block").stop();
});
});
</script>
</head>
<body>
<button id="go"></button>
<button id="stop"></button>
<div id="block">Hello!</div>
</body>
</html>

HTML-, 3.3.2, div, , ,


.
JavaScript-. .
click #go. -

3.

77

#block
animate(). , CSS-
, .
!
, ,
, , CSS, ,
. camel case.

, . ,
"!".
, . click #stop.
div #block stop(), .

,
, .

animate() ( 3.3.3),

. CSS-, .
3.3.3. animate()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
position:absolute;
background-color:#69c;
left:100px;
width:90px;

I. jQuery

78
height:90px;
margin:5px;
border:1px solid #369;

}
</style>
<script type="text/javascript">
$(function(){
$("#go").click(function(){
$("div").animate({ width:"300px" }, { queue:false, duration:3000 })
.animate( { height:"400px" }, 1500 )
.animate( { borderWidth:"15px" }, 1500);
});
});
</script>
</head>
<body>
<button id="go"></button>
<div class="block"></div>
</body>
</html>

HTML-, 3.3.3, , , div, .


click. -,
, div,
animate(), , , .
,
. ,
queue:false
, duration:3000 , .
. , step ,
, complete , .

3.

79

delay() ( 3.3.4).
3.3.4. delay()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-3-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$("div.first").slideUp(700).fadeIn(1500);
$("div.second").slideUp(700).delay(1000).fadeIn(1500);
});
});
</script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
</body>
</html>

HTML-, 3.3.4, : div


button. click,
. , div fadeIn()
slideUp().
"" 1 .

3.4. UI jQuery

, , . .

80

I. jQuery

UI jQuery , . 14,
, show(), hide() toggle().
explode hide() 3.4.1.
3.4.1. explode hide()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-4-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js"
type="text/javascript"></script>
<style type="text/css">
div {
position:absolute;
top:200px; left:200px;
width:200px; height:200px;
border:1px solid #369; background-color:#69c;
}
</style>
<script type="text/javascript">
$(function(){
$("div").click(function(){
$(this).hide(
"explode",
{ pieces: 4 },
1200,
function(){ alert("!"); }
);
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>

, 3.4.1,
head. , jQuery

3.

81

( js/ jquery-1.4.4.min.js), js/jquery-ui1.8.10.custom.min.js. Effects , .


http://jqueryui.com/download, .
HTML- div, CSS-
, , , . .
JavaScript-.
explode, show(), hide()
toggle().
div click, - . ?
, , hide(), , :
.
, .
pieces 4 div "" . ,
. , .
.
-, ,
UI jQuery http://jqueryui.com/demos/effect/.
3.4.2 bounce.
3.4.2. bounce
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-4-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<style type="text/css">
div {
position:absolute;
top:200px; left:200px;
width:200px; height:200px;
border:1px solid #369; background-color:#69c;
}
</style>
<script type="text/javascript">

I. jQuery

82

$(function(){
$("div").click(function(){
$(this).effect(
"bounce",
{ times:7, distance:50, direction:"right" },
300,
function(){ alert("!"); }
);
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>

3.4.1,
. UI jQuery http://
jqueryui.com/download.
"" div, - . , div effect(),
( , ). .
, .
. ,
.
-, ,
UI jQuery http://jqueryui.com/demos/effect/.
. 3.1 .
3.1. UI jQuery

blind

direction mode. direction vertical


( ) horizontal. mode show hide
( )

bounce

direction, distance, mode times.


direction left, right, up ( ) down.
distance ( 20). mode show, hide
effect ( ). times ( 5)

clip

, blind

3.

83
3.1 ()

drop

direction mode. direction left


( ), right, up, down. mode show hide
( )

explode

pieces mode. pieces ( 9). mode show hide ( )

fold

horizFirst, mode size. horizFirst


true false ( ). mode show hide
( ). size ( 15)

highlight

color mode. color


( #ffff99). mode show ( ) hide

puff

percent mode. percent ( 150). mode show hide ( )

pulsate

times mode. times ( 5). mode show ( ) hide

scale

direction, from, origin, percent scale.


direction both ( ), vertical horizontal. from
{height:., width:.}, .
. origin , .
[middle, center]. percent (
0/100). scale both ( ), box content

shake

direction, distance times. direction


left ( ), right, up down. distance
( 20). times ( 3)

size

from, to, origin scale. from {height:.,


width:.}, . .
to {height:., width:.}, . origin , .
[middle, center]. scale both ( ), box
content

slide

direction, distance mode. direction


left ( ), right, up down. distance
( ). mode show
hide ( )

transfer

className to. className .


to , jQuery-

CSS-
4.1.
CSS-

- ,
, CSS- background-color.

css() ( 4.1.1).
4.1.1. css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-4-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script type="text/javascript">
$(function(){
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").text(" background-color = " + color);
});
});

4. CSS-

85

</script>
</head>
<body>
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>

HTML-, 4.1.1, div, , span, .


JavaScript- div, , - click. , ,
css(), color.
span color.
, , color , .
css() CSS-, .

- .

css() ( 4.1.2).
4.1.2. css()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-4-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">

86

I. jQuery

div { width:150px; height:150px; margin:5px; float:left; border:1px solid #369; }


</style>
<script type="text/javascript">
$(function(){
$("button").click(function () {
var color = $("input").val();
$("div").css("background-color", color);
});
});
</script>
</head>
<body>
<input type="text" />
<button></button>
<div></div>
</body>
</html>

4.1.2 HTML-, ,
, ,
JavaScript-, . div, CSS-, width, height border.
.
, JavaScript- button , input val(),
color. div,
CSS- background-color css().
css() CSS- ,
.

CSS- - , , a .

css() ( 4.1.3).
4.1.3. css(properties)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

4. CSS-

87

<head>
<title>example-4-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
a { color:#000; background-color:#eee; }
</style>
<script type="text/javascript">
$(function(){
$("a").hover(
function(){
$(this).css({
"background-color":"#999",
"color":"#fff",
"font-weight":"bold"
});
},
function(){
$(this).css({
"background-color":"#eee",
"color":"#000",
"font-weight":"normal"
});
}
);
});
</script>
</head>
<body>
<a href="http://jquery.com/"> jQuery</a><br />
<a href="http://jqueryui.com/">UI jQuery</a><br />
<a href="http://blog.jqueryui.com/"> UI jQuery</a>
</body>
</html>

HTML-, 4.1.3,
a,
CSS.
, ,
, .
hover(), .
a,
. CSS-, .
.

88

I. jQuery

this a,
, , ,
, css(), CSS , . . a.
- ,
,
(- ,
).
css()
CSS-, .

4.2.

-
. .

jQuery , ( 4.2.1).
4.2.1. width(), height() .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-4-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:120px; height:110px;
margin:15px; padding:10px;
border:1px dotted #f00;
overflow:hidden;
}
button { width:170px; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("input").val($("div").width());
});

4. CSS-

89

$("button:eq(1)").click(function(){
$("input").val($("div").height());
});
$("button:eq(2)").click(function(){
$("input").val($("div").innerWidth());
});
$("button:eq(3)").click(function(){
$("input").val($("div").innerHeight());
});
$("button:eq(4)").click(function(){
$("input").val($("div").outerWidth(true));
});
$("button:eq(5)").click(function(){
$("input").val($("div").outerHeight());
});
$("button:eq(6)").click(function(){
$("div").width($("input").val()*1);
});
$("button:eq(7)").click(function(){
$("div").height($("input").val()*1);
});
});
</script>
</head>
<body>
<button> width</button>
<button> height</button>
<button> innerWidth</button>
<button> innerHeight</button>
<button> outerWidth</button>
<button> outerHeight</button>
<br /><br />
<input type="text" />
<button> width</button>
<button> height</button>
<div> div</div>
</body>
</html>

, 4.2.1, -, , . , input div.


div, input , , .

90

I. jQuery

JavaScript : click. callback-, () div input. , , , input,


() div.
. , , input, . , val()
, width(val) height(val) . JavaScript, .
()?
width() , . . (padding), (border) (margin). innerWidth()
(padding). outerWidth()
, (padding), (border) (margin). , :
height(), innerHeight() outerHeight().
,
outerHeight(). , . : CSS.

4.3.

CSS- top left ,


, -.

offset() position() ( 4.3.1).


4.3.1. offset() position()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-4-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
position:relative;

4. CSS-

91

top:20px; left:40px;
width:200px; height:200px;
border:1px solid #f00;
padding:10px;
}
.inner {
width:60px; height:60px;
margin:5px; float:left;
border:1px solid #369;
}
br { clear:left; }
p { margin-left:40px; }
</style>
<script type="text/javascript">
$(function(){
$("div.inner").click(function(){
var o = $(this).offset();
$("p:first span").text("left: " + o.left + "px, top: " + o.top + "px");
var p = $(this).position();
$("p:last span").text("left: " + p.left + "px, top: " + p.top + "px");
});
});
</script>
</head>
<body>
<div id="main">
<div class="inner"></div>
<div class="inner"></div>
<br />
<div class="inner"></div>
<div class="inner"></div>
</div>
<br />
<p>Offset <span>left: ?px, top: ?px</span></p>
<p>Position <span>left: ?px, top: ?px</span></p>
</body>
</html>

HTML-, 4.3.1, div


#main - div, inner.
CSS , . p span CSS- top left div, div#main,
.

92

I. jQuery

, JavaScript-. div
inner, div.inner,
click. , this
, ,
offset() position(), o p .
, top left . , top left , offset(), ,
, position(), -.
span,
.

- , , 150 ,
300.

scrollTop()
scrollLeft() ( 4.3.2).
4.3.2. scrollTop() scrollLeft()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-4-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
#demo {
width:300px; height:200px;
overflow:auto;
border:1px solid #369;
}
p {
width:1000px;
background-color:#ddd;
border-bottom:1px dotted #69c;
}
</style>

4. CSS-

93

<script type="text/javascript">
$(function(){
$("#demo").scrollTop(150).scrollLeft(300);
$("button").click(function(){
var d = $("#demo");
alert("scrollTop = " + d.scrollTop() + ", scrollLeft = " + d.scrollLeft());
});
});
</script>
</head>
<body>
<div id="demo">
<p> ... .</p>
<p> ... ,</p>
<p> ... ,</p>
<p> ... .</p>
<p> ... ,</p>
<p> ... .</p>
<p> ... .</p>
<p> ... .</p>
</div>
<button> scrollTop scrollLeft</button>
</body>
</html>


4.3.2 ( ).
- , .

HTML-, 4.3.2, div


#demo, CSS- width height
(300 200 ). auto,
overflow, . ,
div p 1000 , div , .
JavaScript- #demo scrollTop() scrollLeft(),
150 300. , , .
button, click,
.
.

jQuery
5.1.

, ,
.
.

data(key,value), data(key)
removeData([name]) ( 5.1.1).
5.1.1. data() removeData()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-5-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div:first").data("employee", {
name: "",
age: 27,
phone: "+7(903)217-77-77"
});
$("button:first").click(function(){
$("p span:eq(0)").text($("div:first")
.data("employee").name);

5. jQuery

95

$("p span:eq(1)").text($("div:first")
.data("employee").age);
$("p span:eq(2)").text($("div:first")
.data("employee").phone);
});
$("button:last").click(function(){
$("p span").empty();
$("div:first").removeData("employee");
});
});
</script>
</head>
<body>
<div></div>
<p>: <span></span>, <span></span> , :
<span></span></p>
<button> </button><button> </button>
</body>
</html>

HTML-, 5.1.1. div .


,
-. p span , , .
JavaScript-. div,
, data().
,
.
. ,
- (, ).
div, p
. ,
HTML- .
div
span p. , .
button:first, , click,
-.

96

I. jQuery

? span,
p, text() - .
? .
.
div:first, , div, . data(),
, , employee. ,
name.
span .
p, , ": , 27 ,
: +7(903)217-77-77".
div.
button:last, click. - empty()
span p ( , ). div
removeData(), , .
, , . . div .
, 1.4.3 data()
, , .

- data,
HTML 5. jQuery
.

data() ( 5.1.2).
5.1.2. data() HTML 5
<!DOCTYPE html>
<html>
<head>
<title>example-5-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

5. jQuery

97

<script type="text/javascript">
$(function(){
$("li").hover(
function(){
var def = $(this).data("definition");
var clr = $(this).data("color");
var txt = $(this).text();
$("p").text(txt + ' (' + def + ') - ' + clr);
},
function(){ $("p").empty(); }
);
});
</script>
</head>
<body>
<ul>
<li data-definition="" data-color=""></li>
<li data-definition="" data-color=""></li>
<li data-definition="" data-color=""></li>
</ul>
<p></p>
</body>
</html>

5.1.2 li ul. ,
data .
HTML- . data() jQuery
.
JavaScript-. li data, ,
. p
. li p
.


6.1.

- .

text()( 6.1.1).
6.1.1. text()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p {
margin:5px;
padding:5px;
border-bottom:1px dotted #369;
}
</style>
<script type="text/javascript">
$(function(){
$("p").text(" <a href='#'>html-</a>,
.");
});
</script>

6.

99

</head>
<body>
<p></p>
</body>
</html>

HTML- 6.1.1 p, .
JavaScript . p
text(), .
!
, HTML-, ,
.

1.4, text() ,
, .
, 6.1.2.
6.1.2. text()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("ul li").text(function(index,text) {
return text + ' - ' + (index + 1);
});
});
</script>
</head>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>

100

I. jQuery

JavaScript-, , .

HTML- - .

html() ( 6.1.3).
6.1.3. html()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p {
margin:5px;
padding:5px;
border-bottom:1px dotted #369;
}
</style>
<script type="text/javascript">
$(function(){
$("p").html(" <a href='#'>html-</a>,
.");
});
</script>
</head>
<body>
<p></p>
</body>
</html>

HTML- 6.1.3 p, 6.1.1,


HTML-.
JavaScript. p
html(), .

6.

101

!
, HTML-, .

, text(), html(), 1.4, , HTML-, .

6.2. DOM

- ,
, HTML-. , .

append()( 6.2.1).
6.2.1. append()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p {
margin:10px;
border-bottom:1px dotted #369;
}
em {
color:#00f;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(function(){
$("p").append("<em>! </em>");
});
</script>
</head>
<body>
<p> </p>
</body>
</html>

102

I. jQuery

HTML-, 6.2.1, p, . JavaScript-


p, append(), HTML-.
p, .
append() .

HTML-, .

- ,
, HTML-. , .

prepend() ( 6.2.2).
6.2.2. prepend()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p {
margin:10px;
border-bottom:1px dotted #369;
}
em {
color:#00f;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(function(){
$("p").prepend("<em>, </em>");
});
</script>
</head>

6.

103

<body>
<p> !</p>
</body>
</html>

HTML-, 6.2.2, p, . JavaScript-


p, prepend(),
HTML-.
p, .
prepend() .

HTML-, .

- .

appendTo() ( 6.2.3).
6.2.3. appendTo()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
margin:5px;
padding:5px;
border:1px dotted #369;
}
span {
color:#fff;
font-weight:bold;
background-color:#e4ae00;
margin:0 5px;
padding:0 5px;
}

104

I. jQuery

</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$("span").appendTo("#test");
});
});
</script>
</head>
<body>
<span> span</span>
<span> span</span>
<div id="test"> span --></div>
<button></button>
</body>
</html>

HTML- 6.2.3 span, div


#test button.
span div .
JavaScript-. button click. -, span
appendTo().
#test, span div .

, . ,
.

-
.

prependTo() ( 6.2.4).
6.2.4. prependTo()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

6.

105

<head>
<title>example-6-2-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
margin:5px;
padding:5px;
border:1px dotted #369;
}
span {
color:#fff;
font-weight:bold;
background-color:#e4ae00;
margin:0 5px;
padding:0 5px;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$("span").prependTo("div.test");
});
});
</script>
</head>
<body>
<span> span</span>
<span> span</span>
<div class="test"><-- span</div>
<div class="test"><-- span</div>
<button></button>
</body>
</html>

HTML- 6.2.4 span,


div test button.
span div
.
JavaScript-. button click. , span
prependTo(). div.test, span div
.

106

I. jQuery

, , . ,
span div.test .

HTML- .

before() after() ( 6.2.5).


6.2.5. before() after()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
input { margin-bottom:2px; }
label { margin-right:10px; }
em { color:#f00; }
</style>
<script type="text/javascript">
$(function(){
$("form input:text").before("<label>:</label>")
.after("<em>*</em>");
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="name" /><br />
<input type="submit" value="" /><br />
</form>
</body>
</html>

HTML-, 6.2.5, , .

6.

107

input text , *,
.
, JavaScript-. , form input:text, before() after(). HTML-, label
, HTML- em *.
, .
before() after() .

.

HTML- .

, 6.2.5. ( 6.2.6), ,
insertBefore() insertAfter().
6.2.6. insertBefore() insertAfter()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
input { margin-bottom:2px; }
label { margin-right:10px; }
em { color:#f00; }
</style>
<script type="text/javascript">
$(function(){
$("<em>*</em>").insertAfter("form input:text");
$("<label>:</label>").insertBefore("form input:text");
});
</script>
</head>
<body>
<form action="#" method="post">

108

I. jQuery

<input type="text" name="name" /><br />


<input type="submit" value="" /><br />
</form>
</body>
</html>

HTML-, 6.2.6, , * .
JavaScript-. HTML-
(* em label),
insertAfter() insertBefore(),
form input:text.
JavaScript- , , .

HTML- -.
a, , , <li> , , <strong>.
, li ul.

wrap(),
wrapInner() wrapAll() ( 6.2.7).
6.2.7. wrap(), wrapInner() wrapAll()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
ul {
width:200px;
border:1px solid #666;
padding:20px;
}

6.

109

li {
border-bottom:1px dotted #369;
padding-left:5px;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$("a").wrapInner("<strong></strong>").wrap("<li></li>");
$("li").wrapAll("<ul></ul>");
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.msn.com">MSN</a>
<a href="http://www.yandex.ru">Yandex</a>
<a href="http://www.rambler.ru">Rambler</a>
<button> </button>
</body>
</html>

HTML-, 6.2.7, , . , HTML- .


JavaScript-.
button click.
- .
a. ,
wrapInner(), HTML- strong.
a ""
strong. wrap(). HTML- li a
"" li.
"" li ul. li , , . li , wrapAll(),
HTML- ul. ""
HTML-.

-.

110

I. jQuery

1.4, wrap() wrapInner()


. . this
.

HTML- -
.

wrap() unwrap() ( 6.2.8).


6.2.8. wrap() unwrap()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-2-8</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border: 2px solid #00f; }
p { background-color:#ff0; margin:4px; }
</style>
<script type="text/javascript">
$(function(){
$("button").toggle(function(){
$("p").wrap("<div></div>");
}, function(){
$("p").unwrap();
});
});
</script>
</head>
<body>
<button>/</button>
<p>Hello</p>
<p>World</p>
</body>
</html>

HTML- 6.2.8 p.
/

6.

111

p. div, CSS- .
JavaScript-. toggle()
, ( 8).
p div,
unwrap() p.

6.3. ,

- HTML.

replaceWith() ( 6.3.1).
6.3.1. replaceWith()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
button { display:block; width:200px; }
div {
color:#369;
border:1px solid #369;
width:200px;
margin:3px;
text-align:center;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
});

112

I. jQuery

</script>
</head>
<body>
<button></button>
<button></button>
<button></button>
</body>
</html>

HTML- 6.3.1 .
, . . button
div, , , div.
- click button,
, -. this , . , replaceWith(),
HTML- div.
<div> , ,
-.
, , 1.4, replaceWith() .

, HTML-.

, 6.3.1, replaceAll() ( 6.3.2).


6.3.2. replaceAll()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

6.

113

<style type="text/css">
button { display:block; width:200px; }
p {
border-bottom:1px dotted #369;
color:#369;
}
div {
border-bottom:1px dotted #00f;
color:#00f;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$("<div> div</div>").replaceAll("p");
});
});
</script>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<button></button>
</body>
</html>

HTML- 6.3.2
.
p div.
JavaScript-, - click.
HTML-, p.
replaceAll(), p.

-, .
.

empty() remove()
( 6.3.3).

114

I. jQuery

6.3.3. empty() remove()


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p, div {
width:200px; height:25px;
border:1px dotted #369;
padding-left:5px;
margin:1px;
color:#369;
}
</style>
<script type="text/javascript">
$(function(){
$("button:first").click(function() {
$("p").empty();
});
$("button:last").click(function() {
$("p").remove();
});
});
</script>
</head>
<body>
<p> </p>
<div> div</div>
<p> <em></em></p>
<div> div</div>
<p><a href="#"></a> </p>
<div> div</div><br />
<button></button>
<button></button>
</body>
</html>

HTML-, 6.3.3,
p div, .
p,
p.

6.

115

button:first,
button:last. click. , p.
empty(), . remove(), .

, , .

clone() ( 6.3.4).
6.3.4. clone()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-3-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
button { width:120px; }
</style>
<script type="text/javascript">
$(function(){
$("button:first").click(function() {
$(this).clone().insertAfter(this);
});
$("button:last").click(function() {
$(this).clone(true).insertAfter(this);
});
});
</script>
</head>
<body>
<button>clone()</button>
<hr />
<button>clone(true)</button>
</body>
</html>

6.3.4 HTML- .
click. - -

116

I. jQuery

, this , , clone(), jQuery, . ,


. , insertAfter(), , . . , , .
,
clone() ,
true, , , , .
-, , , clone() ,
.
clone(true) , , .

, , . ,
, - , ,
.

detach([selector]) ( 6.3.5).
6.3.5. detach()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-3-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p, div {
width:250px; height:25px; border:1px dotted #369;
padding-left:5px; margin:1px; color:#369;
}
.off { background-color:#369; }
</style>
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).toggleClass("off");
});

6.

117

var p;
$("button").click(function() {
if(p) {
p.insertAfter("div:first");
p = null;
} else {
p = $("p").detach();
}
});
});
</script>
</head>
<body>
<div> <strong>div</strong></div>
<p> </p>
<p id="two"> <em></em></p>
<p><a href="#"></a> </p>
<div> <strong>div</strong></div>
<button>/ </button>
</body>
</html>

HTML-, 6.3.5, p div.


p, ,
.
JavaScript-, p
click, toggleClass()
.
p, / .
p,
div HTML-,
detach(), p, .
,
. / ,
.
, , , . .
,
click, .


7.1. DOM

- / , / . , "
DOM".


jQuery next(), prev(), nextAll() prevAll() ( 7.1.1).
7.1.1. next(), prev(), nextAll() prevAll()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:500px; padding:10px;
margin:10px; border:2px solid #ccc;
}
p { border:2px solid #ccc; padding:0 5px; }
#main { background-color:#ddd; }
</style>

7.

119

<script type="text/javascript">
$(function(){
$("#main").next().css("border-color","#f00");
$("#main").prev().css("border-color","#0c0");
$("#main").nextAll().css("color","#f00");
$("#main").prevAll().css("color","#0c0");
});
</script>
</head>
<body>
<p> p div</p>
<p> p div</p>
<div>
<p> p div</p>
<p> p div</p>
<p> p div</p>
<p id="main"> p #main div</p>
<p> p div</p>
<p> p div</p>
<p> p div</p>
</div>
<p> p div</p>
<p> p div</p>
</body>
</html>

HTML-, 7.1.1. , , p #main. DOM , , , . , #main, div.


, div, ,
p.
JavaScript-.
: #main. next() prev(), ,
DOM, .
nextAll() prevAll(),
, #main DOM , DOM .
, .

120

I. jQuery

- ,
/ ,
, .
.

nextUntil() prevUntil()
( 7.1.2).
7.1.2. nextUntil() prevUntil()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#term-2").nextUntil("dt").css("color", "#f00");
$("#term-2").prevUntil("dt").css("color", "#00f");
});
</script>
</head>
<body>
<dl>
<dt> 1</dt>
<dd> 1-a</dd>
<dd> 1-b</dd>
<dd> 1-c</dd>
<dd> 1-d</dd>
<dt id="term-2"> 2</dt>
<dd> 2-a</dd>
<dd> 2-b</dd>
<dd> 2-c</dd>
<dt> 3</dt>
<dd> 3-a</dd>
<dd> 3-b</dd>
</dl>
</body>
</html>

7.

121

HTML-, 7.1.2.
, ,
dt term-2.
JavaScript-
nextUntil(). dt, dd, dt
term-2. , css(), .
prevUntil(). ,
dt.
.

-
-.

parent() children() ( 7.1.3).


7.1.3. parent() children()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; padding:10px;
margin:10px; border:2px solid #ccc;
}
p {
border:2px solid #ccc; padding:0 5px;
background-color:#ddd;
}
</style>
<script type="text/javascript">
$(function(){
$("#main").parent().css("border-color","#f00");
$("#main").children("span").css("background-color","#0c0");
});

122

I. jQuery

</script>
</head>
<body>
<p> div</p>
<div>
<p> div</p>
<p id="main"><em></em> <strong></strong>
<span>-</span> -.</p>
<p> div</p>
</div>
<p> div</p>
</body>
</html>

HTML- 7.1.3? p, div


. div, ,
p, em, strong span.
#main , , span.
JavaScript-. #main parent(), , , ,
.
#main, children(),
span. , , .

- .

parents() closest() ( 7.1.4), , .


7.1.4. parents() closest()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

7.

123

<head>
<title>example-7-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
body { width:400px; }
body, h1, div, p, ul, li, a {
padding:10px; margin:10px;
border:2px solid #ccc;
}
a { display:block; }
</style>
<script type="text/javascript">
$(function(){
$("a:first").click(function(){
$("*").css("border-color","#ccc");
$(this).parents("ul").css("border-color","#f0f");
});
$("a:last").click(function(){
$("*").css("border-color","#ccc");
$(this).closest("ul").css("border-color","#ff0");
});
});
</script>
</head>
<body>
<h1></h1>
<p> div</p>
<div>
<p> div</p>
<ul>
<li><a href="#"> parents()</a></li>
<li><a href="#"> closest()</a></li>
</ul>
<p> div</p>
</div>
<p> div</p>
</body>
</html>

HTML- 7.1.4 body , ul.


li, , a.
a -. - ul.

124

I. jQuery

JavaScript-. a , .parents(),
a .closest().
- this , , , ,
ul parents(),
closest() . , css() ( parents()) ( closest())
. - -.
, , .
parents() closest()?
.
.
parents() DOM
, , . jQuery, ,
.
closest() DOM
. jQuery,
.
closest() , 1.3,
parents() .

, . - .

parentsUntil() ( 7.1.5).
7.1.5. parentsUntil()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">

7.

125

ul.level-1 { width:300px; }
</style>
<script type="text/javascript">
$(function(){
$("li.item-a").parentsUntil(".item-ii")
.css("color", "#f00");
});
</script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
</body>
</html>

HTML- 7.1.5 ul.


li item-a,
, "", li item-ii.
JavaScript- , li item-a
parentsUntil(). item-ii. , css(), .

- .

siblings() ( 7.1.6).

126

I. jQuery

7.1.6. siblings()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-1-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
body { width:400px; }
body, div, p {
padding:10px; margin:10px;
border:2px solid #ccc;
}
</style>
<script type="text/javascript">
$(function(){
$("p").click(function(){
$("*").css("border-color","#ccc");
$(this).css("border-color","#f00")
.siblings("p")
.css("border-color","#f0f");
});
});
</script>
</head>
<body>
<p> div</p>
<div>
<p> div</p>
<p> div</p>
<p> div</p>
</div>
<div>
<p> div</p>
<p> div</p>
<p> div</p>
</div>
<p> div</p>
</body>
</html>

7.1.6 HTML- p div, div p.

7.

127

JavaScript-
p, ( p
), .
, , p, - click.
- , , this p,
, . , , siblings() , this, ,
css().

, , , , p.

jQuery . .

find() ( 7.1.7).
7.1.7. find()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-1-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
p, div {
padding:10px; margin:10px;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
$(function(){
$("p, div").find("span").css("color","#f00");
});

128

I. jQuery

</script>
</head>
<body>
<p><span></span>, ?</p>
<p> ? !</p>
<div> <span></span>?</div>
<div>! <span></span>!</div>
</body>
</html>

HTML-, 7.1.7, p div. span.


.
JavaScript- , p div.
find(), span. , span.

7.2.

- ,
, , .

filter() ( 7.2.1).
7.2.1. filter()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:100px;
margin:5px; float:left;
border:3px double #369;
}
</style>

7.

129

<script type="text/javascript">
$(function(){
$("div").css("background","#c8ebcc")
.filter(".test")
.css("border-color", "#f00");
});
</script>
</head>
<body>
<div></div>
<div class="test"></div>
<div class="test"></div>
<div></div>
<div class="test"></div>
<div></div>
</body>
</html>

HTML- 7.2.1 div,


class test.
JavaScript- div, , . filter(). , ,
.test. div . .

- ,
, , . ,
.

filter(), ,
( 7.2.2).
7.2.2. filter()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

130

I. jQuery

<head>
<title>example-7-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:100px;
margin:5px; float:left;
border:3px double #369;
}
</style>
<script type="text/javascript">
$(function(){
$("div").css("background","#b4b0da")
.filter(function(index){
return index == 1 || $(this).attr("id") == "fourth";
}).css("border", "3px double #f00");
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
</body>
</html>

HTML- 7.2.2 div.


JavaScript-? ,
7.2.1, div
( ).
filter(). , , .
. , , , div, 1 , . .
, div, id
fourth, . . .
, css(),
.

7.

131

, ( ) -
, , , ,
.

is() ( 7.2.3).
7.2.3. is()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:100px;
margin:5px; float:left;
border:3px double #369;
}
</style>
<script type="text/javascript">
$(function(){
$("div").click(function(){
if($(this).is(".test")){
alert("div test");
} else if($(this).is("#first, #fourth")) {
alert("div id #first #fourth");
} else {
alert(" div test,\n id #first #fourth");
}
});
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second" class="test"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth" class="test"></div>
<div id="sixth"></div>
</body>
</html>

132

I. jQuery

7.2.3 HTML- div. id, class.


JavaScript-. div, - click. , div, .
? , class test. , is(),
".test". ,
.
div -
(#first #fourth).
. , , is() ":hidden".

, ,
, .

not() ( 7.2.4).
7.2.4. not()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:100px;
margin:5px; float:left;
border:3px double #369;
}
</style>
<script type="text/javascript">
$(function(){
$("div").not(".test, #third").css("border-color","#f00");
});

7.

133

</script>
</head>
<body>
<div id="first"></div>
<div id="second" class="test"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth" class="test"></div>
<div id="sixth"></div>
</body>
</html>

7.2.4 HTML-,
div. id , class div
.
JavaScript- div. , .test id #third. not(), ".test, #third", .
css(). ,
div.

, ,
.

slice() ( 7.2.5).
7.2.5. slice()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">

134

I. jQuery

div {
width:100px; height:100px;
margin:5px; float:left;
border:3px double #369;
}
</style>
<script type="text/javascript">
$(function(){
$("div").slice(2,5).css("border-color","#f00");
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

HTML- 7.2.5 div. .


JavaScript-. div. slice().
, ,
. , .
, . 7.2.5 2 5.
css()
. , , div.

. ,
, , .

first(), last() eq() ( 7.2.6).

7.

135

7.2.6. first(), last() eq()


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").first().css("background-color", "#f30");
$("li").last().css("background-color", "#093");
$("li").eq(2).css("background-color", "#ff3");
});
</script>
</head>
<body>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</body>
</html>

. HTML- 7.2.6 . JavaScript- .


li first(), , , . css()
. ,
last(), . css() .
, eq(),
2, ,
( ), .

, - .

136

I. jQuery

has() ( 7.2.7).
7.2.7. has()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
ul { width: 400px; }
</style>
<script type="text/javascript">
$(function(){
$("li").has("ul").css("background-color", "#ff3");
});
</script>
</head>
<body>
<ul>
<li> 1</li>
<li> 2
<ul>
<li> 2-</li>
<li> 2-</li>
</ul>
</li>
<li> 3</li>
<li> 4</li>
<li> 5
<ul>
<li> 5-</li>
<li> 5-</li>
<li> 5-</li>
</ul>
</li>
<li> 6</li>
</ul>
</body>
</html>

7.2.7 HTML-, ul,


li .

7.

137

JavaScript-. li
has(), , li, ul. li, , .

- ,
, id checkbox.
.

map() ( 7.2.8).
7.2.8. map()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-2-8</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$("p").append($(":text").map(function() {
return $(this).val();
}).get().join(", "));
});
</script>
</head>
<body>
<p></p>
<form method="post" action="">
<fieldset>
<input type="text" value="" id="one" name="number[]" />
<input type="text" value="" id="two" name="number[]" />
<input type="text" value="" id="four" name="number[]" />
<input type="text" value="" id="eight" name="number[]" />
</fieldset>
</form>
</body>
</html>

138

I. jQuery

7.2.8 input.
p, JavaScript. p . ,
append(), .
- . input text
type, .
map(). , , . .
get() ,
map() , , .
join(), , p.

7.3.

, . , ,
.

add() ( 7.3.1).
7.3.1. add()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
body { width:400px; }
body, div, p {
padding:10px; margin:10px;
border:2px solid #ccc;
}
</style>
<script type="text/javascript">

7.

139

$(function(){
$("p").css("background-color","#ddd")
.add("div").css("border-color","#f00");
});
</script>
</head>
<body>
<div>
<p> div</p>
<p> div</p>
<p> div</p>
</div>
<div>
<p> div</p>
<p> div</p>
<p> div</p>
</div>
</body>
</html>

HTML- 7.3.1 div, p. p, div.


JavaScript- , p,
css(), ,
. add(),
div. p div, p . css() .
p div,
p.

, iframe.

contents() ( 7.3.2).
7.3.2. contents()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

140

I. jQuery

<head>
<title>example-7-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
iframe {
border:1px dotted #00f;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("iframe").contents().find("h2").css("color","#f00");
});
});
</script>
</head>
<body>
<iframe src="test.htm" width="400" height="400"></iframe>
<button> h2</button>
</body>
</html>

HTML- 7.3.2 iframe, test.htm. h2


,
.
JavaScript-. button, - click.
. , iframe,
, .
contents() , iframe.
, , , find().
, "h2". , , , css(), <h2> .
h2, , .

- ,
, .

7.

141

end() ( 7.3.3).
7.3.3. end()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:100px;
margin:5px; float:left;
border:3px double #369;
}
</style>
<script type="text/javascript">
$(function(){
$("div").filter(".test, #sixth")
.css("background-color","#00f")
.end()
.filter(".test:first, #first")
.css("border-color","#f00");
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second" class="test"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth" class="test"></div>
<div id="sixth"></div>
</body>
</html>

div -, HTML-
7.3.3. div id,
class.
JavaScript-, 7.3.3,
div. filter(),

I. jQuery

142

".test, #sixth". ,
div, test,
div id, #sixth.
, div .
,
end(). , ,
div ( ). filter() ,
".test:first, #first",
test div #first. ,
div. css().
,
, . , .

- , .

andSelf()

, ( 7.3.4).

7.3.4. andSelf()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-7-3-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div, p { margin:10px; padding:5px; }
.border { border:3px double #f00; }
.background { background-color:#ddd; }
</style>
<script type="text/javascript">
$(function(){
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
});
</script>
</head>

7.

143

<body>
<div>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>

HTML- 7.3.4 div p


.
JavaScript-.
div, -. find(), "p", p.
, p, , , , div ( div - ). andSelf()
, ,
border addClass(). p, div
.
JavaScript- .
, andSelf(). background
p.


8.1.

- , (DOM) .

jQuery ready(handler) ( 8.1.1).


8.1.1. ready(handler)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("<p>DOM !</p>").appendTo("body");
});
</script>
</head>
<body>
</body>
</html>

8.

145

, 8.1.1, body p DOM. window.onload.


(DOM) , . .
- (, . .), . jQuery
, 8.1.1.
,
,
jQuery- ( 8.1.2).
8.1.2. ready(handler)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("<p>DOM !</p>").appendTo("body");
});
</script>
</head>
<body>
</body>
</html>

8.1.2 $(document).ready();.
, .
$(function(){...});,
, .
, body
onload, $(document).ready();
$(function(){...}); .

- , - . - .

146

I. jQuery

jQuery load(handler(eventObject))
unload(handler(eventObject)) ( 8.1.3).
8.1.3. load() unload()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
alert("!");
}).unload(function () {
alert(" !");
});
</script>
</head>
<body>
<a href="example-8-1-1.html"> </a>
</body>
</html>

JavaScript-, 8.1.3, window - , load() unload().


- ,
.
1.4.3, load()
unload() , - . , , : .unload([eventData], handler(eventObject)).

8.2. ,

- -
.
.

8.

147

bind(eventType, [eventData],
handler(eventObject)) unbind([eventType],
[handler(eventObject)])
( 8.2.1).
8.2.1. bind() unbind()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:300px; padding:10px;
margin:10px; border:2px solid #ccc;
}
p {
width:400px; padding:10px;
margin:10px; border-bottom:1px dotted #369;
}
</style>
<script type="text/javascript">
$(function(){
var data = {
one: "",
two: 2
};
$("div").bind("click", data, function(e){
$("p").text(": " + e.data.one + ", " + e.data.two +
"; C click : " + e.pageX +
", " + e.pageY);
});
$("button").click(function(){
$("div").unbind("click");
$("p").empty();
});
});
</script>
</head>
<body>
<div> DIV</div>
<p></p>
<button>unbind</button>
</body>
</html>

I. jQuery

148

HTML-, 8.2.1. div


- click. p , button ,
click div.
JavaScript-.
$(function(){...});, DOM
(. . 8.1). DOM , data. , , . div bind(), .
, .
"click". , ,
-
event. 8.2.1 data. , , .
, 8.2.1 .
, - click, div.
p .
, e, pageX pageY, data, . . , , .
button click. ,
div unbind(). "click",
.
p,
.

eventType bind() unbind() blur,
focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress, keyup, error.

- ,
.

8.

149

one(eventType,
handler(eventObject)) ( 8.2.2).

[eventData],

8.2.2. one()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
float:left;
width:150px; height:150px;
padding:10px; margin:10px;
border:3px double #ccc;
}
</style>
<script type="text/javascript">
$(function(){
$("div").one("dblclick", function(){
alert($(this).attr("id"));
});
});
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

HTML-, 8.2.2, div,


id. "dblclick" , .
JavaScript- DOM,
div one(). "dblclick",
( 8.2.1), - .

I. jQuery

150

, id , .
, -,
, ,
.

eventType one(eventType, [eventData],
handler(eventObject)) blur, focus, focusin, focusout, load, resize, scroll,
unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout,
mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

- .

trigger(eventType, [extraParameters])
( 8.2.3).
8.2.3. trigger()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-2-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
float:left;
width:150px; height:150px;
padding:10px; margin:10px;
border:3px double #369;
}
</style>
<script type="text/javascript">
$(function(){
$("div:first").click(function(){
$(this).css("background-color","#369");
});
$("div:last").mouseover(function(){
$("div:first").trigger("click");
});
});

8.

151

</script>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

div HTML- 8.2.3.


div click,
mouseover, click
div.
JavaScript-. div
div:first, , click, css() . , div
.
( ) div
div:last - mouseover. div
trigger(), "click". , . ( , -.)
, ?
div , . . -
click, .
, triggerHandler(). JavaScript-
8.2.3 trigger() triggerHandler()
. .
.
-, triggerHandler() trigger()
.
submit . triggerHandler()
.
-, triggerHandler() , , trigger() .
-, , triggerHandler(),
DOM.

152

I. jQuery

-, trigger(), jQuery
( ),
triggerHandler() , .

.
DOM .
.
.

live(eventType, [eventData], handler)


die(eventType, [handler]) ( 8.2.4).
8.2.4. live() die()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-2-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
float:left;
width:100px; height:100px;
padding:10px; margin:10px;
background-color:#369;
}
</style>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
$("<div></div>").insertAfter("div:last");
});
/*
$("div").click(function(){
$(this).animate({ opacity:0.2 },100)
.animate({ opacity:1 },1000);
});
*/
$("div").live("click",function(){

8.

153

$(this).animate({ opacity:0.2 },100)


.animate({ opacity:1 },1000);
});
$("button:last").click(function(){
$("div").die("click");
});
});
</script>
</head>
<body>
<button> DIV</button>
<button> live</button><br />
<div></div>
<div></div>
<div></div>
</body>
</html>

HTML-, 8.2.4, div, click, .


DOM div,
.
.
JavaScript-. click . -
DOM div insertAfter().
JavaScript-.
, ?
. click div.
-,
animate(params,[duration]), div 0,2 100 , 1000 1. , , "".
DOM div, , !
?
div,
, DOM . DOM div, ,
,
.

I. jQuery

154


, DOM
after(), before(), insertAfter(), insertBefore(), replaceWith(), replaceAll(),
AJAX-.

, live() "click",
-.
8.2.4, , click
div DOM , .
die().
, live(). 8.2.4
click div.

eventType live(eventType, [eventData],
handler) die(eventType, [handler]) click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, keydown, keypress, keyup. 1.4.1
blur, focus.

, 1.4.3 live() , JavaScript,


-.

.
DOM .
.
.
, ,
.

delegate(eventType, [eventData],
handler) undelegate(eventType, [handler]) ( 8.2.5), , 1.4.2.
8.2.5. delegate() undelegate()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

8.

155

<head>
<title>example-8-2-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
th, td { text-align:center; }
td { border-bottom:1px dotted #ccc; }
.hover { background-color:#333; color:#fff; }
</style>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
$("tbody").append("<tr><td>-1</td><td>-2</td><td>-3</td></tr>");
});
$("button:last").click(function(){
$("table").undelegate("td", "hover");
});
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
});
</script>
</head>
<body>
<table>
<thead>
<tr><th> 1</th><th> 2</th><th> 3</th></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
<tr><td>5-1</td><td>5-2</td><td>5-3</td></tr>
</tbody>
</table>
<button> </button>
<button>undelegate()</button>
</body>
</html>

HTML-, 8.2.5,
. JavaScript-,
append(), undelegate(), .

156

I. jQuery

, . , td .
hover. , td toggleClass(). ,
, append(). , delegate().
, td,
table. delegate()
td, ,
-.
8.2.4 , ?
. live(), td, each()
td. ,
. delegate() .

8.3. , ,

- . ,

.

mouseover mouseout,
- ( 8.3.1), hover(handlerIn(eventObject),
handlerOut(eventObject)).
8.3.1. hover()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

8.

157

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>


<style type="text/css">
div {
float:left;
width:100px; height:100px;
padding:10px; margin:10px;
border:3px double #369;
}
.hover {
border:3px double #f00;
background-color:#369;
}
</style>
<script type="text/javascript">
$(function(){
$("div").hover(
function(){ $(this).addClass("hover"); },
function(){ $(this).removeClass("hover"); }
);
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

8.3.1 HTML- div,


CSS-. CSS
hover .
JavaScript-. div
hover(). , , . ,
. , hover ,
, , , div:
.


. .

158

I. jQuery

jQuery toggle(handler(eventObject), handler(eventObject), [handler(eventObject)])


( 8.3.2).
8.3.2. toggle()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:100px;
padding:10px; margin:10px;
border:3px double #369;
background-color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
$("div").toggle(
function(){ $(this).css("background-color","#f00"); },
function(){ $(this).css("background-color","#0f0"); },
function(){ $(this).css("background-color","#00f"); },
function(){ $(this).css("background-color","#fff"); }
);
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

HTML-, 8.3.2, div, CSS- (, ). div : ,


, , .

8.

159

, JavaScript-.
div,
toggle(). ,
css().

HTML-, input, select button.


input . select - . button
input . input.

focus(handler(eventObject)),
blur(handler(eventObject)), change(handler(eventObject)) click(handler(eventObject))
( 8.3.3).
8.3.3. focus(), blur(), change() click()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-8-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
input,select { width:120px; margin:1px; }
span { padding:4px; }
.focus { color:#f00; }
.blur { color:#00f; }
.change { color:#0f0; }
</style>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$("<span class='focus'>focus!</span>").insertAfter(this).animate({
opacity:0 },1500);
});
$("input").blur(function(){
$("<span class='blur'>blur!</span>").insertAfter(this).animate({ opacity:0
},1000);
});

160

I. jQuery

$("select").change(function() {
var t = "name=" + $(this).attr('name') + "&value=" + $(this).val();
$(this).after("<span class='change'>" + t +
"</span>").next("span").animate({ opacity:0 },2500);
});
$("button").click(function(){
$("input:first").focus();
});
$("input:last").focus();
});
</script>
</head>
<body>
<input type="text" name="One" /><br />
<input type="text" name="Two" /><br />
<select name="Three">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select><br />
<button>click()</button>
</body>
</html>

, HTML-, 8.3.3, input, select button.


JavaScript-, . - focus input,
focus(). - span input,
. animate(params,[duration])
.
input, blur(),
input.
select change() - , . name select
value . , input.
button, input
. , button

8.

161

click, .
input input:first,
, focus(). ,

.
input ,
.
input:last focus()
- .
8.3.3 , .
, . 8.1.
8.1. jQuery

ready(handler)

ready(handler)
(DOM)

click(),
click(handler(eventObject))

click() click
.
click(handler(eventObject))
handler(eventObject) click
. click ,
.
- ,

focus(),
focus(handler(eventObject))

focus() focus
.
focus(handler(eventObject))
handler(eventObject) focus
. focus ,

<Tab>

blur(),
blur(handler(eventObject))

blur() blur
.
blur(handler(eventObject))
handler(eventObject) blur
. blur ,

<Tab>

focusin(handler(eventObject))

focusin(handler(eventObject))
handler(eventObject) focus

I. jQuery

162

8.1 ()

focusout(handler(eventObject))

focusout(handler(eventObject))
handler(eventObject) blur

dblclick(),
dblclick(handler(eventObject))

dblclick() dblclick
.
dblclick(handler(eventObject))
handler(eventObject) dblclick . dblclick ,

change(),
change(handler(eventObject))

change() change
.
change(handler(eventObject))
handler(eventObject) change
. change ,
,

select(),
select(handler(eventObject))

select() select
.
select(handler(eventObject))
handler(eventObject) select
. select ,
-
input textarea.
select change, ,

HTML- select

keydown(),
keydown(handler(eventObject))

keydown() keydown
.
keydown(handler(eventObject))
handler(eventObject) keydown
. keydown ,
-

keypress(),
keypress(handler(eventObject))

keypress() keypress
.
keypress(handler(eventObject))
handler(eventObject) keypress . keypress ,
-
. ""

keydown keypress keyup

keyup(),
keyup(handler(eventObject))

keyup() keyup
.
keyup(handler(eventObject))
handler(eventObject) keyup
. keyup ,
-

8.

163
8.1 ()

error(),
error(handler(eventObject))

error() error
.
error(handler(eventObject))
handler(eventObject) error
. error ,
- . :

submit(),
submit(handler(eventObject))

submit() submit
.
submit(handler(eventObject))
handler(eventObject) submit
. submit ,
. ,
"" input
submit, <Enter>,

mouseover(handler(eventObject))

mouseover(handler(eventObject))
handler(eventObject) mouseover
. mouseover
,

mouseout(handler(eventObject))

mouseout(handler(eventObject))
handler(eventObject) mouseout
. mouseout
,

mousedown(handler(eventObject))

mousedown(handler(eventObject))
handler(eventObject) mousedown
. mousedown
,

mouseup(handler(eventObject))

mouseup(handler(eventObject))
handler(eventObject) mouseup
. mouseup
,

mouseenter(handler(eventObject))

mouseenter(handler(eventObject))
handler(eventObject) mouseenter
. mouseenter
,
.

mouseleave(handler(eventObject))

mouseleave(handler(eventObject))
handler(eventObject) mouseleave
. mouseleave
,
.

I. jQuery

164

8.1 ()

mousemove(handler(eventObject))

mousemove(handler(eventObject))
handler(eventObject) mousemove
. mousemove
,

hover(handlerIn(eventObject),
handlerOut(eventObject))

hover(handlerIn(eventObject),
handlerOut(eventObject))
mouseover ( ,
) mouseout ( ,
)

toggle (handler(eventObject),
handler( eventObject ),
[handler(eventObject)])

toggle(handler(eventObject),
handler(eventObject), [handler(eventObject)])
n click
.
, ,
, . .

resize(handler(eventObject))

resize(handler(eventObject)) handler(eventObject) resize . resize ,


scroll(handler(eventObject))

scroll(handler(eventObject)) handler(eventObject) scroll . scroll ,


load(handler(eventObject))

load(handler(eventObject)) handler(eventObject) load . load ,


. ,
load(handler(eventObject))
, handler(eventObject) ,

unload(handler(eventObject))

unload(handler(eventObject)) handler(eventObject) unload . unload ,



, , .

jQuery AJAX
,
-, , -.

9.1.
load(), $.get(), $.getJSON(),
$.getScript() $.post(),
, $.ajax().
.

AJAX- - .

load(url,
( 9.1.1).

[complete(responseText, textStatus, XMLHttpRequest)])


9.1.1. load()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;

[data],

I. jQuery

166
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$("#target").load("testLoad.htm");
});
$("button:last").click(function(){
$("#target").empty();
});
});
</script>
</head>
<body>
<div id="target"></div>
<button></button>
<button></button>
</body>
</html>

HTML- 9.1.1 div #target


, - .
,
. - div.
div.
JavaScript-. , button:first, ,
click. -
div load(),
url. ,
-, .

click. - div empty(), div.

testLoad.htm -, .

9. jQuery AJAX

167

AJAX- -.
.

load(url, [data], [complete


(responseText, textStatus, XMLHttpRequest)]) ( 9.1.2).
9.1.2. load()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$("#target").load("testLoad.htm h2,p:last", function(){
alert("!");
});
});
$("button:last").click(function(){
$("#target").empty();
});
});
</script>
</head>
<body>
<div id="target"></div>
<button></button>
<button></button>
</body>
</html>

I. jQuery

168

HTML- 9.1.2
div #target. , .
JavaScript-,
-, . h2 p.
- click .
div #target
load(), .
url -, , ( ).
h2 p:last.
, callback-.
"!".

testLoad.htm -,
.

AJAX- , .
.

load(url, [data], [complete


(responseText, textStatus, XMLHttpRequest)]) ( 9.1.3).
9.1.3. load()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;

9. jQuery AJAX

169

padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$("#target").load("testLoad.php",
{ name: "John", age: "35" },
function(responseText, textStatus, XMLHttpRequest){
alert('textStatus = ' + textStatus +
'\n readyState XMLHttpRequest: ' +
XMLHttpRequest.readyState +
'\n status XMLHttpRequest: ' +
XMLHttpRequest.status);
});
});
$("button:last").click(function(){
$("#target").empty();
});
});
</script>
</head>
<body>
<div id="target"></div>
<button></button>
<button></button>
</body>
</html>

9.1.3 HTML-: div #target .


div load(),
URL -, , /,
, , , .
AJAX- testLoad.php,
$_POST['name'] $_POST['age']. ,
div #target.
, , , , , -

170

I. jQuery

. , ,
readyState status XMLHttpRequest,
.
testLoad.php 9.1.3.
9.1.3. testLoad.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if($_POST) {
print ': ' . $_POST['name'] . ', : ' . $_POST['age'] . ', :
' . date('H:i:s', time());
}
}
?>

GET-, . ,
, .

, $.get(url,
[data], [success(data, textStatus, jqXHR)], [dataType]) ( 9.1.4).
9.1.4. $.get()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
</style>
<script type="text/javascript">

9. jQuery AJAX

171

$(function () {
$("button:first").click(function(){
$.get("testGet.php",
{ name: "John", age: "35" },
function(data){
$("div").text(data);
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div></div>
<button></button>
<button></button>
</body>
</html>

9.1.4 div
button. . $.get(),
. , GET. , ,
.
GET['name'] GET['age']. , . div
text() .

data, (
). textStatus, , jqXHR ( 1.5
XMLHttpRequest), XMLHttpRequest.
testGet.php 9.1.4.
9.1.4a. testGet.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {

172

I. jQuery

if($_GET) {
print ': ' . $_GET['name'] . ', : ' . $_GET['age'] . ', : '
. date('H:i:s', time());
}
}
?>

GET- JavaScript-, .

$.getScript(url,
[success(data, textStatus)]) ( 9.1.5).
9.1.5. $.getScript()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:eq(0)").click(function(){
$.getScript("testGetScript.js");
});
$("button:eq(1)").click(function(){
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function(){
$("div").animate({ backgroundColor: "#f00" }, 1500)
.animate({ backgroundColor: "#00f" }, 1500)
.animate({ backgroundColor: "#fff" }, 1500);
});
});
});

9. jQuery AJAX

173

</script>
</head>
<body>
<div></div>
<button> </button>
<button> </button>
</body>
</html>

button div HTML-, 9.1.5. JavaScript.


, , .
$.getScript(),
.
testGetScript.js 9.1.5.
9.1.5a. testGetScript.js
alert(" javascript- !");

,
, . .
JavaScript- .
,
url JavaScript- jquery.color.js, dev.jquery.com. jQuery Color Animation,
,
.
, . , div , ,
div , .

JSON GET-,
, .
JSON (,
).

$.getJSON(url, [data],
[success(data, textStatus, jqXHR)]) ( 9.1.6).

174

I. jQuery

9.1.6. $.getJSON()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
</style>
<script type="text/javascript">
$(function () {
$("button:eq(0)").click(function(){
$.getJSON("testGetJSON.php", function(data, textStatus, jqXHR){
var items = [];
$.each(data, function(i,item){
items.push(item.name + ': ' + item.phone);
});
$("div").html(items.join('<br />'));
});
});
$("button:eq(1)").click(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=n
ature&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m)
.attr("title",item.title)
.appendTo("div");
if (i == 2) return false;
});
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>

9. jQuery AJAX

175

<body>
<div></div>
<button>getJSON</button>
<button>getJSONP</button>
<button></button>
</body>
</html>

HTML-, 9.1.6, div ,


div.
JavaScript-, .
$.getJSON().
, ,
, .
. JSON,
testGetJSON.php,
9.1.6.
9.1.6a. testGetJSON.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
print '[{"name":"John","phone":"555-66-77"},
{"name":"Mary","phone":"566-77-77"},
{"name":"Helen","phone":"577-88-77"},
{"name":"Bob","phone":"588-66-99"}]';
}
?>

, , JSON.
jqXHR.
- items, $.each(collection, callback(indexInArray, valueOfElement)
.
items,
div. "John: 555-66-77" .
,
.
$.getJSON(), flickr.com, API
JSON. , -

176

I. jQuery

.
$.each(collection, callback(indexInArray, valueOfElement)),

.
,
data.items, , flickr.com.
JSON , , :
http://api.flickr.com/services/feeds/photos_public.gne?tags=nature&tagmode=
any&format=json&jsoncallback=?.
data.items , : img src title. , , i- . img div
appentTo().
div
, false.

POST-, . , , .

, $.post(url,
[data], [success(data, textStatus, jqXHR)], [dataType]) ( 9.1.7).
9.1.7. $.post()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-1-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px;
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}

9. jQuery AJAX

177

</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$.post("testPost.php",
{ name: "Debora", age: "45" },
function(data){
$("div").text(data);
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div></div>
<button></button>
<button></button>
</body>
</html>

HTML- 9.1.7 div button.


. $.post(), . ,
POST-. , , . POST['name'] POST['age']. , . div text(val) .

data, (
). textStatus,
, jqXHR ( 1.5 XMLHttpRequest),
XMLHttpRequest.
testPost.php 9.1.7.
9.1.7a. testPost.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {

178

I. jQuery

if($_POST) {
print ': ' . $_POST['name'] . ', : ' . $_POST['age'] . ', :
' . date('H:i:s', time());
}
}
?>

9.2.
$.ajax() $.ajaxSetup()
jQuery
AJAX-. $.ajax(options) , .
1.5 $.ajax(url,
[settings]), ,
, () ,
.
$.ajaxSetup(options) ,
AJAX-, -.

AJAX-. . ,
.

$.ajax() ( 9.2.1), AJAX-, $.get() $.post(), ,


,
, .
9.2.1. $.ajax()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">

9. jQuery AJAX

179

div {
width:400px; height:200px;
padding:10px; margin:10px;
border:3px double #369;
overflow:auto;
}
span { color:#f00; }
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$.ajax("testAjax.php", {
type: "POST",
data: "name=Jonh&age=35",
timeout: 5000,
beforeSend: function(){
$("div").text("...");
},
success: function(data, textStatus, jqXHR){
$("div").html(data + '<br /> : ' + textStatus +
'<br /> : ' + jqXHR.status);
},
error: function(jqXHR, textStatus){
$("div").html('<span>' + textStatus +
'</span><br /> : ' + jqXHR.status);
}
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div></div>
<button></button>
<button></button>
</body>
</html>

9.2.1 HTML- div,


,
, , .

I. jQuery

180

JavaScript-,
. $.ajax() url, ,
, /, AJAX-.
,
, .

AJAX- - $.ajaxSetup().

9.2.1.
, url,
testAjax.php.
,
type, .
POST-.
data , .
, GET-, . . /, '&'.
timeout ,
. .
beforeSend , . div ,
, . , -
AJAX-, false.
success ,
.
div HTML-.
error ,
. div HTML-, .
9.2.1 testAjax.php, . for 5,
5- , ,
'timeout'.
9.2.1a. testAjax.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {

9. jQuery AJAX

181

for($i=0;$i<2;$i++){
sleep(1);
}
if($_POST){
print '<h3> </h3><p>: '.date("H:i:s", time()).'</p>';
}
}
?>

9.2.1 ,
, .
. 9.1 , AJAX-
$.ajax() $.ajaxSetup().
9.1. $.ajax() $.ajaxSetup()

async

AJAX-
. true false.
true.
, false.
, ,
.
dataType: 'jsonp'

beforeSend(jqXHR, settings)

,
jqXHR ( jQuery 1.4.x XMLHTTPRequest)
.
,
. . false,

cache

jQuery, 1.2.
true false.
false,
. true,
dataType script,
cache false

complete(jqXHR, textStatus)

,
AJAX- ( ,
success error). : jqXHR ( jQuery 1.4.x
XMLHTTPRequest) ,

contents

1.5. , / , , jQuery

contentType

, content-type
.
application/x-www-form-urlencoded,

I. jQuery

182

9.1 ()

context

, callback-
AJAX-

converters

1.5. . {"* text": window.String,


"text html": true, "text json": jQuery.parseJSON,
"text xml": jQuery.parseXML}.
,

crossDomain

1.5. : true
false
.
( JSONP) ,
true

data

, . ,
. GET
URL.
/. ,
jQuery
. : {foo:["bar1", "bar2"]}
'&foo=bar1&foo=bar2'

dataFilter(data, type)

, , XMLHttpRequest.
,
.
: ,
data, dataType type

dataType

, ,
. , jQuery success responseXML, responseText.
MIME- .
:
xml XML-,
jQuery;
html HTML . <script>
(DOM);
script JavaScript ;
json JSON
JavaScript;
jsonp JSON,

JSONP;
text ,

9. jQuery AJAX

183
9.1 ()

error(jqXHR, textStatus,
errorThrown)

, ,
. : jqXHR
( jQuery 1.4.x XMLHTTPRequest), , , ,
, .
"timeout", "error", "abort"
"parsererror"

global

, AJAX-. true. false,


(
ajaxStart ajaxStop) .
AJAX-

headers

1.5. , , . ,
beforeSend

ifModified

true false.
false. true,
,

. Last-Modified

isLocal

1.5.1.
protocol location.
,
jQuery . , $.ajaxSetup()

jsonp

, callback-
jsonp. callback , callback=? ( GET-) ( POST). , {jsonp: onJsonPLoad} onJsonPLoad=?

jsonpCallback

callback- JSONP.
, jQuery

mimeType

1.5.1. ,
MIME-, , XMLHTTPRequest

password

,
HTTP-

processData

true false. true. , , , content-type


application/x-www-form-urlencoded.
DOM- ,
,
false

I. jQuery

184

9.1 ()

scriptCharset

, . GET , DataType jsonp script

statusCode

1.5. , , ,

success(data, textStatus,
jqXHR)

, ,
. : , , dataType, , , jqXHR ( jQuery 1.4.x
XMLHTTPRequest)

timeout

. - AJAX-. -,
$.ajaxSetup()

traditional

true false.
true,

type

"GET". , , "POST" "GET". ,


, "PUT" "DELETE",
,

url

, ,
.

username

, ,
HTTP-

xhr


XMLHTTPRequest. ActiveXObject (
), XMLHTTPRequest. XMLHTTPRequest

xhrFields

1.5.1. ,
/
XMLHTTPRequest

- ,
AJAX- . AJAX-
, . . , .

9. jQuery AJAX

185

,
$.ajaxSetup(options) ( 9.2.2).
9.2.2. $.ajaxSetup()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:350px; height:150px;
padding:10px; margin:5px;
border:3px double #369;
overflow:auto;
}
#result {
padding:10px; margin:5px;
border:1px dotted #f00;
width:350px; height:50px;
}
span { color:#f00; }
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
url: "testAjaxSetup.php",
type: "POST",
timeout: 3000,
beforeSend: function(){
$("div:last").empty();
$("#result").text("...");
},
success: function(data){
$("div:last").html(data);
$("#result").text("!");
},
error: function(jqXHR, textStatus){
$("#result").html("<span>" + status + "</span>");
}
});

186

I. jQuery

$("button:eq(0)").click(function(){
$.ajax({ data: "q=1&er=none" });
});
$("button:eq(1)").click(function(){
$.ajax({ data: "q=2&er=none" });
});
$("button:eq(2)").click(function(){
$.ajax({ data: "q=3&er=yes" });
});
});
</script>
</head>
<body>
<div id="result"></div>
<div></div>
<button> 1</button>
<button> 2</button>
<button> 3 ( )</button>
</body>
</html>

HTML-, 9.2.2.
div #result AJAX-. div ( ). button
AJAX- .
JavaScript-.
$.ajaxSetup(). options, AJAX-. ,
, AJAX-,
. , ,
.
, options, ,
.
AJAX- .
url , , testAjaxSetup.php.
POST type - 3000 timeout.
beforeSend ,
div, ,

9. jQuery AJAX

187

#result , , .
, success. HTML-
div, , #result .
, error <span>
HTML- #result.
,
click ,
AJAX-. , - $.ajax(). ,
data, , testAjaxSetup.php ( 9.2.2).
9.2.2. testAjaxSetup.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if($_POST['er'] == "yes") { for($i=0;$i<5;$i++) sleep(1); }
if($_POST){
print '<h3> </h3>
<p> '.date("H:i:s d-m-Y", time()).' :<br />
<strong>q = ' . $_POST['q'] . ',
er = ' . $_POST['er'] . '</strong></p>';
}
}
?>

'yes' er, 5- , , , . .
,
div , , .

9.3. AJAX

, AJAX-.

188

I. jQuery

,
AJAX-
, , 9.3.1.
9.3.1. AJAX-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
#result {
width:410px; height:180px;
margin:5px; padding:3px;
border:1px solid #369;
}
button {
width:200px;
margin:5px;
}
</style>
<script type="text/javascript">
$(function () {
//
$.ajaxSetup({
url: "testEvents.php",
type: "POST",
timeout: 4000,
beforeSend: function() {
$("#result").append(new Date().getTime()+' ==> beforeSend<br />');
},
success: function() {
$("#result").append(new Date().getTime()+' ==> success<br />');
},
error: function() {
$("#result").append(new Date().getTime()+' ==> error<br />');
},
complete: function() {
$("#result").append(new Date().getTime()+' ==> complete<br />');
}
});

9. jQuery AJAX

189

//
$("#well").click(function() {
$("#result").empty();
$.ajax({
data: "er=none"
});
});
//
$("#bad").click(function() {
$("#result").empty();
$.ajax({
data: "er=yes"
});
});
//
$("#result").ajaxStart(function() {
$(this).append(new Date().getTime()+' ==> ajaxStart<br />');
}).ajaxSend(function() {
$(this).append(new Date().getTime()+' ==> ajaxSend<br />');
}).ajaxSuccess(function() {
$(this).append(new Date().getTime()+' ==> ajaxSuccess<br />');
}).ajaxError(function() {
$(this).append(new Date().getTime()+' ==> ajaxError<br />');
}).ajaxComplete(function() {
$(this).append(new Date().getTime()+' ==> ajaxComplete<br />');
}).ajaxStop(function() {
$(this).append(new Date().getTime()+' ==> ajaxStop<br />');
});
});
</script>
</head>
<body>
<div id="result"></div>
<button id="well"> ajax-</button>
<button id="bad"> ajax-</button>
</body>
</html>

HTML-, 9.3.1, . button,


AJAX-. #well ,
#bad ,
.
AJAX- -,
, , JavaScript-

190

I. jQuery

$.ajaxSetup(). ,
AJAX- .
url, AJAX- testEvents.php.
type POST, timeout 4000 .
, beforeSend, success, error complete,
,
1 1970 ., div
#result. , AJAX-.
click .
, . . button,
div , . AJAX-
$.ajax(), data.
#well 'er=none',
#bad 'er=yes'.
, ,
testEvents.php, 9.3.1.
9.3.1. testEvents.php
<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if($_POST['er'] == "yes") {
sleep(5);
}
}
?>

'yes' $_POST['er'],
5 , , AJAX-.
$.ajaxSetup(), .
div #result - : ajaxStart, ajaxSend,
ajaxSuccess, ajaxError, ajaxComplete ajaxStop.
, . . , 1 1970 .,
div #result.

9. jQuery AJAX

191

ajax-,
AJAX-
(. 9.1).
ajax-,
,
AJAX- (. 9.2).

. 9.1. AJAX-

. 9.2. AJAX-

I. jQuery

192

,
AJAX-, . 9.2.
9.2. AJAX-

ajaxStart

. , AJAX- AJAX-, . XMLHttpRequest

beforeSend

. ,
AJAX-, XMLHttpRequest (,
)

ajaxSend

. AJAX-,
XMLHttpRequest

success

. , AJAX-
( , )

ajaxSuccess

. AJAX, . . , ,

error

. AJAX (
AJAX-)

ajaxError

. , ,

complete

. , AJAX-
. ,
AJAX-,

ajaxComplete

. ,
complete , AJAX-

ajaxStop

. , AJAX

9.4.

AJAX-.
.

, ,
.
$.serialize(). 9.4.1.

9. jQuery AJAX

193

9.4.1. $.serialize()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-4-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function () {
$("form").submit(function() {
alert($(this).serialize());
return false;
});
});
</script>
</head>
<body>
<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>
</body>
</html>

9.4.1 , AJAX-.

I. jQuery

194

AJAX- ,
, .
JavaScript-. submit,
.serialize(). alert
, /,
&.
, .serializeArray().
.serialize() 9.4.1,
. . 9.4.1.
9.4.1. $.serializeArray()
[
{
{
{
{
{

name:
name:
name:
name:
name:

"a",
"b",
"c",
"d",
"e",

value:
value:
value:
value:
value:

"1"
"2"
"3"
"4"
"5"

},
},
},
},
}

.serialize() .serializeArray() ,
, W3C. ,
name.

10


jQuery
10.1.
jQuery

-
.

$.each(collection,
callback(indexInArray, valueOfElement)). each(),
jQuery. $.each(collection,
callback(indexInArray, valueOfElement) ,
( 10.1.1).
10.1.1. $.each()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
float:left;
width:100px; height:100px;
padding:10px; margin:10px;
border:1px solid #369;
}

196

I. jQuery

p { color:#f00; }
</style>
<script type="text/javascript">
$(function () {
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(arr, function() {
$("#" + this).text("id='" + this + "'");
return (this != "four");
});
$.each(obj, function(n, val) {
$("#" + n).append("<p>" + val + "</p>");
});
});
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</body>
</html>

div, id, HTML, 10.1.1. .


JavaScript-. arr
obj, .
$.each() , , . . ( ) ( ),
.
arr,
$.each(). , div . , div, #
this,
.
,
'four'. ,
, , false.

10. jQuery

197

obj.
$.each(), , div ,
obj.


( 10.1.2).

$.extend(target,object1,[objectN])

10.1.2. $.extend()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, foo: "bar" };
var settings = $.extend(empty, defaults, options);
$.each(settings, function(n, val) {
$("body").append("<p>" + n + ": " + val + "</p>");
});
});
</script>
</head>
<body>
</body>
</html>

10.1.2 body
JavaScript- .
JavaScript-, : empty, defaults
options. settings

198

I. jQuery

$.extend(). , setting .
$.each(),
settings . , body p,
.
,
{'validate': true, 'limit': '5', 'name': 'foo',
'foo': 'bar'}.

$.merge(first,second)
( 10.1.3).
10.1.3. $.merge()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var a = [ 1, 2, 3, 4 ];
var b = [ 4, 5, 6, 7 ];
c = $.merge(a, b);
$("div").text(c.join(", "));
});
</script>
</head>
<body>
<div></div>
</body>
</html>

HTML- 10.1.3 div, , -

10. jQuery

199

c, a b
$.merge(). : 1, 2, 3, 4, 4, 5, 6, 7.

, .

$.grep(array,
( 10.1.4).

function(elementOfArray, indexInArray), [invert])

10.1.4. $.grep()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$("div:eq(0)").text(arr.join(", "));
arr = $.grep(arr, function(n, i){
return (n != 5 && i > 4);
});
$("div:eq(1)").text(arr.join(", "));
arr = $.grep(arr, function (a) { return a != 9; },true);
$("div:eq(2)").text(arr.join(", "));
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

HTML-, 10.1.4, div,


.

200

I. jQuery

JavaScript- arr.
, div.
, arr $.grep() .
, .
. ,
. false
. ,
.
div : 1, 9, 4, 7, 3, 8, 6, 9, 1.
$.grep() invert, ,
. div : 9, 9. ,
a!=9, , invert
true, .

DOM .

$.unique(array) ( 10.1.5).
10.1.5. $.unique()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var divs = $("div").get(); // 6
var dups = $("div.dup").get(); // 3
arr = $.merge(divs, dups);
alert(': ' + arr.length); // 9
arr = $.unique(arr);
alert(': ' + arr.length); // 6
});
</script>
</head>

10. jQuery

201

<body>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
<div></div>
<div class="dup"></div>
</body>
</html>

HTML-, 10.1.5.
div, class 'dup'.
div div.dup, , get()
divs dups , DOM, , divs
, dups . $.merge()
.
arr $.unique()
, .

/
.

$.inArray(value,array) ( 10.1.6).
10.1.6. $.inArray()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight",
"nine", "ten" ];

I. jQuery

202
$("p").text(arr.join(", "));
$("button").click(function(){
alert($.inArray($("input").val(), arr));
});
});
</script>
</head>
<body>
<p></p>
<input type="text" />
<button></button>
</body>
</html>

HTML-, 10.1.6, p, input button.


p. input - , $.inArray() , input, .
,
'-1', ,
input, .

- .

$.map(array, callback(elementOfArray, indexInArray))

( 10.1.7).

10.1.7. $.map()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var arr = ["zero", "one", "two", "three", "four", "five", "six", "seven",
"eight", "nine"];

10. jQuery

203

$("p:first").text(arr.join(", "));
arr = $.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("p:last").text(arr.join(", "));
});
</script>
</head>
<body>
<p></p>
<p></p>
</body>
</html>

HTML-, 10.1.7, p,
.
JavaScript- arr.
p.
$.map(), arr,
,
. .

. p.

, , , ,
.

$.isArray(obj)
$.makeArray(obj) ( 10.1.8).
10.1.8. $.isArray()
$.makeArray()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-8</title>

204

I. jQuery

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:20px;
margin:10px; padding:5px;
color:#fff; background-color:#00f;
}
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$.isArray($("div")) ? alert(" !") : alert(" !");
});
$("button:last").click(function(){
var arr = $.makeArray($("div"));
$.isArray(arr) ? alert(" !") : alert(" !");
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<button>.isArray()</button>
<button>.makeArray()</button>
</body>
</html>

, ,
JavaScript, jQuery, , .
, , , pop()
reverse().
HTML-, 10.1.8, div,
"", button, .
JavaScript-. .isArray() div $isArray(). . , " !". -

10. jQuery

205

.makeArray(). div $.makeArray(), .


arr $.isArray().
" !".
,
DOM.

. ,
(. . ) (. . {} new
Object).

10.1.9).

$.isEmptyObject(object) $.isPlainObject(object) (

10.1.9. $.isEmptyObject()
$.isPlainObject()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-9</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:100px; height:20px;
margin:10px; padding:5px;
color:#fff; background-color:#00f;
}
</style>
<script type="text/javascript">
$(function () {
var test = { "one": "", "two": "" }
var empty = new Object;
$("button:eq(0)").click(function(){
$.isPlainObject($("div")) ? alert(" !") : alert(" !");
});
$("button:eq(1)").click(function(){
$.isPlainObject(test) ? alert(" !") : alert(" !");
});

206

I. jQuery

$("button:eq(2)").click(function(){
$.isEmptyObject(empty) ? alert(" !") : alert("
!");;
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<button>div's</button>
<button>test</button>
<button>empty</button>
</body>
</html>

HTML-, 10.1.9, div, ( ) jQuery. "".


JavaScript- , . , .
divs. , jQuery, , "
!". , , .
test $.isPlainObject() test, . , , , {} new Object.
, empty, $.isEmptyObject() empty ,
" !".

JavaScript, .
.

$.isFunction(obj) ( 10.1.10).

10. jQuery

207

10.1.10. $.isFunction()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-1-10</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
function stub() { }
var objs = [ null,
function () {},
{ x:15, y:20 },
stub,
"function"
];
$.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span").eq(i).text(isFunc);
});
});
</script>
</head>
<body>
<div>$.isFunction(objs[0]): <span></span></div>
<div>$.isFunction(objs[1]): <span></span></div>
<div>$.isFunction(objs[2]): <span></span></div>
<div>$.isFunction(objs[3]): <span></span></div>
<div>$.isFunction(objs[4]): <span></span></div>
</body>
</html>

HTML- 10.1.10 div


span. span .
JavaScript-. objs "" .
.
objs $.each(),
obj, ,
.
,
$.isFunction(). span.

208

I. jQuery

span true ,
.

10.2.
jQuery

, jQuery .

size()
length ( 10.2.1).
10.2.1. size() length
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:60px; height:60px;
margin:5px; float:left;
border:1px solid #369;
}
.test {
background-color:#369;
}
br { clear:left; }
</style>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var size = $("div.test").size();
var length = $("div.test").length;
alert("size = " + size + " & length = " + length);
});
});
</script>
</head>

10. jQuery

209

<body>
<div></div>
<div class="test"></div>
<div></div>
<div class="test"></div>
<div class="test"></div>
<div></div>
<div class="test"></div><br />
<button></button>
</body>
</html>

HTML-, 10.2.1, div,


test.
,
jQuery.
JavaScript , button
click. - div
test, size() size.
, length,
length.
.
, :
4, div.test jQuery.

, length
.

jQuery ,
.


each(function(index, Element)),
,
. , ,
, ( 10.2.2).

I. jQuery

210


$.each(collection,
callback(indexInArray, valueOfElement)),
(. 10.1.1).
10.2.2. each()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:60px; height:60px;
margin:5px; float:left;
border:1px solid #369;
}
.test {
background-color:#369;
}
br { clear:left; }
</style>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var a = new Array();
$("div.test").each(function(i){
a.push(i + "-" + $(this).text());
if($(this).is("#stop")) {
$("p").text(a.join(", "));
return false;
}
});
});
});
</script>
</head>
<body>
<p>&nbsp;</p>
<div></div>
<div class="test"></div>
<div></div>
<div class="test"></div>
<div id="stop" class="test"></div>

10. jQuery

211

<div></div>
<div class="test"></div><br />
<button></button>
</body>
</html>

HTML-, 10.2.2.
div, test
id stop. test, a. , div stop,
, a
p.
JavaScript-. button, - click.
- a,
. div.test
each().
, .
.
.
, , i, (
).
a
i , , . is()
#stop,
join(),
p , false.
, 10.2.2,
p "0-, 1-, 2-".

, .

eq(index) index(element) ( 10.2.3).

212

I. jQuery

10.2.3. eq() index()


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-2-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:60px; height:60px;
margin:5px; float:left;
border:1px solid #369;
}
br { clear:left; }
</style>
<script type="text/javascript">
$(function(){
$("div").eq(2).css("background-color", "#f00");
$("div").click(function(){
alert(" : " + $("div").index(this));
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

HTML-, 10.2.3, div,


CSS- ,
, . , JavaScript-.
DOM div, ,
eq(), 2.
div, ,
2 , ( ).

10. jQuery

213

div
, click. , index(), .

DOM jQuery.

get([index]) ( 10.2.4).
10.2.4. get()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-2-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("li").click(function(){
var elem = $(this).get(0);
alert(elem + ', id=' + elem.id + ' : ' + elem.innerHTML);
});
});
</script>
</head>
<body>
<ul>
<li id="One"></li>
<li id="Two"></li>
<li id="Three"></li>
<li id="Four"></li>
</ul>
</body>
</html>

10.2.4 ul, , id .
li "" get()
"0" ( -

214

I. jQuery

).
: [object HTMLLIElement], id=Four : . DOM.

10.3.


$.now(), , 1.4.3 ( 10.3.1).
10.3.1. $.now()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("button").click(function(){
alert($.now());
});
});
</script>
</head>
<body>
<button>.now()</button>
</body>
</html>

, , 10.3.1,
.now() , , 1 1970 GMT. getTime Date "" JavaScript.

10. jQuery

215

, JSON, JavaScript-.

$.parseJSON(json) ( 10.3.2).
10.3.2. $.parseJSON()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var row = '{"name":"John","phone":"555-66-77","age":"45"}';
$("button").click(function(){
var obj = $.parseJSON(row);
alert(": " + obj.name + "\n: " + obj.age + "\n: " +
obj.phone);
});
});
</script>
</head>
<body>
<button>JSON</button>
</body>
</html>

HTML- 10.3.2 .
, JSON,
. .
, row.
JSON $.parseJSON() obj.
, .

I. jQuery

216

XML-
.


10.3.3).

$.parseXML(data)

$.isXMLDoc(node) (

10.3.3. $.parseXML()
$.isXMLDoc()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var row = '<rss version="2.0"><channel><title>RSS
Title</title></channel></rss>';
$("button").click(function(){
var xml = $.parseXML(row);
$.isXMLDoc(xml) ? alert('TRUE') : alert('FALSE');
});
});
</script>
</head>
<body>
<button>XML</button>
</body>
</html>

HTML- 10.3.3 ,
XML- , .
JavaScript-, row , XML-.
XML $.parseXML(), xml.
$.isXMLDoc() xml.
XML-,

10. jQuery

217

jQuery,
"TRUE", "FALSE".

jQuery ,
, $.proxy(function, context)
$.proxy(context, name).
.
, 10.3.4.
10.3.4. $.proxy()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-10-3-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var obj1 = {
name: "John",
surname: "Resig",
test: function() {
$("#log").append('<p>' + this.name + ' ' + this.surname + '</p>');
}
};
var obj2 = {
name: "Yehuda",
surname: "Katz"
};
var obj3 = {
name: "Jrn",
surname: "Zaefferer",
test3: function() {
$("#log").append('<p>' + this.surname + ', ' + this.name + '</p>');
}
};
$("#test1").click($.proxy(obj1.test, obj1));
$("#test2").click($.proxy(obj1.test, obj2));
$("#test3").click($.proxy(obj3, 'test3'));
});

218

I. jQuery

</script>
</head>
<body>
<div>
<button id="test1"> 1</button>
<button id="test2"> 2</button>
<button id="test3"> 3</button>
</div>
<div id="log"></div>
</body>
</html>

HTML-, 10.3.4.
, , div log .
JavaScript-. . name surname . test test3, .
test name surname p
log. test3 ,
name surname p
.
1, 2, 3.
,
.
, 1 $.proxy()
test, , obj1. "John Resig". , , obj1, .
3 $.proxy()
obj3 test3.
"Zaefferer, Jrn". , ,
obj3, .
.
2, test, obj1, obj2.
"Yehuda Katz" !

II

jQuery
11.

12.

13.

14.

AJAX-

15.

16.

17.

UI jQuery

18.

UI jQuery

11

-
,
, . -,

, -, .
. , .

11.1. jQuery Superfish

- ,
. . ,
W3C.

Superfish, jQuery ( 11.1.1).


11.1.1. jQuery Superfish
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-11-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" />

222

II. jQuery

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>


<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
$(function(){
$("ul.sf-menu").superfish();
});
</script>
</head>
<body>
<ul class="sf-menu">
<li class="current">
<a href="#a"> </a>
<ul class="A">
<li><a href="#aa"> , </a></li>
<li class="current">
<a href="#ab"> </a>
<ul class="AA">
<li class="current"><a href="#"> </a></li>
<li><a href="#aba"> </a></li>
<li><a href="#abb"> </a></li>
<li><a href="#abc"> </a></li>
<li><a href="#abd"> </a></li>
</ul>
</li>
<li>
<a href="#"> </a>
<ul class="AB">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li>
<li>
<a href="#"> </a>
<ul class="AC">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</li>

11. -
<li><a href="#"> </a></li>
<li>
<a href="#"> </a>
<ul class="B">
<li>
<a href="#"> </a>
<ul class="BA">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li>
<a href="#"> </a>
<ul class="BB">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li>
<li>
<a href="#"> </a>
<ul class="BC">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li>
<li>
<a href="#"> </a>
<ul class="BD">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li>
<li>
<a href="#"> </a>
<ul class="BE">
<li><a href="#"> </a></li>

223

II. jQuery

224

<li><a href="#"> </a></li>


<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"> </a></li>
</ul>
</body>
</html>

, 11.1.1, ,
head -.
css/superfish.css ,
jQuery js/jquery-1.5.2.min.js, js/superfish.js.
js/hoverIntent.js , ,
Superfish .

hoverIntent ,
, - .

HTML-. ,
.
, , JavaScript-:
ul sf-menu class
superfish().
. 11.1.
Superfish
, .
11.1.2. jQuery Superfish
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-11-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" />

11. -

225

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>


<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
$(function(){
$("ul.sf-menu").superfish({
animation: { height: "show" },
delay: 1200,
onShow: function(){ alert($(this).attr("class")); }
});
});
</script>
</head>
<body>
<ul class="sf-menu">
. . . . . . . . . .
</ul>
</body>
</html>

11.1.2 HTML-,
. .
JavaScript-.

. 11.1. Superfish

II. jQuery

226

, ul
superfish(), .
animation ,
. , "" animate() jQuery.
delay 1,2 , . . .
onShow , , (. .
, ). $(this)
ul, li .
, -, , class .
,
. 11.1.
11.1. Superfish

hoverClass

, , . sfHover

pathClass

, ,

delay

.
800

animation

. ,
animate() jQuery.
{opacity:'show'}

speed

. animate() jQuery.
'normal'

autoArrows

true.

dropShadows

true.
, false

disableHI

false. true
, hoverIntent.js ( )

onInit

onBeforeShow

11. -

227
11.1 ()

onShow

,
( , )

onHide

,
( , )


. ?
HTML- ,
Superfish ( 11.1.3).
11.1.3. jQuery Superfish
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-11-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" />
<link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
$(function(){
$("ul.sf-menu").superfish({
delay: 1200
});
});
</script>
</head>
<body>
<ul class="sf-menu sf-vertical">
. . . . . . . . . .
</ul>
</body>
</html>

11.1.3
css/superfish-vertical.css .
HTML- ul

228

II. jQuery

sf-vertical. JavaScript-
!
. 11.2 ,
.

. 11.2. jQuery Superfish

, . HTML-
( 11.1.4).
11.1.4. jQuery Superfish
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-11-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" />
<link rel="stylesheet" type="text/css" href="css/superfish-navbar.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>

11. -

229

<script type="text/javascript">
$(function(){
$("ul.sf-menu").superfish();
});
</script>
</head>
<body>
<ul class="sf-menu sf-navbar">
. . . . . . . . . .
</ul>
</body>
</html>

, 11.1.4, ,

css/superfish-navbar.css sf-navbar ul . JavaScript- .
. 11.3.

. 11.3. jQuery Superfish

Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/.

12


12.1. jqGrid

-
, . , , , , .

jqGrid.
, . . 12.1.1 .
12.1.1. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-12-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

12.
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
<script type="text/javascript">
$(function(){
$("#example").jqGrid({
datatype: "local",
height: 150,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', width:50, sorttype:"int",resizable:false},
{name:'country_code', width:75, sorttype:"text"},
{name:'region_code', width:75, sortable:false},
{name:'city', width:300, align:"left", sorttype:"text"},
{name:'latitude', width:100, align:"center", sorttype:"float"},
{name:'longitude', width:100, align:"right", sorttype:"float"}
],
multiselect: true,
caption: " "
});
var mydata = [
{id:"8039", country_code:"CH", region_code:"19", city:"Aadorf",
latitude:"47.4833", longitude:"8.9"},
{id:"4286", country_code:"BE", region_code:"08", city:"Aalst",
latitude:"50.9333", longitude:"4.0333"},
{id:"4287", country_code:"BE", region_code:"08", city:"Aalter",
latitude:"51.0833", longitude:"3.45"},
{id:"7405", country_code:"CH", region_code:"01", city:"Aarau",
latitude:"47.3833", longitude:"8.05"},
{id:"7936", country_code:"CH", region_code:"14", city:"Aarberg",
latitude:"47.05", longitude:"7.2833"},
{id:"7406", country_code:"CH", region_code:"01", city:"Aarburg",
latitude:"47.3167", longitude:"7.9"},
{id:"3564", country_code:"BE", region_code:"02", city:"Aarschot",
latitude:"50.9833", longitude:"4.8333"},
{id:"4437", country_code:"BE", region_code:"09", city:"Aartrijke",
latitude:"51.1167", longitude:"3.0833"},
{id:"3443", country_code:"BE", region_code:"01", city:"Aartselaar",
latitude:"51.1333", longitude:"4.3833"},
{id:"7407", country_code:"CH", region_code:"01", city:"Aarwangen",
latitude:"47.2333", longitude:"7.75"}
];
$.each(mydata, function(i,val){
$("#example").addRowData(i+1,val);
});
});

231

232

II. jQuery

</script>
</head>
<body>
<table id="example"></table>
</body>
</html>

jqGrid -, js/jquery-1.5.2.min.js,
js/jquery.jqGrid.min.js js/i18n/grid.locale-ru.js. css/ui.jqgrid.css css/redmond/
jquery-ui-1.8.11.custom.css UI jQuery.
HTML-, 12.1.1, table. example.
!
JavaScript-.
.
jqGrid. , .
datatype, ,
local . xml, xmlstring, json, jsonstring, javascript
function.
height 150. , . , , .
. ,
.
colNames , .
colModel , , .
name . width , align
.
, .
sorttype , ,
. , int integer , . float/number/currency . data, text.

12.

233

.
, sorttype
.
, ,
sortable false. 12.1.1
.
,
, . , , ,
resizable false. 12.1.1 Id
.
multiselect. true,
. c checkbox . checkbox.
, 12.1.1,
caption. ,
.
mydata ,
. , name, colModel.
, . $.each
jQuery. , (
) . addRowData
+1 .
. 12.1.

. 12.1. jqGrid

234

II. jQuery

jqGrid . , , , , . , ,
12.1.2.
12.1.2. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-12-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
p { font-size: 2em; }
p a { margin:0 5px; }
</style>
<script type="text/javascript">
$(function(){
$("#example").jqGrid({
datatype: "local",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', width:50, sorttype:"int",resizable:false},
{name:'country_code', width:75, sorttype:"text"},
{name:'region_code', width:75, sortable:false},
{name:'city', width:300, align:"left", sorttype:"text"},
{name:'latitude', width:100, align:"center", sorttype:"float"},
{name:'longitude', width:100, align:"right", sorttype:"float"}
],
caption: " , "
});
var mydata = [ ];
$.each(mydata, function(i,val){

12.

235

$("#example").addRowData(i+1,val);
});
$("p a:first").click(function(){
var id = $("#example").getGridParam('selrow');
if(id) {
var row = $("#example").getRowData(id);
alert(row.city + ' [' + row.latitude + ', ' + row.longitude + ']');
} else {
alert(" !");
}
}).next().click(function(){
var datarow = {id:"9999", country_code:"RU", region_code:"643",
city:"Moscow", latitude:"55.755786121111", longitude:"37.617633343333"};
var add = $("#example").addRowData(9999,datarow);
if(add) { alert(" !"); }
}).next().click(function(){
var id = $("#example").getGridParam('selrow');
if(id) {
var upd = $("#example").setRowData(id, {city:"North Pole",
latitude:"90.0000", longitude:"-", region_code:"<img src='user.gif'/>"});
if(upd) { alert(" " + id + " !"); }
} else {
alert(" !");
}
}).next().click(function(){
var id = $("#example").getGridParam('selrow');
if(id) {
var del = $("#example").delRowData(id);
if(del) { alert(" " + id + " !"); }
} else {
alert(" !");
}
});
});
</script>
</head>
<body>
<table id="example"></table>
<p><a href="#"> </a>&nbsp;<a href="#"> </a>&nbsp;
<a href="#"> </a>&nbsp;<a href="#"> </a></p>
</body>
</html>

HTML-, 12.1.2, p, . .

236

II. jQuery

, , .
mydata , . .
JavaScript- .
a p click. getGridParam, selrow. selrow , id.
, getRowData
id. , , colModel, ,
. ,
row, , . .
, , .
, next,
, click.
. : datarow ,
"" . -
. addRowData,

datarow.
next a. click getGridParam, , .
, setRowData,
,
"" .
next a, ,
click, .
getGridParam, delRowData. .
jqGrid, .

JSON,
.
12.1.3. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

12.

237

<head>
<title>example-12-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
<script type="text/javascript">
$(function(){
$("#example").jqGrid({
url: "datafromserver.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', index:'id', width:50, sorttype:"int"},
{name:'country_code', index:'country_code', width:75, sorttype:"text"},
{name:'region_code', index:'region_code', width:75, sorttype:false},
{name:'city', index:'city', width:300, align:"right", sorttype:"text"},
{name:'latitude', index:'latitude', width:100, align:"right",
sorttype:"float"},
{name:'longitude', index:'longitude', width:100, align:"right",
sorttype:"float"}
],
rowNum:10,
rowList:[10,20,30],
pager: "#pager",
sortname: "city",
sortorder: "desc",
viewrecords: true,
caption: " JSON"
});
$("#example").jqGrid('navGrid','#pager',{edit:false, add:false, del:false,
search:false});
});
</script>
</head>
<body>

238

II. jQuery

<table id="example"></table>
<div id="pager"></div>
</body>
</html>

, 12.1.3, HTML-.
table, div pager
.
JavaScript-, , ,
jqGrid.
, ,
. ,
.
url . . ,
.
datatype . local, json .
height colNames , colModel . , , index. , , sidx ( )
, .
rowNum rowList. , , . ,
. , .
pager ,
.
sortname "" ,
, sortorder
. sortorder sord.
viewrecords true, ,
, , .
JavaScript-, , .
, jqGrid -

12.

239

. navGrid,
, pager,
, , edit, del, add search. ,
, false.
. 12.2.

. 12.2. jqGrid


navGrid
API, 12.1.1 12.1.2
addRowData, getGridParam, getRowData, addRowData, setRowData delRowData
API. .

, GET-,
12.1.3.
12.1.3. jqGrid
http://www.server.ru/datafromserver.php?_search=false&nd=1301680124043&rows=
10&page=90&sidx=city&sord=desc

_search false true. false, . . (


). nd .
: rows ,
, page , sidx ,
, sord .

240

II. jQuery

JSON-, ,
12.1.3.
12.1.3. jqGrid
{
"page":"90",
"total":1000,
"records":"10000",
"rows":[
{"id":"821","cell":["821","AT","03","Waldenstein","48.7167","15.0167"]},
{"id":"7555","cell":["7555","CH","01","Waldenburg","47.3833","7.75"]},
{"id":"820","cell":["820","AT","03","Waldegg","47.8667","16.0333"]},
{"id":"7381","cell":["7381","CA","SK","Waldeck","50.3667","-107.583"]},
{"id":"8395","cell":["8395","CH","25","Wald","47.2833","8.9167"]},
{"id":"3549","cell":["3549","BE","01","Walcourt","50.25","4.4167"]},
{"id":"8284","cell":["8284","CH","24","Walchwil","47.1","8.5167"]},
{"id":"2023","cell":["2023","AU","02","Walcha","-30.9833","151.6"]},
{"id":"4538","cell":["4538","BE","09","Wakken","50.9333","3.4"]},
{"id":"7253","cell":["7253","CA","QC","Wakefield","45.6333","-75.9333"]}
]
}

datafromserver.php, JSON, -,
. , SQL Dump ,
.
, .

, .
12.1.4. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-12-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">

12.

241

html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
<script type="text/javascript">
$(function(){
$("#example").jqGrid({
url:"datafromserver.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', index:'id', width:50, sorttype:"int"},
{name:'country_code', index:'country_code', width:75, sorttype:"date",
editable:true},
{name:'region_code', index:'region_code', width:75, sorttype:false,
editable:true},
{name:'city', index:'city', width:300, align:"right", sorttype:"date",
editable:true},
{name:'latitude', index:'latitude', width:100, align:"right",
sorttype:"float", editable:true},
{name:'longitude', index:'longitude', width:100, align:"right",
sorttype:"float", editable:true}
],
rowNum:10,
rowList:[10,20,30],
pager: "#pager",
sortname: "country_code",
viewrecords: true,
caption: ", ",
editurl: "dataoperation.php"
});
$("#example").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:fal
se});
});
</script>
</head>
<body>
<table id="example"></table>
<div id="pager"></div>
</body>
</html>

, 12.1.4, , 12.1.3.
, JavaScript- colModel
. , -

242

II. jQuery

, editable true
.
, .
editurl dataoperation.php , , .
JavaScript-, . true
edit, add del.

. 12.3. jqGrid.

. 12.3 ,
. ( ).
dataoperation.php -,
.

. ,
, jqGrid .
12.1.5. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

12.
<head>
<title>example-12-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
<script type="text/javascript">
$(function(){
var lastsel;
$("#example").jqGrid({
url:"datafromserver.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', index:'id', width:50, sorttype:"int"},
{name:'country_code', index:'country_code', width:75, sorttype:"date",
editable:true},
{name:'region_code', index:'region_code', width:75, sorttype:false,
editable:true},
{name:'city', index:'city', width:300, align:"right", sorttype:"date",
editable:true},
{name:'latitude', index:'latitude', width:100, align:"right",
sorttype:"float", editable:true},
{name:'longitude', index:'longitude', width:100, align:"right",
sorttype:"float", editable:true}
],
rowNum:10,
rowList:[10,20,30],
pager: "#pager",
sortname: "country_code",
viewrecords: true,
caption: " ",
onSelectRow: function(id) {
if(id && id !== lastsel) {
$('#example').jqGrid('restoreRow', lastsel);
$('#example').jqGrid('editRow', id, true);

243

244

II. jQuery

lastsel = id;
}
},
editurl: "dataoperation.php"
});
$("#example").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,
search:false});
});
</script>
</head>
<body>
<table id="example"></table>
<div id="pager"></div>
</body>
</html>

, 12.1.5, . , lastsel. -,
( JavaScript-) edit, add,
del search false. , -,
, onSelectRow.
onSelectRow ,
.
, , , restoreRow editRow.
12.1.5 id . restoreRow editRow if.
, , "" .
editRow input ( ),
value input. restoreRow value input
.
jqGrid .
12.1.6 ,
.
12.1.6. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-12-1-6</title>

12.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
<script type="text/javascript">
$(function(){
$("#example").jqGrid({
url:"datafromserver2.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', index:'id', width:50, sorttype:"int"},
{name:'country_code', index:'country_code', width:75, sorttype:"date",
search:false},
{name:'region_code', index:'region_code', width:75, sorttype:false},
{name:'city', index:'city', width:300, align:"right", sorttype:"date",
search:false},
{name:'latitude', index:'latitude', width:100, align:"right",
sorttype:"float"},
{name:'longitude', index:'longitude', width:100, align:"right",
sorttype:"float"}
],
rowNum:10,
rowList:[10,20,30],
pager: "#pager",
sortname: "country_code",
viewrecords: true,
caption: " "
});
$("#example").jqGrid('navGrid','#pager',{ edit:false, add:false, del:false,
search:true });
$("#example").jqGrid('searchGrid', {sopt:['eq','lt','gt'], caption:
"..."});
});
</script>
</head>
<body>
<table id="example"></table>

245

II. jQuery

246
<div id="pager"></div>
</body>
</html>

.
JavaScript-
, searchGrid.
, . sopt ,
,
. eq , lt gt .
. 12.4 .

. 12.4. jqGrid.

, jqGrid ,
.
datafromserver2.php, -,
.
.
, ( 12.1.7).
12.1.7. jqGrid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

12.

247

<head>
<title>example-12-1-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
<script type="text/javascript">
$(function(){
$("#example").jqGrid({
url:"datafromserver2.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{name:'id', index:'id', width:50, sorttype:"int"},
{name:'country_code', index:'country_code', width:75},
{name:'region_code', index:'region_code', width:75},
{name:'city', index:'city', width:300, align:"right"},
{name:'latitude', index:'latitude', width:100, align:"right"},
{name:'longitude', index:'longitude', width:100, align:"right"}
],
rowNum:100,
rowTotal: 10000,
rowList:[30,50,100],
loadonce:true,
rownumbers: true,
rownumWidth: 40,
pager: "#pager",
sortname: "country_code",
viewrecords: true,
caption: " "
});
$("#example").jqGrid('navGrid','#pager', {edit:false, add:false, del:false,
search:false});
$("#example").jqGrid('filterToolbar', {searchOnEnter:false});
});

II. jQuery

248
</script>
</head>
<body>
<table id="example"></table>
<div id="pager"></div>
</body>
</html>

jqGrid. rowNum , , rowTotal . ,


. , , loadonce true. rownumbers true
, rownumWidth 40
.
JavaScript-
, .
filterToolbar, searchOnEnter. false, ,
<Enter>,
.
. 12.5 .

. 12.5. jqGrid.

12.

249

!
datafromserver.php, datafromserver2.php dataoperation.php
jqGrid
. .

, jqGrid . , , ,
. jqGrid
http://trirand.com/blog/jqgrid/jqgrid.html.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:
jqgriddocs.

13


-,
- , .

. , jQuery -.

13.1. jqPlot

- .

jqPlot jQuery ,
. , .
, ,
. 13.1.1 jqPlot.
13.1.1. jqPlot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

13.

251

<head>
<title>example-13-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript"
src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
<script type="text/javascript">
$(function(){
$.jqplot("example",
[[[0,0],[1,2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
});
</script>
</head>
<body>
<div id="example" style="height:300px;width:400px; "></div>
</body>
</html>

, . 13.1, , 13.1.1.
, . 13.1, , 13.1.1 JavaScript- HTML-, div example , style.
,
- , ,
, jQuery js/jquery-1.5.2.min.js. jquery.jqplot.min.js
jquery.jqplot.css.
,
IE excanvas.min.js. , , , <canvas>
HTML 5,
JavaScript. FireFox, Opera, Chrome, Safari <canvas>.
, Internet Explorer 8-
. Google, IE API Canvas, excanvas.js.
JavaScript- 13.1.1.
, ,
, ,
. jqPlot .

252

II. jQuery

. 13.1. jqPlot

( ) , . ,
- jqPlot ,
.
, 13.1.2.
13.1.2. jqPlot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-13-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript"
src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
<script type="text/javascript">
$(function(){
line1 = [[1,2],[2,4],[3,8],[4,16],[5,8],[6,4],[7,2],[8,1]];

13.

253

line2 = [4, 8, 16, 24, 16, 16, 8, 4];


line3 = [16, 16, 12, 18, 26, 24, 6, 2];
$.jqplot("example",
[line1,line2,line3],
{
title: " ",
axes: {
yaxis: {
min:0, max:30
},
xaxis: {
min:0, max:8
}
},
series: [
{ color:"#4bb2c5",label:"" },
{ color:"#EAA228",label:"" },
{ color:"#839557",label:"" }
],
legend: {
show: true,
location: "ne",
xoffset: 12,
yoffset: 12 }
}
);
});
</script>
</head>
<body>
<div id="example" style="height:300px;width:600px; "></div>
</body>
</html>

, 13.1.2.
, HTML- - div example, JavaScript-
. .
(. 13.2).
, JavaScript-, , . jqPlot, , , , ,
. ,
.

254

II. jQuery

. 13.2. jqPlot

, title, ,
.
axes. ,
yaxis xaxis .
yaxis xaxis , . 13.1.2, min max
.
series , , - . ,
color , label .
, 13.1.2, legend
, . show
. true .
location . ne
(ne nord-east, -). xoffset
yoffset .
, , , 13.1.3.

13.

255

13.1.3. jqPlot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-13-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript"
src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
<script type="text/javascript"
src="js/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript">
$(function(){
line1 = [["",3], ["",7], ["",2.5], ["",6],
["",5], ["",4]];
$.jqplot("example", [line1], {
title: " ",
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
sliceMargin:8
}
},
legend: { show:true }
});
});
</script>
</head>
<body>
<div id="example" style="height:340px; width:540px;"></div>
</body>
</html>

. 13.3,
.
13.1.3. HTML-
, , style
div.
. js/plugins/jqplot.pieRenderer.min.js,
, .
, , jqPlot,
jQuery, , -

256

II. jQuery

.
jqplot.pieRenderer.min.js.
JavaScript-. ,
. , line1. , , .
jqPlot, ,
. , . , , .

. 13.3. jqPlot

. title , legend
.
seriesDefaults .
, .
, .
renderer $.jqplot.PieRenderer,
$.jqplot.LineRenderer,

13.

257

, . rendererOptions, ,
sliceMargin ,
.
, .
13.1.4.
13.1.4. jqPlot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-13-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript"
src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"
/></script>
<script type="text/javascript"
src="js/plugins/jqplot.categoryAxisRenderer.min.js" /></script>
<script type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"
/></script>
<script type="text/javascript">
$(function(){
line1 = [14, 32, 41, 44, 40, 37, 29];
line2 = [7, 12, 15, 17, 20, 27, 39];
$.jqplot("example", [line1, line2], {
title: " ",
stackSeries: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: { barMargin: 25 },
pointLabels: { show: true, stackedValue: true }
},
axes: {
xaxis:{ renderer:$.jqplot.CategoryAxisRenderer },
yaxis:{ ticks:[0, 20, 40, 60, 80] }
}
});
});
</script>
</head>
<body>

258

II. jQuery

<div id="example" style="height:320px; width:480px;"></div>


</body>
</html>

, (. 13.4).

. 13.4. jqPlot

HTML- ,
,
. 13.4. jQuery, jqPlot
, js/plugins/jqplot.barRenderer.min.js,
js/plugins/jqplot.categoryAxisRenderer.min.js js/plugins/jqplot.pointLabels.min.js.
JavaScript- , , , "
", JavaScript- 13.1.4, , .
, . ,
line1 line2. jqPlot.
div, . , .
title .
stackSeries .
. true

13.

259

"". seriesDefaults
. renderer $.jqplot.BarRenderer, . rendererOptions
barMargin, . , , pointLabels,
show stackedValue. true , "", .
axes , . xaxis ,
renderer $.jqplot.CategoryAxisRenderer . .
jqPlot, X. .
,
, . yaxis , ticks , Y.
,
13.1.5.
13.1.5. jqPlot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-13-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript"
src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/plugins/jqplot.dragable.min.js"
/></script>
<script type="text/javascript" src="js/plugins/jqplot.trendline.min.js"
/></script>
<script type="text/javascript">
$(function(){
$.jqplot.config.enablePlugins = true;
line1=[4, 25, 13, 22, 14, 17, 15];
$.jqplot("example", [line1],
{ title: " " }
);
});
</script>

260

II. jQuery

</head>
<body>
<div id="example" style="height:320px; width:480px;"></div>
</body>
</html>

(. 13.5).

. 13.5. jqPlot

jqPlot. -,
, ( ) .
-, .

. , 13.1.5,
: js/plugins/jqplot.dragable.min.js js/plugins/jqplot.trendline.min.js.
,
.
JavaScript- , . .
, . , , , .

13.

261

$.jqplot.config.enablePlugins = true,
. 0.9.7
, true
enablePlugins show , (
13.1.4 pointLabels).
,
jqPlot , , .
http://www.jqplot.com/,
http://www.jqplot.com/docs/files/
jqPlotOptions-txt.html.

14

AJAX-
14.1. jQuery Form

- HTML- .
,
AJAX.

jQuery Form, ( 14.1.1).


14.1.1. jQuery Form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/form.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var options = {
target: "#output",
beforeSubmit: showRequest,
success: showResponse,
timeout: 3000
};

14. AJAX-
$("#myForm").submit(function() {
$(this).ajaxSubmit(options);
return false;
});
//
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert(' : \n\n' + queryString);
return true;
}
//
function showResponse(responseText, statusText) {
alert(' : ' + statusText +
'\n\n : \n' + responseText +
'\n\n #output.');
}
});
</script>
</head>
<body>
<div id="output">&nbsp;</div>
<form id="myForm" action="form.php" method="post">
<div>
<input type="hidden" name="Hidden" value="hidden Value" /><br />
<label>:</label>
<input name="Name" type="text" value=" " /><br />
<label>:</label>
<input name="Password" type="password" /><br />
<label>:</label>
<select class="ms" name="Multiple[]" multiple="multiple">
<optgroup label=" 1">
<option value="one" selected="selected"> </option>
<option value="two"> </option>
<option value="three"> </option>
</optgroup>
<optgroup label=" 2">
<option value="four"> </option>
<option value="five"> </option>
<option value="six"> </option>
<option value="seven"> </option>
</optgroup>
</select><br />

263

264

II. jQuery

<label> select:</label>
<select name="Single">
<option value="one" selected="selected"> </option>
<option value="two"> </option>
<option value="three"> </option>
</select><br />
<label> select 2:</label>
<select name="Single2">
<optgroup label=" 1">
<option value="A" selected="selected"> A</option>
<option value="B"> B</option>
<option value="C"> C</option>
</optgroup>
<optgroup label=" 2">
<option value="D"> D</option>
<option value="E"> E</option>
<option value="F"> F</option>
<option value="G"> G</option>
</optgroup>
</select><br />
<label> :</label>
<input name="File" type="file" /><br />
<label>:</label>
<input class="cb" type="checkbox" name="Check" value="1" />
<input class="cb" type="checkbox" name="Check" value="2" />
<input class="cb" type="checkbox" name="Check" value="3" /><br />
<label>:</label>
<input class="rb" type="radio" name="Radio" value="1" />
<input class="rb" type="radio" name="Radio" value="2" />
<input class="rb" type="radio" name="Radio" value="3" /><br />
<label> :</label>
<textarea class="ta" name="Text" rows="2" cols="20">
textarea</textarea><br />
<input id="reset" type="reset" name="resetButton" value="Reset" />
<input id="submit2" type="image" name="submitButton" value="Submit2"
src="img/form.gif" />
<input id="submit1" type="submit" name="submitButton" value="Submit1" />
</div>
</form>
</body>
</html>

14.1.1 HTML-, , . -

14. AJAX-

265

form.php POST.
- , JavaScript .
AJAX-.
- js/jquery1.5.2.min.js js/jquery.form.js.
css/form.css .
HTML- . , div output , .
JavaScript-.
options. ,
ajaxSubmit(options) .
14.1.1.
14.1.1. jQuery Form
var options = {
target: "#output",
beforeSubmit: showRequest,
success: showResponse,
timeout: 3000
};

target options , .
beforeSubmit , . - .
true, , false, ( 14.1.1).
14.1.1. jQuery Form
//
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert(' : \n\n' + queryString);
return true;
}

showRequest , , , options,
, , , ,
url, form.php POST.
$.param ,
, .

266

II. jQuery

success showResponse, . , 14.1.1.


14.1.1. jQuery Form
//
function showResponse(responseText, statusText) {
alert(' : ' + statusText +
'\n\n : \n' + responseText +
'\n\n #output.');
}

showResponse , , . statusText success .


error , , timeout.
responseText?
, 14.1.1, ,
.
14.1.1. jQuery Form
<?php
header('Content-Type: text/html; charset=utf-8');
$time = date("H:i:s", time());
print '<h3> </h3>: '.$time.'<br />';
var_dump($_POST);
foreach($_FILES as $file) {
$n = $file['name'];
$s = $file['size'];
if (!$n) continue;
print "File: $n ($s bytes)";
}
?>

PHP- 14.1.1 , . ,
, , $time.
print, ,
. ,
$_POST $_FILES, ,
, .
http://malsup.com/jquery/form/.

14. AJAX-

267

14.2. jQuery Validate

- HTML-, AJAX jQuery Form.


,
.

jQuery Validate ( 14.2.1).


14.2.1. jQuery Validate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/form.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#myForm").validate({
rules: {
Name: {
required: true,
minlength: 2,
maxlength: 12
},
Email: {
required: true,
email: true
},
Url: {
url: true
},
Colors: {
required: true
},
Text: {
required: true,
maxlength: 24
},

268

II. jQuery
Password: {
required: true,
rangelength: [6, 24]
},
ConfirmPassword: {
required: true,
equalTo: "#Password"
},
Avatar: {
accept: "jpg|gif|png"
},
Agree: "required",
Radio: "required",
Examine: {
required: true,
equal: 13
}
},
messages: {
Name: {
required: " !",
minlength: " 2 ",
maxlength: " 12 "
},
Email: {
required: " email ",
email: "e-mail "
},
Url: {
url: " URL"
},
Colors: {
required: " "
},
Text: {
required: " ",
maxlength: " 24 "
},
Password: {
required: " ",
rangelength: " 6 24 "
},
ConfirmPassword: {
required: " ",
equalTo: " "
},
Avatar: {
accept: " jpg, gif png"
},

14. AJAX-
Agree: " ",
Radio: " ...",
Examine: {
required: " ",
equal: " ?"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
target: "#output",
timeout: 3000
});
},
errorPlacement: function(error, element) {
error.appendTo(
element.parent()
.find("label[for='" + element.attr("name") + "']")
.find("em")
);
}
});
$.validator.addMethod("equal", function(value, element, params) {
return value == params;
});
});
</script>
</head>
<body>
<div id="output"></div>
<form id="myForm" action="form.php" method="post">
<div>
<label for="Name">: (*)<em></em></label>
<input id="Name" name="Name" type="text" value="" /><br />
<label for="Email">E-mail: (*)<em></em></label>
<input id="Email" name="Email" type="text" value="" /><br />
<label for="Url">URL:<em></em></label>
<input id="Url" name="Url" type="text" value="" /><br />
<label for="Colors">Select: (*)<em></em></label>
<select id="Colors" name="Colors">
<option value=""></option>
<option value="red"></option>
<option value="orange"></option>
<option value="yellow"></option>
<option value="green"></option>
<option value="blue"></option>
<option value="deepblue"></option>
<option value="violet"></option>
</select><br />

269

270

II. jQuery

<label for="Text">Textarea: (*)<em></em></label>


<textarea id="Text" name="Text" rows="1" cols="20"></textarea><br />
<label for="Password">: (*)<em></em></label>
<input id="Password" name="Password" type="password" /><br />
<label for="ConfirmPassword"> : (*)<em></em></label>
<input id="ConfirmPassword" name="ConfirmPassword" type="password" /><br />
<label for="Avatar">:<em></em></label>
<input id="Avatar" name="Avatar" type="file" /><br />
<label for="Agree"> (*)<em></em></label>
<input class="cb" id="Agree" name="Agree" type="checkbox" /><br />
<label for="Radio">: (*)<em></em></label>
<input class="rb" type="radio" name="Radio" value="1" />
<input class="rb" type="radio" name="Radio" value="2" />
<input class="rb" type="radio" name="Radio" value="3" /><br />
<label for="Examine">6 + 7 = (*)<em></em></label>
<input id="Examine" name="Examine" type="text" value="" /><br />
<input id="reset" type="reset" name="resetButton" value="Reset" />
<input class="img" type="image" name="submitButton" value="Submit"
src="img/form.gif" />
</div>
</form>
</body>
</html>

, 14.2.1.
, . , e-mail-, URL . .
HTML-.
, body, div
#output. . , . .
, , . input text, password, file,
checkbox, radio, reset, image, select textarea.
, JavaScript-,
, , , .
, head - , .
css/form.css, JavaScript-. jQuery js/jquery-1.5.2.min.js,
jQuery Validate js/jquery.validate.js jQuery Form
js/jquery.form.js.

14. AJAX-

271


jQuery Form jQuery Validate
. jQuery Validate .

JavaScript-,
.
DOM, #myForm jQuery Validate.
rules, messages, submitHandler
errorPlacement.
rules messages . , name . ( , ), /
( rules), , ( messages).
, ,
. ,
, . name
Name, rules
Name. , : required, minlength maxlength. true, required,
, Name , 2,
minlength,
, 12 maxlength .
.
email url. true, ,
, , e-mail URL .
messages rules messages
. ,

.
Examine. , required true.
13, equal. ,
, - , .
, . ( 14.2.1).

272

II. jQuery

14.2.1. jQuery Validate


$.validator.addMethod("equal", function(value, element, params) {
return value == params;
});

, addMethod, , . equal. , . :
value , , element , HTML-, params , . true
false . 14.2.1
, value params
true, false.
addMethod , , , , .
submitHandler errorPlacement.
, submitHandler, submit , .
. ajaxSubmit()
jQuery Form . , target #output div, .
, , errorPlacement.
, .
error element. error
, element , , .
14.2.1. jQuery Validate
function(error, element) {
error.appendTo(element.parent()
.find("label[for='" + element.attr("name") + "']")
.find("em"));
}

, errorPlacement,
14.2.1. appendTo()
jQuery. appendTo() error ( ), appendTo() , -

14. AJAX-

273

, . ! , parent()
, element,
find(), label for, name , (
HTML- , , ),
find() em, label. em .
, jQuery
Validate, , , .
jQuery http://docs.jquery.com/Plugins/Validation.
http://
jquery.bassistance.de/validate/demo/.

14.3. jQuery Uploadify

- . ,
. . - .

jQuery Uploadify ( 14.3.1).


14.3.1. jQuery Uploadify
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/uploadify.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#fileInput").uploadify({
"uploader": "scripts/uploadify.swf",

274

II. jQuery

"script": "scripts/uploadify.php",
"cancelImg": "img/cancel.png",
"folder": "uploads"
});
$("a").click(function(){
$("#fileInput").uploadifyUpload();
});
});
</script>
</head>
<body>
<div>
<input id="fileInput" name="fileInput" type="file" />
<a href="#"> </a>
</div>
</body>
</html>

14.3.1 jQuery
Uploadify. .
HTML- input file id name,
a, .
head -.
: css/uploadify.css, js/jquery1.5.2.min.js jQuery, js/swfobject.js
swf- ( flash-)
js/jquery.uploadify.v2.1.4.js jQuery Uploadify.
-. JavaScript- ,
.
input #fileInput uploadify(options). .
uploader ( )
uploader.swf.
script , .
cancelImg , .
folder , .
, . , .

14. AJAX-

275

a click
input, jQuery Uploadify, uploadifyUpload().
uploadifyUpload() ( ).
14.3.1
input file
. flash Browse. , ( ),
( 14.3.2).
14.3.2. jQuery Uploadify
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/uploadify.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#fileInput").uploadify({
"uploader": "scripts/uploadify.swf",
"script": "scripts/uploadify.php",
"cancelImg": "img/cancel.png",
"folder": "uploads",
"multi": true,
"buttonImg": "img/browse.jpg",
"width": 130,
"height": 32,
"queueSizeLimit": 3
});
$("a:first").click(function(){
$("#fileInput").uploadifyUpload();
});
$("a:last").click(function(){
$("#fileInput").uploadifyClearQueue();
});
});
</script>
</head>
<body>
<div>

276

II. jQuery

<input id="fileInput" name="fileInput" type="file" />


<a href="#"> ()</a> <a href="#"> </a>
</div>
</body>
</html>

,
buttonImg width height.
JavaScript- 14.3.2, ,
, .
true, multi,
, ,
queueSizeLimit.
HTML- 14.3.2 a,
JavaScript- - click. #fileInput,
uploadifyClearQueue(). .
,
jQuery Uploadify. , 14.3.3.
14.3.3. jQuery Uploadify
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/uploadify.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#fileInput").uploadify({
"uploader": "scripts/uploadify.swf",
"script": "scripts/uploadify.php",
"cancelImg": "img/cancel.png",
"folder": "uploads",
"auto": true,
"sizeLimit": 2097152,
"fileDesc": "*.gif, *.jpg *.png",
"fileExt": "*.gif;*.jpg;*.png"
});
});

14. AJAX-

277

</script>
</head>
<body>
<div>
<input id="fileInput" name="fileInput" type="file" />
</div>
</body>
</html>

HTML- 14.3.3. input file , .


.
auto, true.
.
, , sizeLimit ( ).
fileExt, . 14.3.3
Browse ,
GIF-, JPG- PNG-. fileExt fileDesc
. , " " .

, .
.
jQuery Uploadify.
, ,
Browse. ,
-, ? ,
14.3.4 , .
14.3.4. jQuery Uploadify
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-3-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/uploadify.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>

278

II. jQuery

<script src="js/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>


<style type="text/css">
#fileQueue {
width:400px; height:200px;
border:1px solid #E5E5E5;
padding:0; margin-bottom:10px;
overflow:auto;
}
</style>
<script type="text/javascript">
$(function(){
$("#fileInput").uploadify({
"uploader": "scripts/uploadify.swf",
"script": "scripts/uploadify.php",
"cancelImg": "img/cancel.png",
"folder": "uploads",
"multi": true,
"buttonImg": "img/browse.jpg",
"width": 130,
"height": 32,
"queueID": "fileQueue",
"simUploadLimit": 2
});
$("a").click(function(){
$("#fileInput").uploadifyUpload();
});
$("a:last").click(function(){
$("#fileInput").uploadifyClearQueue();
});
});
</script>
</head>
<body>
<div id="fileQueue"></div>
<div>
<input id="fileInput" name="fileInput" type="file" /><br />
<a href="#"> ()</a> <a href="#"> </a>
</div>
</body>
</html>

HTML- 14.3.4. , input a div #fileQueue. , . , queueID id, . .


fileQueue.

14. AJAX-

279

simUploadLimit.
1. 14.3.4 2,
, , .
jQuery
Uploadify . , callback-, , 14.3.5.
14.3.5. jQuery Uploadify
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-14-3-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/uploadify.css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#fileInput").uploadify({
"uploader": "scripts/uploadify.swf",
"script": "scripts/uploadify.php",
"cancelImg": "img/cancel.png",
"folder": "uploads",
"onSelect": function(e,id,obj){
$("p").html(": " + e.type +
"<br />: " + id +
"<br /> : " + obj.name +
"<br /> : " + obj.size +
" <br /> : " + obj.creationDate.date +
"/" + obj.creationDate.month +
"/" + obj.creationDate.fullYear +
"<br /> : " + obj.modificationDate.date +
"/" + obj.modificationDate.month +
"/" + obj.modificationDate.fullYear +
"<br /> : " + obj.type);
},
"onProgress": function(e,id,obj,data){
$("p").html(": " + e.type +
"<br />: " + id +
"<br /> : " + obj.name +
"<br /> : " + obj.size +
" <br /> : " + obj.type +

280

II. jQuery
"<br /> : " + data.percentage +
"%<br /> : " + data.bytesLoaded +
" <br /> : " + data.speed + " KB/s");

},
"onComplete": function(e,id,obj,response,data){
$("p").html(": " + e.type +
"<br />: " + id +
"<br /> : " + obj.name +
"<br /> : " + obj.filePath +
"<br /> : " + obj.size +
" <br /> : " + obj.type +
"<br /> : " + response +
"<br /> : " + data.fileCount +
" <br /> : " + data.speed + " KB/s");
}
});
$("a").click(function(){
$("#fileInput").uploadifyUpload();
});
});
</script>
</head>
<body>
<div>
<input id="fileInput" name="fileInput" type="file" />
<a href="#"> </a>
</div>
<p></p>
</body>
</html>

JavaScript- 14.3.5,
, , , onSelect, onProgress onComplete.
onSelect ,
. ,
, , .
onProgress , .
, , ,
, .
, onComplete ,
. , , ,

14. AJAX-

281

, , , .
14.3.5,
, , , .
, ,
.
, , .
jQuery
Uploadify, , , . http://www.uploadify.com/.
.

15


, , , " ". ,
, ,
, , . , , , .
. jQuery , FancyBox.

15.1. FancyBox

-.

FancyBox ( 15.1.1).
15.1.1. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>

15.

283

<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />


<style type="text/css">
img { padding:2px; border:1px solid #ccc; margin:4px; }
a { outline:none; }
</style>
<script type="text/javascript">
$(function(){
$("a").fancybox();
});
</script>
</head>
<body>
<p>
<a title=" - 1:0" href="img/russia-greece.jpg">
<img src="img/russia-greece-min.jpg" alt=" - 1:0" />
</a>
<a title=" - 2:0" href="img/russia-sweden.jpg">
<img src="img/russia-sweden-min.jpg" alt=" - 2:0" />
</a>
<a title=" - 3:1" href="img/russia-holland.jpg">
<img src="img/russia-holland-min.jpg" alt=" - 3:1" />
</a>
</p>
</body>
</html>

, jQuery js/jquery-1.5.2.min.js js/jquery.fancybox-1.3.4.js.


js/jquery.fancybox-1.3.4.css.
, jquery.easing1.3.pack.js , ,
. ,
?
jquery.mousewheel-3.0.4.pack.js.

, ,
-, .

15.1.1
FancyBox - .
.

284

II. jQuery

HTML- -
a, href . title .
JavaScript- jQuery , fancybox().
. 15.1.
FancyBox , , / ( 15.1.2).

. 15.1. FancyBox

15.1.2. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<style type="text/css">

15.

285

img { padding:2px; border:1px solid #ccc; margin:4px; }


a { outline:none; }
</style>
<script type="text/javascript">
$(function(){
$("a[rel^='group']").fancybox({
"cyclic": true,
"speedIn": 2000,
"speedOut": 1000,
"overlayColor": "#f90",
"overlayOpacity": 0.7,
"transitionIn": "elastic",
"transitionOut": "elastic"
});
});
</script>
</head>
<body>
<p>
<a rel="group" title=" - 2:0" href="img/russia-sweden.jpg">
<img src="img/russia-sweden-min.jpg" alt="" />
</a>
<a rel="group" title=" " href="img/guus-hiddink.jpg">
<img src="img/guus-hiddink-min.jpg" alt="" />
</a>
<a rel="group" title=" " href="img/roman-pavlyuchenko.jpg">
<img src="img/roman-pavlyuchenko-min.jpg" alt="" />
</a>
<a rel="group" title=" - 3:1" href="img/russia-holland.jpg">
<img src="img/russia-holland-min.jpg" alt="" />
</a>
</p>
</body>
</html>

15.1.2, HTML-.
, a rel group.
rel "",
.
JavaScript- a, rel
group, fancybox().
, .
cyclic true, , , . .
.

II. jQuery

286

speedIn speedOut , / .
overlayColor overlayOpacity , .
transitionIn transitionOut .
elastic, .
. 15.1.
15.1. FancyBox

padding

.
10

margin


( ) .
20

opacity

false. true,
/
elastic

modal

false. true,
overlayShow true,
hideOnOverlayClick, hideOnContentClick, enableEscapeButton,
showCloseButton false. ,

ciclyc

true, , . .
.
false

scrolling

css- overflow . 'auto', 'yes' 'no'

width

,
AJAX- iframe. 560

height

,
AJAX- iframe. 340

autoScale

true.

,

autoDimensions

true. ,
AJAX-, , -. . , ,

senterOnScroll


, true.

15.

287
15.1 ()

ajax

, AJAX-.
error success

swf

swf-.
{wmode: 'transparent'}

hideOnOverlayClick

true, ,

hideOnContentClick

true, ,
.
false ,
iframe AJAX-

overlayShow

true
-

overlayOpacity

. 0 1
0.1. 0.3

overlayColor

.
#666

titleShow

true. false,

titlePosition

. 'outside', 'inside' 'over'. 'outside'

titleFormat

.
html-

transitionIn,
transitionOut

/
. 'elastic',
'fade' or 'none'. 'fade'

speedIn,

/
. .
300

speedOut
changeSpeed

. . 300

changeFade

. 'fast'

easingIn,
easingOut

, / .
jquery.easing.js.
. http://gsgd.co.uk/sandbox/jquery/easing/

showCloseButton

true.
, false

II. jQuery

288

15.1 ()

showNavArrows

true.
/ , false

enableEscapeButton

true
<Esc> .
, false

onStart

onCancel

onComplete

onCleanup

onClosed

, 15.1.3,
, onStart, onComplete onClosed.
15.1.3. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<style type="text/css">
img { padding:2px; border:1px solid #ccc; margin:4px; }
a { outline:none; }
</style>
<script type="text/javascript">
$(function(){
$("a").fancybox({
"titlePosition": "over",
"onStart": function(){ alert('START'); },
"onComplete": function(){ alert('COMPLETE'); },
"onClosed":
function(){ alert('CLOSED'); }
});
});

15.

289

</script>
</head>
<body>
<p>
<a title=" " href="img/yuri-zhirkov.jpg">
<img src="img/yuri-zhirkov-min.jpg" alt=" " />
</a>
</p>
</body>
</html>

HTML- 15.1.3 , a, href .


JavaScript-. a , . onStart,
onComplete onClosed ,

.
,
START. COMPLETE. ,
CLOSED.
onCancel onCleanup.
15.1.4
FancyBox. , , "" .
15.1.4. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
$("#open").click(function() {
$.fancybox([
"img/yuri-zhirkov.jpg",
"img/roman-pavlyuchenko.jpg",

II. jQuery

290
{
"href": "img/guus-hiddink.jpg",
"title": " "
}],
{
"titlePosition": "over",
"overlayShow": false,
"type": "image"
});

});
$("#prev").click($.fancybox.prev);
$("#next").click($.fancybox.next);
$("#close").click($.fancybox.close);
});
</script>
</head>
<body>
<p><a id="open" href="#"></a></p>
<p><a id="prev" href="#"></a></p>
<p><a id="next" href="#"></a></p>
<p><a id="close" href="#"></a></p>
</body>
</html>

HTML- 15.1.4. a
, .
JavaScript- a
click.
a open.
, , . , . ,
href title. href ,
title .
, , .
titlePosition,
overlayShow false, , image type.
, , "" .
click . 15.1.4, , click a next

15.

291

$.fancybox.next.
$.fancybox.close.

$.fancybox.prev

flash .
YouTube ( 15.1.5).
15.1.5. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
$("#youtube").click(function() {
$.fancybox({
"padding": 10,
"autoScale": false,
"transitionIn": "none",
"transitionOut": "none",
"title": this.title,
"width": 680,
"height": 495,
"href": this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
"type": "swf",
"swf": {
"wmode": "transparent",
"allowfullscreen": "true"
}
});
return false;
});
});
</script>
</head>
<body>
<p><a id="youtube" title=" "
href="http://www.youtube.com/watch?v=mof6hZ-8Glw&feature=related">
YouTube</a></p>
</body>
</html>

II. jQuery

292

HTML-, 15.1.5, a youtube. href , title


.
JavaScript- .
. . , title . ,
this , .
, this.title title .
. 15.2.
15.2. FancyBox

type

. 'image',
'ajax', 'iframe', 'swf' 'inline'

href

title

content

( HTML)

orig

,
/ elastic

index

,
"" . . 15.1.4

FancyBox iframe .
15.1.6.
15.1.6. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<style type="text/css">
img { padding:2px; border:1px solid #ccc; margin:4px; }
a { outline:none; }
</style>

15.

293

<script type="text/javascript">
$(function(){
$("a:first").fancybox({
"width": "75%",
"height": "75%",
"autoScale": false,
"transitionIn": "none",
"transitionOut": "none",
"type": "iframe"
});
});
</script>
</head>
<body>
<p>
<a href="http://www.google.ru">
<img src="img/google-min.jpg" alt="Google" />
</a>
</p>
</body>
</html>

HTML-, 15.1.6, a. href Google.


, .
type iframe.
FancyBox , , , LightBox. (.
15.1.7) FancyBox
, LightBox,
titleFormat.
15.1.7. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<style type="text/css">
img { padding:2px; border:1px solid #ccc; margin:4px; }
a { outline:none; }

294

II. jQuery

#tip-title { text-align:left; }
#tip-title strong { display:block; margin-right:80px; }
#tip-title span { float:right; }
#tip-title img { border:none; }
</style>
<script type="text/javascript">
$(function(){
function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip-title"><span><a href="javascript:;"
onclick="$.fancybox.close();"><img src="img/closelabel.gif" /></a></span>' +
(title && title.length ? '<strong>' + title + '</strong>' : '' ) + '
' + (currentIndex + 1) + ' ' + currentArray.length + '</div>';
}
$("a[rel='group']").fancybox({
"showCloseButton": false,
"titlePosition": "inside",
"titleFormat": formatTitle
});
});
</script>
</head>
<body>
<p>
<a rel="group" title=" - 2:0" href="img/russia-sweden.jpg">
<img src="img/russia-sweden-min.jpg" alt="" />
</a>
<a rel="group" title=" " href="img/guus-hiddink.jpg">
<img src="img/guus-hiddink-min.jpg" alt="" />
</a>
<a rel="group" title=" " href="img/roman-pavlyuchenko.jpg">
<img src="img/roman-pavlyuchenko-min.jpg" alt="" />
</a>
<a rel="group" title=" - 3:1" href="img/russia-holland.jpg">
<img src="img/russia-holland-min.jpg" alt="" />
</a>
</p>
</body>
</html>

JavaScript-, HTML-, 15.1.7, . ,


, , . ,
, titleFormat. , .
JavaScript- formatTitle(title, currentArray,
currentIndex, currentOpts),

15.

295

, , , HTML-.
, , style
CSS- tip-title
.
, HTML-,
formatTitle, CSS- , , FancyBox
LightBox.
( 15.1.8), ,
, CSS- display:none;.
15.1.8. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-8</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=" js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<style type="text/css">
a { outline:none; }
#information {
overflow:auto;
width:500px; height:100px;
}
#outer {
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$("#show").fancybox({
"titlePosition": "inside",
"transitionIn": "none",
"transitionOut": "none"
});
});
</script>
</head>
<body>
<p><a id="show" href="#information" title=" "></a></p>
<div id="outer"><div id="information">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit

296

II. jQuery

amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu
nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit
mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac
tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis
rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare,
faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas
nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus
vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec
eleifend sit amet, vestibulum sed nunc.</div></div>
</body>
</html>

, HTML-, 15.1.8,
display:none; div information, div#outer. , ,
FancyBox, ,
. .
, AJAX-. 15.1.9.
15.1.9. FancyBox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-15-1-9</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" href="js/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<style type="text/css">
a { outline:none; }
</style>
<script type="text/javascript">
$(function(){
$("a:first").fancybox();
});
</script>
</head>
<body>
<p><a href="ajax.htm" title=" ">AJAX-</a></p>
</body>
</html>

HTML-, JavaScript-, 15.1.9, , .


, , .
FancyBox -
http://fancybox.net.

16


, jQuery, -
. jQuery Cookie ,
cookie, jQuery Timers ,
jQuery Cluetip -.

16.1. jQuery Cookie

DOM -,
, .

,
jQuery Cookie ( 16.1.1).
16.1.1. jQuery Cookie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">

298

II. jQuery

$(function(){
var options = { path: "/", expires: 10 };
$("#setCookie").click(function(){
$.cookie("testCookie", " cookie", options);
});
$("#getCookie").click(function(){
alert($.cookie("testCookie"));
});
$("#delCookie").click(function(){
$.cookie("testCookie", null, options);
});
});
</script>
</head>
<body>
<button id="setCookie">Set Cookie</button>
<button id="getCookie">Get Cookie</button>
<button id="delCookie">Delete Cookie</button>
</body>
</html>

, jQuery jquery.cookie.js. HTML-


, (Get Cookie), (Set
Cookie) (Delete Cookie) cookie.
cookie, $.cookie(name,
value, [options]), , cookie. ()
options, cookie, expires,
path, domain, secure.
cookie,
$.cookie(name), cookie.
cookie
null.
, , cookie
options,
cookie .
https://github.com/
carhartl/jquery-cookie.

16.

299

16.2. jQuery Timers

-
- .

jQuery Timers.
16.2.1 ,
- , .
16.2.1. jQuery Timers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.timers.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("span").everyTime(1000,function(i) {
$(this).text(i);
});
});
</script>
</head>
<body>
<div> <span>0</span> </div>
</body>
</html>

jQuery
jquery.timers.js. HTML- div span, ,
.
JavaScript-. span everyTime(), . , . callback- i
. , , -

300

II. jQuery

, , . span.
, jQuery
Timers ( 16.2.2).
16.2.2. jQuery Timers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-2-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.timers.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#start").click(function() {
$("span").everyTime(1000, "myTimer", function(i) {
$(this).text(i);
}, 60);
});
$("#stop").click(function() {
$("span").stopTime("myTimer");
});
});
</script>
</head>
<body>
<div> <span>0</span> </div>
<button id="start"></button>
<button id="stop"></button>
</body>
</html>

. click(), callback-.
span
everyTime(). , ,
, . . , . , , , .

16.

301

span , .
span ,
stopTimer(), . ,
, .
, , ,
. oneTime() "" . , 16.2.3.
16.2.3. jQuery Timers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-2-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.timers.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").oneTime("5s", function() {
$(this).hide(1500);
});
});
</script>
</head>
<body>
<div> 5 </div>
</body>
</html>

HTML- div, ,
5 . JavaScript-. , , div oneTime().
, ,
callback-, , . ,

, .
jQuery
http://plugins.jquery.com/project/timers
http://jquery.offput.ca/timers/.

302

II. jQuery

16.3. jQuery Cluetip

, , title, . , -, , ,
.

jQuery Cluetip.
16.3.1 title a.
16.3.1. jQuery Cluetip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.cluetip.css" />
<script type="text/javascript">
$(function(){
$("a:first").cluetip({
splitTitle: "|"
});
});
</script>
</head>
<body>
<a href="#" title=" jQuery Cluetip|
- .">jQuery Cluetip</a>
</body>
</html>

jQuery, js/jquery.cluetip.js
css/jquery.cluetip.css.
, .

16.

303

HTML- , title,
.
JavaScript-. jQuery
, .
splitTitle, . , . ,
title , , , , .
. 16.1.

. 16.1. jQuery Cluetip

jQuery Cluetip
, AJAX- ( 16.3.2).
16.3.2. jQuery Cluetip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-3-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.cluetip.css" />
<script type="text/javascript">
$(function(){
$("a.basic").cluetip();
});

304

II. jQuery

</script>
</head>
<body>
<a class="basic" href="#" rel="ajax.htm">
ajax-</a>, title.
</body>
</html>

JavaScript-, HTML. rel a , . , - .


jQuery Cluetip
, ( 16.3.3).
16.3.3. jQuery Cluetip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-16-3-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.cluetip.css" />
<style type="text/css">
body { position:relative; }
</style>
<script type="text/javascript">
$(function(){
$("a.local").cluetip({
local: true,
arrows: true,
sticky: true,
closePosition: "bottom",
closeText: "",
cluetipClass: "jtip"
});
});
</script>
</head>
<body>
<p> jQuery Cluetip <a class="local" href="#" rel="p.loadme"
title=" "></a> .</p>

16.

305

<p class="loadme">
p, <strong>loadme</strong>
.</p>
</body>
</html>

16.3.3 ,
local:true, rel a , .
, .
, . 16.1.
16.1. jQuery Cluetip

width

.
275

height

.
auto

cluezIndex

CSS- z-index . 97

positionBy

. : auto ( ), mouse, bottomTop, fixed. fixed topOffset


leftOffset

topOffset


. 15 px

leftOffset


. 15 px

local

false. true,

hideLocal

local.
true, , .
false, ,

attribute

, .
rel

titleAttribute

,
. title

splitTitle

,
title

II. jQuery

306

16.1 ()

showTitle

true,

cluetipClass

, 'cluetip-'. default. ,
jtip rounded

hoverClass

, mouseover mouseout

waitImage

, jquery.cluetip.css. true ()

arrows

false. true,

dropShadow

true. ,
, false

dropShadowSteps

. 6

sticky

false. true,
,

mouseOutClose

false. true,
,

activation

hover,

. click

clickThrough

true. activation , click,


tracking

false. true,
(
)

delayedClose

0. ,
( )

closePosition

,
( sticky: true). top.
bottom title

closeText

close. HTML-, ( sticky: true)

truncate

, .
0 ( )

fx


. , :
open openSpeed. , ,
open show ( ), slideDown
fadeIn. openSpeed
, ,
slow, normal fast

16.

307
16.1 ()

onActivate

,
. , true

onShow

ajaxCache

true.
AJAX-,

ajaxProcess

, ,

ajaxSettings

,
AJAX-, , :
error, complete, success, url

-
jQuery Cluetip http://plugins.learningjquery.com/cluetip/ jQuery http://plugins.jquery.com/project/cluetip.

17

UI jQuery
, , . jQuery, ,
. .

jQuery, .
http://jqueryui.com/download
. , .

17.1. Accordion
/ ,
. .

,
Accordion.

Accordion . 17.1.

- Accordion.

17.1.1. "smoothness".

17. UI jQuery

309

. 17.1. Accordion

17.1.1. Accordion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion();
});
</script>
</head>
<body>
<div id="accordion">

310

II. jQuery

<h3><a href="#">Section 1</a></h3>


<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus.</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
lobortis. Phasellus pellentesque purus in massa.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.</p>
<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat
lectus.</p>
</div>
</div>
//
// Accordion
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="destroy">Destroy</button>
<button id="getter">Get Option</button>
<button id="setter">Set Option</button>
<button id="activate">Activate</button>
</body>
</html>

, Accordion HTML-,
17.1.1. ,
a (
<h3>), div. div .
, css/smoothness/jquery-ui-1.8.9.custom.css
.

17. UI jQuery

311

js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,
UI Accordion.
HTML- , 17.1.2.
17.1.2. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion();
});
</script>

17.1.2 . , , ,
.
, , .
, 17.1.3 , , HTML- .
17.1.3. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
autoHeight: false,
active: 2
});
});
</script>

17.1.3, ,
, . 17.1.1
,
. ,
.
. 17.1 .
17.1. Accordion

disabled

false. true,
Accordion , , , -

II. jQuery

312

17.1 ()

active

, .
first child, . . . false , .
,
collapsible: true

animated

. false
, ( ). 'bounceslide' 'easeslide',
jQuery Easing

autoHeight

.
true . false ,

clearStyle

false. true,
CSS- height
overflow.
. autoHeight

collapsible

false.
true,
, ,

event

, .
'click'.
'mouseover'

fillSpace

false. true , . autoHeight

header

a.
, header: 'h3'

icons

. ,
/. 'header':
'ui-icon-plus' 'headerSelected': 'ui-icon-minus'.
CSS, . , jQuery UI ThemeRoller

navigation

false. true,
. , ,
,
. HTML-
(. 17.1.4)

navigationFilter

, -
, .
navigation

17.1.4 Accordion.
.

17. UI jQuery

313

17.1.4. Accordion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
header: '.head',
event: 'mouseover',
fillSpace: true,
navigation: true
});
});
</script>
<style type="text/css">
#accordion {
width:200px;
}
</style>
</head>
<body>
<ul id="accordion">
<li>
<a class="head" href="?p=1.1">Guitar</a>
<ul>
<li><a href="?p=1.1.1">Electric</a></li>
<li><a href="?p=1.1.2">Acoustic</a></li>
<li><a href="?p=1.1.3">Amps</a></li>
<li><a href="?p=1.1.4">Effects A</a></li>
<li><a href="?p=1.1.5">Effects B</a></li>
<li><a href="?p=1.1.6">Effects C</a></li>
<li><a href="?p=1.1.7">Effects D</a></li>
<li><a href="?p=1.1.8">Accessories</a></li>
</ul>
</li>
<li>
<a class="head" href="?p=1.2">Bass</a>
<ul>
<li><a href="?p=1.2.1">Electric</a></li>
<li><a href="?p=1.2.2">Acoustic</a></li>
<li><a href="?p=1.2.3">Amps</a></li>

314

II. jQuery

<li><a href="?p=1.2.4">Effects</a></li>
<li><a href="?p=1.2.5">Accessories</a></li>
</ul>
</li>
<li>
<a class="head" href="?p=1.3">Drums</a>
<ul>
<li><a href="?p=1.3.1">Acoustic Drums</a></li>
<li><a href="?p=1.3.2">Electronic Drums</a></li>
<li><a href="?p=1.3.3">Cymbals</a></li>
<li><a href="?p=1.3.4">Hardware</a></li>
<li><a href="?p=1.3.5">Accessories</a></li>
</ul>
</li>
</ul>
</body>
</html>

HTML-, . ,
, . navigation: true, ,
, ,
, .
. ,
.
17.1.5.
17.1.5. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
autoHeight: false,
active: 2,
change: function(event, ui) {
alert(' ' + event.type);
}
});
});
</script>

17.1.5 change,
callback-, . callback- . event, ui,
:

17. UI jQuery

315

ui.newHeader ;
ui.oldHeader ;
ui.newContent ;
ui.oldContent .

17.1.6 , .
17.1.6. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
autoHeight: false,
active: 2,
change: function(event, ui) {
alert(' : ' + ui.oldHeader.find('a').text() +
'\n : ' + ui.newContent.text());
}
});
});
</script>

17.1.6 change callback-, , ui, . ,


, , , .
. 17.2 ,
callback-, .
17.2. Accordion

create

accordioncreate

changestart

accordionchangestart

change

accordionchange

,
. ,
,

. Accordion , (. 17.3).

316

II. jQuery
17.3. Accordion

destroy


Accordion. ,

.accordion('destroy')
disable
.accordion('disable')
enable
.accordion('enable')
option
.accordion('option', optionName,
[value])

.
enable

,
disable

option
.accordion('option', optionName)

widget

, Accordion

activate

. index
( )
jQuery,
. 1,
(
collapsible:true)

.accordion('activate', index)

resize

(
fillSpace: true)

destroy, disable enable 17.1.7.


, , ,
.
17.1.7. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
autoHeight: false,
active: 2
});
$("#disable").click(function(){
$("#accordion").accordion('disable');
});

17. UI jQuery

317

$("#enable").click(function(){
$("#accordion").accordion('enable');
});
$("#destroy").click(function(){
$("#accordion").accordion('destroy');
});
});
</script>

17.1.7.
. . Accordion , . Disable, , .
Enable, . Destroy
,
.
.
17.1.8 , -
.
17.1.8. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
autoHeight: false,
active: 2,
animated: false
});
$("#getter").click(function(){
alert('animated: '+$("#accordion").accordion('option', 'animated'));
});
$("#setter").click(function(){
$("#accordion").accordion('option', 'animated', 'slide');
alert('animated: '+$("#accordion").accordion('option', 'animated'));
});
});
</script>

17.1.8
animated: false, , , .
, . Get Option,
, animated.

318

II. jQuery

'slide', Set Option.


: animated: slide. ,
. , .
17.1.9 activate.
17.1.9. Accordion
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
active: 2,
collapsible:true
});
$("#activate").click(function(){
$("#accordion").accordion('activate', 'h3:last');
});
});
</script>

,
Activate (, ) .
, jQuery.
, , 'h3:first' 1.
1 .
,
'collapsible: true'.

17.2. Datepicker
Datepicker , .
, . , ( <Esc>) .
Datepicker . 17.2.

- Datepicker.

17.2.1. "lightness".

17. UI jQuery

319

. 17.2. Datepicker

17.2.1. Datepicker
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>

320

II. jQuery

<p>: <input id="datepicker" type="text" /></p>


<a href="#"> </a>
</body>
</html>

css/ui-lightness/jquery-ui-1.8.9. custom.css . , . js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js, Datepicker. js/i18n/jquery-ui-i18n.js


.
Datepicker HTML-.
input.
HTML- , 17.2.2.
17.2.2. Datepicker
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker();
});
</script>

17.2.2 ,
. ,
, - ( -). 17.2.3
.
17.2.3. Datepicker
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional['ru']));
$("#datepicker").datepicker();
});
</script>

17.2.3 ,
ru uk, .
, , , , - Datepicker. ( 17.2.4).

17. UI jQuery

321

17.2.4. Datepicker
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional['ru']));
$("#datepicker").datepicker({
minDate: '-30',
maxDate: '+1m +1w +3d'
});
});
</script>

17.2.4 ,
, . , , , 17.2.4. . 17.4.
17.4. Datepicker

disabled

false. true,
Datepicker
, , ,
-

altField

jQuery , ,
Datepicker.

altFormat

altFormat

, altField.

,
.
http://docs.jquery.com/UI/Datepicker/formatDate

appendText

,
. , ,

autoSize

false. true,
,

buttonImage

, ,
.
showOn, 'button' 'both'.
buttonText, alt

buttonImageOnly

true, ,
buttonImage,
,

II. jQuery

322

17.4 ()

buttonText

, , . showOn,
'button' 'both'

calculateWeek

,
.
ISO 8601

changeMonth

true,

changeYear

true,

closeText

showButtonPanel, true. closeText , , ,

constrainInput

true
, , .
, false

currentText

showButtonPanel, true. currentText , , ,

dateFormat

. dateFormat , ,
, .

http://docs.jquery.com/UI/Datepicker/formatDate

dayNames

, ,
. , ,
,

dayNamesMin

,
, . , , ,

dayNamesShort

,
, . , , ,

defaultDate

, , .
Date, (
+7 15), , ('y'
, 'm' , 'w' , 'd' ,
'+1m +7d'), , , null

17. UI jQuery

323
17.4 ()

duration

() . 'fast',
'normal' ( ), 'slow' . ,

firstDay

: 0, 1,... , , ,

gotoCurrent

true, ( showButtonPanel: true)

hideIfNoPrevNext


minDate maxDate,
"" "" .
, hideIfNoPrevNext true

isRTL

true,
.
,

maxDate


Date, ( +7),
, ('y' , 'm' , 'w' , 'd' , '+1y +1m'),
null

minDate


Date, ( -7),
, ('y' , 'm'
, 'w' , 'd' , '-1y -1m'),
null

monthNames

, .
, , ,

monthNamesShort

, . , ,
,

navigationAsDateFormat

false. true,
dateFormat
nextText, prevText currentText, , ,

nextText

,
. , ,
, . ThemeRoller,

II. jQuery

324

17.4 ()

numberOfMonths

, .
, , . , [2, 3]

prevText

,
. , ,
, . ThemeRoller,

selectOtherMonths

false. true, / ,
.
showOtherMonths: true

shortYearCutoff

+10. dateFormat . , . ,
.
, ,
,
.

showAnim

.
show ( hide).

'slideDown' 'fadeIn' ('slideUp' 'fadeOut' ). jQuery UI Effects

showButtonPanel

true ,

showCurrentAsPos

, ,
, .
0 (
)

showMonthAfterYear

false (
). true

showOn

'focus' (
). 'button'
'both'. .
,
,

showOptions

jQuery UI Effects,
. : showOptions: {direction: 'up'}

17. UI jQuery

325
17.4 ()

showOtherMonths

false. true, /
.
, selectOtherMonths

showWeek

false. true , . calculateWeek

stepMonths

,
. 1

weekHeader

, .
showWeek: true

yearRange

,
( changeYear).
'-10:+10' .
, '1980:2025'

yearSuffix

,
,

Datepicker ( 17.2.5).
17.2.5. Datepicker
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional['ru']));
$("#datepicker").datepicker({
beforeShow: function(input) {
$(input).css("background-color","#ff9");
},
onSelect: function(dateText, inst) {
$(this).css("background-color","");
alert(": " + dateText +
"\n\nid: " + inst.id +
"\nselectedDay: " + inst.selectedDay +
"\nselectedMonth: " + inst.selectedMonth +
"\nselectedYear: " + inst.selectedYear);
},

II. jQuery

326

onClose: function(dateText, inst) {


$(this).css("background-color","");
}
});
});
</script>

17.2.5 , callback-. beforeShow ,


. CSS- background-color
input. onSelect , - CSS- background-color, .
, , onClose , ,
. CSS- backgroundcolor .
, , callback- .
.
beforeShow , input. 17.2.5 jQuery , ,
CSS- .
onSelect . dateText
, , input.
datepicker. 17.2.5 , .
, onClose, ,
onSelect.
callback-,
onSelect onClose, this ,
input.
. 17.5 Datepicker.
17.5. Datepicker

create

datepickercreate

beforeShow

function(input,
inst)

,
.
,
,

17. UI jQuery

327
17.5 ()

beforeShowDay

function(date)

, . ,
[0] true false ,
. [1]
()
, [2] ()
.

onChangeMonthYear

function(year,
month, inst)

,
. .

,
datepicker

onClose

function(dateText,
inst)

,
,
-

onSelect

function(dateText,
inst)

,
, -

, Datepicker. 17.2.6 .
17.2.6. Datepicker
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional['ru']));
$("#datepicker").datepicker({
changeYear: true
});
$('a').click(function(){
$("#datepicker").datepicker('dialog',
'23.04.2011',
function(){
alert(' onSelect');
},
{ showButtonPanel: true },
[300, 300]);
});
});
</script>

II. jQuery

328

17.2.6 dialog.
. , textDate , . ,
. onSelect callback-, . settings , , . , , pos
, .
, ,
, event, , event. , event.clientX event.clientY.
. 17.6 Datepicker.
17.6. Datepicker

destroy
.datepicker ('destroy')


Datepicker. ,

disable
.datepicker ('disable')

. enable

enable

, disable

.datepicker (enable')
option
.datepicker ('option',
optionName, [value])

option ('option', optionName)

widget

,
Datepicker

dialog
.datepicker ('dialog',
dateText, [onSelect],
[settings], [pos] )

Datepicker .
dateText , . . onSelect , , settings
, pos , .
,

isDisabled

true,
disable, false

.datepicker ('isDisabled')
hide
.datepicker ('hide', [speed])

17. UI jQuery

329
17.6 ()

show

.datepicker ('show')
getDate

.datepicker ('getDate')
setDate
.datepicker ('setDate', date)

.
date (:
25.10.1917). ,
(: +7 -14). , ('y' , 'm' , 'w'
, 'd' , : '+1m +7d').
null

, .
Datepicker ,
, , .
, div
span.
:
<Page Up>/<Down> / ;
<Ctrl>+<Page Up>/<Down> / ;
<Ctrl>+<Home> ,

;
<Ctrl>+<Left>/<Right> / ;
<Ctrl>+<Up>/<Down> / ;
<Enter> ;
<Ctrl>+<End> ;
<Escape> .

17.3. Dialog
Dialog , . , , 'x'.
, .
Dialog
. 17.3.

II. jQuery

330

. 17.3. Dialog

- Dialog.

"cupertino"
17.3.1.
17.3.1. Dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">

17. UI jQuery

331

$(function(){
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title=" ">
<p> .
, , 'x'.</p>
</div>
</body>
</html>

css/cupertino/jquery-ui-1.8.9.custom.css
. ,
.
js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,
Dialog , (draggable) (resizable).
HTML- . Dialog div,
title , . , div, .
Dialog HTML- ,
17.3.2.
17.3.2. Dialog
<script type="text/javascript">
$(function(){
$("#dialog").dialog();
});
</script>

17.3.2
Dialog. ,
( 17.3.3).
17.3.3. Dialog
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
position: ['right','top'],

II. jQuery

332

buttons: {
"": function() { alert(' ""'); },
"": function() { $(this).dialog("close"); }
}
});
});
</script>

17.3.3 dialog position


buttons. position
. buttons
, callback-.
,
.
. 17.7 .
17.7. Dialog

disabled

false. true,
Dialog ,
, , -

autoOpen

true,
dialod. false,
.dialog('open')

buttons

, , , callback- (. 17.3.3). , , , . , .
target event

buttons

,
, .
,

closeOnEscape

true (
<Escape>). false

closeText

. ,

dialogClass

( )

draggable

true, . false,

17. UI jQuery

333
17.7 ()

height

auto (
). , : height: 300. , ,

hide

,
, : hide: 'slide'.
null ( )

maxHeight

, ,

maxWidth

, ,

minHeight

, ,

minWidth

, ,

modal

true , .
- , .
, , -

position

,
. : 'center',
'left', 'right', 'top', 'bottom'. . ['right', 'top'] ,

resizable

true, . false,

show

,
, : show: 'slide'.
null ( )

stack

true, ( -), ,
. false,

title

, , HTML-

width

( 300)

zIndex

z-index ( 1000)

,
( 17.3.4).

334

II. jQuery

17.3.4. Dialog
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
position: ['right','center'],
open: function(event, ui) {
alert(' ' + event.type);
},
dragStop: function(event, ui) {
alert(' ' + event.type);
}
});
});
</script>

17.3.4 open dragStop, callback-, . callback-


. event, ui,
:
ui.position , top left -

;
ui.offset , top left -

.
17.3.5 , jQuery.
17.3.5. Dialog
<script type="text/javascript">
$(function(){
// body 15px ( )
$("body").css("border","15px dotted #F00");
$("#dialog").dialog({
dragStop: function(event, ui) {
alert("ui.offset.top = " + ui.offset.top +
"\nui.offset.left = " + ui.offset.left +
"\n\nui.position.top = " + ui.position.top +
"\nui.position.left = " + ui.position.left);
}
});
});
</script>

17. UI jQuery

335

ui.offset.top ui.position.top

15 . .
. 17.8 Dialog , callback-, .
17.8. Dialog

create

dialogcreate

beforeClose

dialogbeforeclose

, .

false

open

dialogopen

focus

dialogfocus

dragStart

dragStart

drag

drag

dragStop

dragStop

resizeStart

resizeStart

resize

resize

resizeStop

resizeStop

close

dialogclose

,
Dialog. . 17.9.
17.9. Dialog

destroy


Dialog. ,

.dialog('destroy')
disable
.dialog ('disable')
enable
.dialog ('enable')
option
.dialog ('option', optionName,
[value])

.
enable
,
disable

336

II. jQuery
17.9 ()

option

.dialog ('option', optionName)


widget
.dialog ('widget')

,
Dialog

close

.dialog ('close')
isOpen

true,

.dialog ('isOpen')
moveToTop
.dialog ('moveToTop')

open

.dialog ('open')

17.3.6 open close.


17.3.6. Dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-3-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
autoOpen: false
});
$("#openD").click(function(){
$("#dialog").dialog("open");
});
$("#closeD").click(function(){
$("#dialog").dialog("close");
});
});
</script>
</head>

17. UI jQuery

337

<body>
<a id="openD" href="#"> </a>
<div id="dialog" title=" ">
<p> .</p>
</div>
<a id="closeD" href="#"> </a>
</body>
</html>

, 17.3.6, ,
false autoOpen, , , .
HTML- .
open
close. , .

17.4. Progressbar
, . Progressbar . 17.4.

. 17.4. Progressbar

- Progressbar.

17.4.1.
"humanity".

II. jQuery

338

17.4.1. Progressbar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-4-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/humanity/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#progressbar").progressbar({
value: 15
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
<button> 5</button>
</body>
</html>

17.4.1 css/humanity/jquery-ui1.8.9.custom.css .
, .
js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,
Progressbar.
(. 17.10),
. value
, .
17.10. Progressbar

disabled

false. true,
Progressbar ,
, ,

value

17. UI jQuery

339

, Progressbar , (. 17.11).
, change ,
( 17.4.2).
17.11. Dialog

create

progressbarcreate

change

progressbarchange

complete

progressbarcomplete

17.4.2. Progressbar
<script type="text/javascript">
$(function(){
$("#progressbar").progressbar({
value: 15,
change: function(event, ui) {
alert(' ' + event.type);
},
complete: function(event, ui) {
alert(' ' + event.type);
}
});
$("button").click(function(){
var currentVal = $("#progressbar").progressbar("option", "value");
if(currentVal<100) {
$("#progressbar").progressbar("option", "value", currentVal+5);
}
});
});
</script>

17.4.2 change,
callback-, , complete, . callback-
. event, ui.
, ui ,
.
value , 100, , . 17.12.

340

II. jQuery

, ,
, progressbarcomplete.
17.12. Progressbar

destroy

Progressbar. ,

.progressbar('destroy')
disable
.progressbar ('disable')
enable
.progressbar ('enable')
option
.progressbar ('option',
optionName , [value])

.
enable

,
disable

option
.progressbar ('option', optionName)

widget

,
Progressbar

.progressbar ('widget')
value
.progressbar ('value', [value])

option 17.4.2.

17.5. Slider
Slider div , .
Slider
. 17.5.

- Slider.

17.5.1.
"hot-sneaks".

17. UI jQuery

341

. 17.5. Slider

17.5.1. Slider
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-5-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/hot-sneaks/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
<button id="getter">Get Option</button>
<button id="setter">Set Option</button>
</body>
</html>

17.5.1 css/hot-sneaks/jquery-ui1.8.9.custom.css .
js/jquery-1.4.4.min.js js/jquery-ui1.8.9.custom.min.js, UI
Slider. HTML- -

II. jQuery

342
div.

HTML- ,
17.5.2.
17.5.2. Slider
<script type="text/javascript">
$(function(){
$("#slider").slider();
});
</script>

17.5.2 , Slider. , ,
, .
,
. 17.5.3 ,
, HTML- .
17.5.3. Slider
<script type="text/javascript">
$(function(){
$("#slider").slider({
min: 10,
max: 200,
values: [20,60]
});
});
</script>

17.5.3, , .
-, min max , -, values
, . .
, .
. 17.13.
17.13. Slider

disabled

false. true,
Slider ,
, , -

17. UI jQuery

343
17.13 ()

animate

false.
, .
true

max

. 100

min

. 0

orientation

.
'horizontal' 'vertical'. 'auto' (
). ,

range

false. true
,
, . 'min'
'max' .
( ) , (
)

step


.
.
1

value

. ,
. 0

values

, , . range true,
2. null

Slider
.
17.5.4.
17.5.4. Slider
<script type="text/javascript">
$(function(){
$("#slider").slider({
min: 10,
max: 200,
values: [20,60],
stop: function(event, ui) {
alert(" " + event.type);
}
});
});
</script>

II. jQuery

344

17.5.4 stop. callback, . callback-


. event, ui, ,
:
ui.value value

( );
ui.values values .

17.5.5 ,
ui.
ui.handle

DOM-, ,
.
17.5.5. Slider
<script type="text/javascript">
$(function(){
$("#slider").slider({
min: 10,
max: 200,
values: [20,60],
stop: function(event, ui) {
alert(" : " + ui.values);
}
});
});
</script>

. 17.14 Slider , callback-, .


17.14. Slider

create

slidecreate

start

slidestart

slide

slide

change

slidechange

stop

slidestop

17. UI jQuery

345

Slider (. 17.15).
17.15. Slider

destroy


Slider. ,

.slider('destroy')
disable
.slider('disable')
enable
.slider('enable')
option
.slider('option', optionName , [value])
option
.slider('option', optionName)
widget
.slider ('widget')
value
.slider('value', [value])
values
.slider('values', index, [value])


.
enable
, disable


,
Slider

(
)

(
)

17.5.6 , -
.
17.5.6. Slider
<script type="text/javascript">
$(function(){
$("#slider").slider({
min: 10,
max: 200,
values: [20,60]
});
$("#getter").click(function(){
alert(': ' + $("#slider").slider('option', 'values'));
});
$("#setter").click(function(){
$("#slider").slider('values', 0, 15);

II. jQuery

346

$("#slider").slider('values', 1, 195);
});
});
</script>

17.5.6, , , 10 200 ( 20, 60). , . click.


Get Option, , , .
Set Option 15,
195. , ,
.

17.6. Tabs
Tabs
. .
AJAX-. Tabs . 17.6.

. 17.6. Tabs

17. UI jQuery

347

- Tabs.

"le-frog"
17.6.1.
17.6.1. Tabs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-6-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>
<button id="addTab">Add</button>
<button id="removeTab">Remove</button>
<button id="enableTab">Enable</button>
<button id="disableTab">Disable</button>
<button id="startRotate">Start Rotate</button>

348

II. jQuery

<button id="stopRotate">Stop Rotate</button>


<button id="getCookie">Get Cookie</button>
</body>
</html>

Tabs HTML- (. 17.6.1). li, href div, . div


.
, css/le-frog/jquery-ui-1.8.9.custom.css
.
js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,
UI Tabs. js/jquery.cookie.min.js
cookie. HTML , 17.6.2.
17.6.2. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>

Tabs , 17.6.2 ,
.
17.6.3 .
,
, HTML- .
17.6.3. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
event: "mouseover",
selected: 2
});
});
</script>

17.6.3 Tabs
mouseover ( click)
( ).

17. UI jQuery

349

( 17.6.4 17.6.5).
17.6.4. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
fx: { opacity: "toggle", duration: "slow" }
});
});
</script>

17.6.4 fx
.
17.6.5 cookie ,
.
17.6.5. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
cookie: { expires: 7, name: 'startTab' }
});
$("#getCookie").click(function(){
var cook = $("#tabs").tabs("option", "cookie");
alert("name: " + cook.name + "\nexpires: " + cook.expires);
});
});
</script>

17.6.5 cookie startTab


. getCookie ,
cookie ,
. , jQuery Cookie (. 16).
. 17.16.
17.16. Tabs

disabled

false. true,
Tabs ,
, , -

II. jQuery

350

17.16 ()

ajaxOptions

AJAX- ( ,
AJAX-, 9),
.
null

cache

, , AJAX-, . .
, . false ( ).
,
false AJAX-

collapsible

false.
true,

cookie

cookie.
, ( selected). cookie (. 16).
cookie name

disabled

, ( ),
. ,
disabled: [1, 2]

event

, .
'click'. 'mouseover'

fx

/ .
: fx: { opacity: "toggle", duration: "slow" }

idPrefix

'ui-tabs-'.
, ,
AJAX-

panelTemplate

HTML-,
add " "
AJAX-. '<div></div>'

selected

( ),
. 0, . .
. ,
-1

spinner

HTML-, ,

. , . <em>Loading</em>

tabTemplate

HTML-, add. #{href} and #{label} URL


, add. '<li><a href="#{href}"><span>#{label}</span></a></li>'

17. UI jQuery

351

, , Tabs ( 17.6.6).
17.6.6. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
selected: 2,
select: function(event, ui) {
alert(": " + event.type +
"\nui.tab: " + ui.tab +
"\nui.panel: " + ui.panel.innerHTML +
"\nui.index: " + ui.index);
}
});
});
</script>

17.6.6 select callback-, tabsselect, . . ,


. Callback-
: event, ui.
, ( ):
ui.tab URL ;
ui.panel , -

;
ui.index ( ).

. 17.17 Tabs , callback-, .


17.17. Tabs

create

tabscreate

select

tabsselect

(
, event:
'mouseover').

load

tabsload

show

tabsshow

II. jQuery

352

17.17 ()

add

tabsadd

remove

tabsremove

, -

enable

tabsenable

disable

tabsdisable

, Tabs , .
17.6.7 Tabs.
17.6.7. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
selected: 2,
});
// add
$("#addTab").click(function(){
$("#tabs").tabs("add", "#tabs-4", "Tab 4", 3);
$("#tabs-4").append("<p>Tab 4 content</p>");
$(this).attr("disabled","disabled");
$("#removeTab").attr("disabled","");
});
// remove
$("#removeTab").click(function(){
$("#tabs").tabs("remove", 3);
$(this).attr("disabled","disabled");
$("#addTab").attr("disabled","");
}).attr("disabled","disabled");
// enable
$("#enableTab").click(function(){
$("#tabs").tabs("enable", 2);
});
// disable
$("#disableTab").click(function(){
$("#tabs").tabs("disable", 2);
});
});
</script>

, 17.6.7.
, . -

17. UI jQuery

353

Add click.
callback-, add
#tabs-4 Tab4. . , 3 , .
p . Remove.
remove, 3.
Enable Disable ,
.
17.6.8
rotate.
17.6.8. Tabs
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
selected: 2
});
$("#startRotate").click(function(){
$("#tabs").tabs('rotate', 3000, true);
});
$("#stopRotate").click(function(){
$("#tabs").tabs('rotate', null);
});
});
</script>

17.6.8 Start
Rotate rotate, .
Stop Rotate .
. 17.18 Tabs.
17.18. Tabs

destroy
.tabs( 'destroy' )


Tabs. ,

disable
.tabs('disable')

.
enable

enable
.tabs('enable')


,
disable

354

II. jQuery
17.18 ()

option

.tabs('option', optionName,
[value])
option
.tabs('option', optionName)
widget
.tabs ('widget')
add
.tabs('add', url, label, [index])

remove
.tabs('remove', index)
enable
.tabs('enable', index)

disable
.tabs('disable', index)

select
.tabs('select', index)

load
.tabs('load', index)

url
.tabs('url', index, url)

length
.tabs('length')



,
Tabs
.
, (. ), URL ( ,
) AJAX.
, .
(
)
. ( )
.
,
$('#tabs').data('disabled.tabs', [ ]);
.
.
,

$('#tabs').data('disabled.tabs', [1, 2, 3]);


,
. ( ).
(. )
, AJAX-.
, cache
true.
( )
URL, AJAX-
.
( ). URL

17. UI jQuery

355
17.18 ()

abort
.tabs('abort')

AJAX-

rotate
.tabs('rotate', ms, [continuing])

.
( ),
. , 0 null.
. true
. false

Tabs
AJAX-.
17.6.9. , HTML- .
17.6.9. Tabs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-6-9</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax_1.html"><span>Content 1</span></a></li>
<li><a href="ajax_2.html"><span>Content 2</span></a></li>
<li><a href="ajax_3.html"><span>Content 3</span></a></li>
<li><a href="#tabs-4">Content 4</a></li>
</ul>
<div id="tabs-4">
<p>4. 4.</p>

II. jQuery

356
</div>
</div>
</body>
</html>

17.6.9
, . ,

AJAX-. HTML. , ,
AJAX-, ,
.

17.7. Button
Button ,
button, input submit reset, a,
.
input radio checkbox. ,
"sunny", . 17.7.

. 17.7. , Button

- Button.

"sunny" 17.7.1.

17. UI jQuery

357

17.7.1. Button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-7-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
div, button, input, a { margin:10px; }
</style>
<script type="text/javascript">
$(function(){
$("button, input:submit, a").button().click(function(e){
alert(e.type);
return false;
});
$("div.set").buttonset();
});
</script>
</head>
<body>
<div>
<button> button</button>
<input value="input submit" type="submit" />
<a href="#"> </a>
</div>
<div class="set">
<input type="radio" id="radio1" name="radio" /><label for="radio1">
1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label
for="radio2"> 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">
3</label>
</div>
<div class="set">
<input type="checkbox" id="check1" /><label for="check1"></label>
<input type="checkbox" id="check2" /><label for="check2"></label>
<input type="checkbox" id="check3" /><label for="check3"></label>
</div>
</body>
</html>

358

II. jQuery

css/sunny/jquery-ui-1.8.9.custom.css
. js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,
UI Button.
HTML-. div
button, input submit a. div,
set, input radio checkbox.
HTML- , 17.7.1.
17.7.1. Button
<script type="text/javascript">
$(function(){
$("button, input:submit, a").button().click(function(e){
alert(e.type);
return false;
});
$("div.set").buttonset();
});
</script>

JavaScript-, 17.1.1.
, button.
. click, ,
.
JavaScript- , div set buttonset. ,
, , radio checkbox.
Button , 17.7.1
, .
17.7.2 .
17.7.2. Button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-7-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

17. UI jQuery

359

<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css"


rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
button { margin:5px; }
</style>
<script type="text/javascript">
$(function(){
$("button:first").button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
label: " ",
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
</script>
</head>
<body>
<div>
<button> </button>
<button></button>
<button> </button>
<button> , </button>
</div>
</body>
</html>

HTML- 17.7.2 button,


div.
JavaScript-
button:first, , button. -

II. jQuery

360

.
icons , primary secondary.
, , CSS-. . text
false, ,
.
, next, button, .
, ,
label.

.
. 17.19.
17.19. Button

disabled

false. true,
Button ,
, , -

text

true. , false. icons,

icons

{ primary: null, secondary: null }. primary ( ),


secondary . primary secondary
, ,
CSS-,

label

, . HTML

Button , , create (. 17.20).


.click()
, input .focusin() .focusout().
17.20. Button

create

buttoncreate

17. UI jQuery

361

. 17.21 Button.
17.21. Button

destroy
.button( 'destroy' )


Button. ,

disable
.button('disable')


.
enable

enable
.button('enable')

,
disable

option
.button('option', optionName, [value])

option

.button('option', optionName)
widget
.button('widget')
refresh
.button('refresh')

,
Button

17.8. Autocomplete
Autocomplete . Autocomplete
. 17.8.

. 17.8. Autocomplete

362

II. jQuery

- Autocomplete.

"ui-lightness"
17.8.1.
17.8.1. Autocomplete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
"C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
"Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
"Python","Ruby","Scala","Scheme"];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" type="text" />
</div>
</body>
</html>

Autocomplete HTML- (. 17.8.1).


, . . input, text type.
,
.

17. UI jQuery

363

, css/ui-lightness/jquery-ui-1.8.9.custom.css
.
js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js, UI Autocomplete.
HTML- , 17.8.1. ,
. .
17.8.1. Autocomplete
<script type="text/javascript">
$(function(){
var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
"C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
"Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
"Python","Ruby","Scala","Scheme"];
$("#tags").autocomplete({
source: availableTags
});
});
</script>

, 17.8.1,
Autocomplete source, . availableTags.
. 17.22.
17.22. Autocomplete

disabled

false. true,
Autocomplete ,
, ,

appendTo

'body'. jQuery. ,

delay

300. , , .
.

minLength

1. , , . .
,

II. jQuery

364

17.22 ()

source

. , .

Autocomplete ( 17.8.2).
17.8.2. Autocomplete
<script type="text/javascript">
$(function(){
var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
"C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
"Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
"Python","Ruby","Scala","Scheme"];
$("#tags").autocomplete({
source: availableTags,
select: function(event, ui) {
alert(': ' + event.type +
',\n: ' + ui.item.value);
}
});
});
</script>

17.8.2 select callback-, autocompleteselect, . .


, . Callback-
: event,
ui. , ( ).
ui.item

label value. value


. label value,
, , .
. 17.23 Autocomplete , callback-,
.
Autocomplete , .
17.8.3 Autocomplete.

17. UI jQuery

365
17.23. Autocomplete

create

autocompletecreate

search

autocompletesearch

. ,
false,

open

autocompleteopen

focus

autocompletefocus

select

autocompleteselect

close

autocompleteclose

, .
,

change

autocompletechange

, .
close

17.8.3. Autocomplete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
"C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
"Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
"Python","Ruby","Scala","Scheme"];
$("#tags").autocomplete({
source: availableTags,
minLength: 0
});
$("#search").click(function(){ $("#tags").autocomplete("search", "as") });
$("#close").click(function(){ $("#tags").autocomplete("close") });
});
</script>
</head>

II. jQuery

366
<body>
<button id="search"> "as"</button>
<button id="close"></button>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" type="text" />
</div>
</body>
</html>

17.8.3 HTML- . Search


"as" . . ,
. Close close, , .
. 17.24 Autocomplete.
17.24. Autocomplete

destroy


Autocomplete. ,

.autocomplete('destroy')
disable
.autocomplete('disable')
enable
.autocomplete('enable')
option
.autocomplete('option',
optionName, [value])
option
.autocomplete('option',
optionName)
widget
.autocomplete('widget')
search

.
enable

,
disable

,
Autocomplete

.autocomplete('search, [value]')

.
,

close

.autocomplete('close')

17. UI jQuery

367

,
Autocomplete ,
, . 17.8.4.
,
http://geonames.org.
17.8.4. Autocomplete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-autocomplete-loading {
background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right
center no-repeat;
}
#city { width: 25em; }
#log { height: 200px; width: 600px; overflow: auto; }
</style>
<script type="text/javascript">
$(function() {
$("#city").autocomplete({
source: function(request,response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function(data) {
response($.map(data.geonames, function(item) {
return {
label: item.name + ", " + item.countryName,
value: item.name + " (" + item.countryName + ")" + " [" +
item.lat + ", " + item.lng + "]"
}
}));
}
});
},

368

II. jQuery

minLength: 3,
select: function(event,ui) {
$("<p/>").text(ui.item ? ui.item.value : "
!").prependTo("#log");
$("#log").attr("scrollTop", 0);
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">: </label><input id="city" /><br />
<span style="font-size:.8em;"> <a
href="http://geonames.org">geonames.org</a></span>
</div>
<div id="log" class="ui-widget ui-widget-content"></div>
</body>
</html>

HTML- 17.8.4.
div input city.
( ) ,
. div log
.
JavaScript-. autocomplete
input#city , , , source,
minLength select.
, source ( ) ,
url .
source .
. request ,
term, ,
. response ,
. ,
source, .
, AJAX-, . url,
, , .
data , .
, , API , .

17. UI jQuery

369

success, ,
.
, success, response. , , , , .
17.8.4 $.map, , .
item.countryName,
item.lng, item.lat. , API, -.
,
, . .
source, minLength ,
.
select. ,
. .
, ui, label value. , , ,
.

18

UI jQuery


, UI jQuery.
(Draggable) "" (Droppable) (DOM), (Resizable), (Selectable), (Sortable).

.
UI jQuery , jQuery, . http://jqueryui.com/download,
. ,
.
.
jQuery
1.4.4 UI jQuery
1.8.9 .

18.1. Draggable

DOM -
.

Draggable "le-frog"
( 18.1.1).

18. UI jQuery

371

18.1.1. Draggable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<button id="getOption">Get Option</button>
<button id="setOption">Set Option</button>
</body>
</html>

, css/le-frog/jquery-ui-1.8.9.custom.css . , js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,


UI Draggable, Droppable Sortable
( ). HTML-
, 18.1.2.
18.1.2. Draggable
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
});
</script>

II. jQuery

372

, ,
draggable, . 18.1.2 Draggable .
20 , .
18.1.3 .
18.1.3. Draggable
<script type="text/javascript">
$(function(){
$("#draggable").draggable({
cursor: "move",
grid: [20, 20],
revert: true,
revertDuration: 3000
});
});
</script>

18.1.3, ,
, , 20 ,
,
3 .
,
. 18.1.
18.1. Draggable

disabled

false. true,
Draggable ,
, ,
-

addClasses

true. false,
ui-draggable
.
.draggable(), ,

appendTo

parent.
jQuery , ,

axis

X
Y. false,

18. UI jQuery

373

18.1 ()

cancel

'input, option'. , ,
. jQuery

connectToSortable

"" (sortable)
. "" .
jQuery. false.
helper 'clone'

containment


. jQuery, , . : 'parent',
'document', 'window', [x1, y1, x2, y2]

cursor

, CSS-,
. auto

cursorAt

. , {left: 5, top: 10}


10 5

delay

.
,
.
0

distance

,
,
. ,

. 1

grid

,
, . false,
. : [10, 10]

handle

,
,
.
jQuery

helper

'original', 'clone', Function. 'original' ( ). 'clone'


, .
.
DOM

iframeFix

false. true,
mousemove iframe.
jQuery
iframe. , , cursorAt

II. jQuery

374

18.1 ()

opacity

CSS- opacity , . false


( )

refreshPositions

false. true ""


mousemove.
!
, , ,

revert

false. true,
. .
'valid' 'invalid'. , "" - . 'valid'
,
"" . 'invalid' , ""

revertDuration

,
. 500. ,
revert false

scope

. 'default'.
, scope , scope
droppable, . ,
accept Droppable (. . 18.2)

scroll

true
, .
false,

scrollSensitivity

, , . , .
20

scrollSpeed

, , ,
scrollSensitivity. 20

snap

false. true (
'.ui-draggable', jQuery), ""

snapMode

, "" . ,
. 'inner',
'outer', 'both'. snap: false. 'both'

18. UI jQuery

375
18.1 ()

snapTolerance

,
"". 20.
snap: false

stack

,
z-index ,
.
'group' jQuery.
'min', , z-index
. : $('.selector').draggable({
stack: { group: '.selector', min: 50 } });

zIndex

, z-index,
. false

Draggable, . 18.1.4 .
18.1.4. Draggable
<script type="text/javascript">
$(function(){
$("#draggable").draggable({
cursor: "move",
stop: function(event, ui) {
alert(": " + event.type +
"\n\ntop: " + ui.offset.top +
" px\nleft: " + ui.offset.left +
" px");
}
});
});
</script>

, 18.1.4, stop callback. event ui.


, . ,

dragstop
.
callback-, start, drag stop,
event ui. event , ui , :
ui.helper , , -

II. jQuery

376

ui.position , top left

;
ui.offset , top left -

.
. 18.2 Draggable , callback-.
18.2. Draggable

create

dragcreate

start

dragstart

drag

drag

stop

dragstop

Draggable ,
. , 18.1.5. ,
.
18.1.5. Draggable
<script type="text/javascript">
$(function(){
$("#draggable").draggable({
cursor: "move"
});
$("#getOption").click(function(){
alert($("#draggable").draggable("option", "grid"));
});
$("#setOption").click(function(){
$("#draggable").draggable("option", "grid", [50,50]);
});
});
</script>

18.1.5 Get Option Set Option click. Get Option option, ,


, . , false,
, . -

18. UI jQuery

377

.
Set Option, option,
. , ,
, .
, grid [50,50], , 50 50 .
Draggable . 18.3.
18.3. Draggable

destroy


Draggable.
,

.draggable('destroy')

disable
.draggable('disable')
enable
.draggable('enable')
option


. enable
,
disable

.draggable('option', optionName, [value])

option
.draggable('option', optionName)

widget
.draggable('widget')

, "" ( 18.1.6).
18.1.6. Draggable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-1-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>

378

II. jQuery

<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>


<style type="text/css">
.draggable {
width:200px; margin:5px; padding-left:10px;
border:1px solid #369; background-color:#eee;
cursor:move;
}
#sortable li {
width:200px; margin:5px; padding-left:10px;
border:1px solid #000; background-color:#333;
color:#fff; cursor:move;
}
</style>
<script type="text/javascript">
$(function(){
$("#sortable").sortable();
$(".draggable").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
</script>
</head>
<body>
<ul>
<li class="draggable">List 1, item 1</li>
<li class="draggable">List 1, item 2</li>
<li class="draggable">List 1, item 3</li>
</ul>
<br />
<ul id="sortable">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
<li>List 2, item 4</li>
<li>List 2, item 5</li>
</ul>
</body>
</html>

HTML-, 18.1.6, . li class draggable,


JavaScript- .
#sortable, JavaScript- li . , "" li .

18. UI jQuery

379

, JavaScript.

#sortable, ,
sortable, .
. . , , draggable.
""
, connectToSortable,
jQuery. #sortable, . .
. ,
helper, clone.
. ""
.

18.2. Droppable ""

DOM ,
"" - .

Droppable ( 18.2.1).
"trontmastic".
18.2.1. Droppable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-2-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/trontastic/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left;
margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left;
margin: 10px; overflow:auto; }

380

II. jQuery

.active { border: 3px solid #f00; }


.hover { border: 3px solid #00f; }
</style>
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
$("#droppable").droppable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="destroy">Destroy</button>
</body>
</html>

, css/trontastic/jquery-ui-1.8.9.custom.css
.
js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,
UI Droppable Draggable (
, "" , ).
HTML- , 18.2.2.
18.2.2. Droppable
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(){
$("#result").append("Dropped!<br />");
}
});
});
</script>

18.2.2 callback-
drop. .

18. UI jQuery

381

div "" div, result


.
, ,
( 18.2.3).
18.2.3. Droppable
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
activeClass: "active",
hoverClass: "hover",
drop: function(){
$("#result").append("Dropped!<br />");
}
});
});
</script>

18.2.3 Droppable activeClass


hoverClass, . ,
18.2.1. , ,

, , ,
.
Droppable (. 18.4).
18.4. Droppable

disabled

false. true,
Droppable , , , -

accept

. , ,
"" , Droppable. , (
),
. true, "". *

activeClass

,
,
"". false

II. jQuery

382

18.4 ()

addClasses

true. false, ui-droppable.


.droppable()

greedy

true,
, . . "" , ""
, drop - .
false

hoverClass

,
, . false

scope

accept. 'default'.
(. .
draggable), ,
""

tolerance

, "" , . 'intersect', "" , 50%.


:
fit ;
pointer ;
touch

, UI jQuery, Droppable . , callback, ,


( 18.2.4).
18.2.4. Droppable
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
create: function(event, ui){
$("#result").empty().append(": " + event.type + "<br />");
},
activate: function(event, ui){
$("#result").append(": " + event.type + "<br />");
},

18. UI jQuery

383

deactivate: function(event, ui){


$("#result").append(": " + event.type + "<br />");
},
over: function(event, ui){
$("#result").append(": " + event.type +
" -> ui.position.top/left: " + ui.position.top +
"/" + ui.position.left + " px & ui.offset.top/left: " +
ui.offset.top + "/" + ui.offset.left + " px<br />");
},
out: function(event, ui){
$("#result").append(": " + event.type +
" -> ui.position.top/left: " + ui.position.top +
"/" + ui.position.left + " px & ui.offset.top/left: " +
ui.offset.top + "/" + ui.offset.left + " px<br />");
},
drop: function(event, ui){
$("#result").append(": " + event.type +
" -> ui.helper.attr('id'): " + ui.helper.attr('id') +
", ui.draggable.text(): " + ui.draggable.text() + "<br />");
}
});
});
</script>

Droppable . 18.5.
18.5. Droppable

create

dropcreate

activate

dropactivate

deactivate

dropdeactivate


, , ""

over

dropover

out

dropout

drop

drop

""

, callback-, , . -

384

II. jQuery

, ui, :
ui.draggable , ;
ui.helper , ;
ui.position , top left

;
ui.offset , top left -

.
, helper ui,
, , . . ui.draggable.
JavaScript- 18.2.4. Callback-,
, type event
, , .
, callback-, over out, ui position offset. , , top left,
. drop callback-
ui.helper,
.
Droppable ,
. ,
18.2.5.
18.2.5. Droppable
<script type="text/javascript">
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
activate: function(event, ui){
$("#result").empty().append(event.type + "<br />");
},
deactivate: function(event, ui){
$("#result").append(event.type + "<br />");
},
over: function(event, ui){
$("#result").append(event.type + "<br />");
},
out: function(event, ui){
$("#result").append(event.type + "<br />");
},

18. UI jQuery

385

drop: function(event, ui){


$("#result").append(event.type + "<br />");
}
});
$("#disable").click(function(){
$("#droppable").droppable("disable");
});
$("#enable").click(function(){
$("#droppable").droppable("enable");
});
$("#destroy").click(function(){
$("#droppable").droppable("destroy");
});
});
</script>

, #disable, #enable #destroy, click, .


.droppable("disable"), , .droppable("enable")
. .droppable("destroy") . .
Droppable . 18.6.
18.6. Droppable

destroy


Droppable. ,

.droppable('destroy')
disable
.droppable('disable')
enable
.droppable('enable')
option
.droppable('option', optionName,
[value])
option
.droppable('option', optionName)
widget
.droppable('widget')

. enable

,

disable



, ""

386

II. jQuery

18.3. Resizable

( )
DOM .

Resizable ( 18.3.1).
"start".
18.3.1. Resizable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-3-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/start/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted #999; }
</style>
<script type="text/javascript">
$(function(){
$("#resizable").resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<!-<button id="getter">Get Option</button>
<button id="setter">Set Option</button>
-->
</body>
</html>

18. UI jQuery

387

css/start/jquery-ui-1.8.9.custom.css . , ,
.
js/jquery-1.4.4.min.js js/jquery-ui1.8.9.custom.min.js, UI
Resizable. HTML- , 18.3.2.
18.3.2. Resizable
<script type="text/javascript">
$(function(){
$("#resizable").resizable();
});
</script>

18.3.2 jQuery
, , . .
, ,
( 18.3.3).
18.3.3. Resizable
<script type="text/javascript">
$(function(){
$("#resizable").resizable({
animate: true,
ghost: true
});
});
</script>

18.3.3 animate ghost.


true. ,
?
true animate, , .
ghost: true
.
. 18.7 Resizable .

II. jQuery

388

18.7. Resizable

disabled

false. true,
Resizable ,
, ,

alsoResize

false. jQuery,
jQuery . , ,

animate

false. true,

animateDuration

'slow', 'normal', 'fast' ,

animateEasing

.
jQuery Easing. 'swing'

aspectRatio

false. true,
.
16/9 0,75.

autoHide

false. true, , ,

cancel

jQuery. , .
':input,option'

containment

,
. ( 'parent', 'document'),
DOM jQuery. false

delay

,
. 0.

distance

1. , , .

ghost

false. true,

grid

[x, y], x y
, .
, . false

18. UI jQuery

389
18.7 ()

handles

. 'e, s, se'. : n, e, s, w,
ne, se, sw, nw, all

helper

false. CSS, , ,

maxHeight

, ,
. null

maxWidth

, ,
. null

minHeight

, ,
. 10

minWidth

, ,
. 10

Resizable, UI jQuery, .
, callback-,
. Resizable . 18.8. stop 18.3.4.
18.8. Resizable

create

resizecreate

start

resizestart

resize

resize

stop

resizestop

18.3.4. Resizable
<script type="text/javascript">
$(function(){
$("#resizable").resizable({
ghost: true,
stop: function(event, ui) {
alert(" " + event.type);
}
});
});
</script>

390

II. jQuery

18.3.4 stop callback-, . . ,


type .
, , .
, ,
. 18.3.5 ,
.
18.3.5. Resizable
<script type="text/javascript">
$(function(){
$("#resizable").resizable({
ghost: true,
stop: function(event, ui) {
alert(" : " + ui.originalSize.width +
"x" + ui.originalSize.height +
"px\n : " + ui.size.width +
"x" + ui.size.height + "px");
}
});
});
</script>

18.3.5 ui originalSize
size. , width height

(originalSize) (size).
ui:
ui.helper , ;
ui.size , width height

;
ui.originalSize , width height

;
ui.position , top left -

;
ui.originalPosition , top left -

.
, ,
.
.resizable('option', optionName, [value]) 18.3.6.

18. UI jQuery

391

18.3.6. Resizable
<script type="text/javascript">
$(function(){
$("#resizable").resizable({
animate: true,
ghost: true,
animateDuration: 500
});
$("#getter").click(function(){
alert($("#resizable").resizable("option", "animateDuration"));
});
$("#setter").click(function(){
$("#resizable").resizable("option", "animateDuration", 3000);
});
});
</script>

18.3.6 #getter #setter, click. #getter .resizable('option', optionName, [value]) , , , animateDuration.


#setter .resizable('option',
optionName, [value]), .
, animateDuration.
. 18.9 Resizable.
18.9. Resizable

destroy
.resizable('destroy')


Resizable.
,

disable
.resizable('disable')


. enable

enable
.resizable('enable')

,
disable

option
.resizable('option', optionName, [value])

option
.resizable('option', optionName)

widget
.resizable('widget')

392

II. jQuery

18.4. Selectable

-

<Ctrl>
(<Meta>), , .

Selectable "le-frog"
( 18.4.1).
18.4.1. Selectable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-4-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;
}
</style>
<script type="text/javascript">
$(function(){
$("#selectable").selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>

18. UI jQuery

393

<li class="ui-widget-content">Item 6</li>


<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>

css/le-frog/jquery-ui-1.8.9.custom.css
. , ,
. js/jquery-1.4.4.min.js
js/jquery-ui-1.8.9.custom.min.js, UI
Selectable. ol, . HTML- , 18.4.2.
18.4.2. Selectable
<script type="text/javascript">
$(function(){
$("#selectable").selectable();
});
</script>

18.4.2 #selectable . .

. , 18.4.3.
18.4.3. Selectable
<script type="text/javascript">
$(function(){
$("#selectable").selectable({
distance: 100
});
});
</script>

18.4.3 100 distance


, (
), , .
.

II. jQuery

394

. 18.10 Selectable.
18.10. Selectable

disabled

false. true,
Selectable , , , -

autoRefresh

true, .
, .
false.
.selectable('refresh')

cancel

jQuery. ,
. ':input,option'

delay

, , . 0

distance

, , . 0

filter

jQuery. *. -,
( , )

tolerance

.
touch. 'touch' 'fit'.
'touch' ,
- . 'fit' ,

, Selectable.
. . 18.11.
18.11. Selectable

create

selectablecreate

selected

selected

selecting

selecting

start

selectablestart

stop

selectablestop

18. UI jQuery

395
18.11 ()

unselected

unselected

unselecting

unselecting

, - , ,

18.4.4 , . Callback-, ,
stop.
18.4.4. Selectable
<script type="text/javascript">
$(function(){
$("#selectable").selectable({
stop: function(event, ui) {
alert(event.type);
}
});
});
</script>

Callback-, stop, . . ,
type, , .
18.4.5 start, selected stop.
start stop callback-,
. selected callback-,
.
18.4.5. Selectable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-4-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

396

II. jQuery

<style type="text/css">
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
p { width:400px; height:200px; border:1px solid #369; background-color:#eee;
overflow:auto; font-size:.8em; }
</style>
<script type="text/javascript">
$(function(){
$("#selectable").selectable({
start: function(event) {
$("#result").empty().append(": " +
event.type + "<br />");
},
selected: function(event, ui) {
$("#result").append(": " + event.type +
" " + ui.selected.innerHTML + "<br />");
},
stop: function(event) {
$("#result").append(": " +
event.type + "<br />");
}
});
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
<p id="result"></p>
</body>
</html>

, , 18.4.5. , , start. #result ,


.

18. UI jQuery

397

, , . ,
, li.
, ,
selected. , . , stop.
, , selected,
ui ,
selected. , DOM, .
Selectable ,
. 18.4.6.
18.4.6. Selectable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-4-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;
}
</style>
<script type="text/javascript">
$(function(){
$("#selectable").selectable();
$("#disable").click(function(){
$("#selectable").selectable("disable");
});
$("#enable").click(function(){
$("#selectable").selectable("enable");
});
$("#destroy").click(function(){
$("#selectable").selectable("destroy");
});
});

398

II. jQuery

</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="destroy">Destroy</button>
</body>
</html>

18.4.6 #disable, #enable


#destroy, click. Selectable, , , , , .
Selectable . 18.12.
18.12. Selectable

destroy


Selectable.
,

.selectable('destroy')

disable
.selectable('disable')
enable
.selectable('enable')
option
.selectable('option', optionName, [value])

.
enable
,
disable

option
.selectable('option', optionName)

widget
.selectable('widget')

18. UI jQuery

399
18.12 ()

refresh
.selectable('refresh')

,
autoRefresh
false.

18.5. Sortable

-
.

Sortable ( 18.5.1).
"sunny".
18.5.1. Sortable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-5-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;
font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
$(function(){
$("#sortable").sortable();
});
</script>
</head>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>

II. jQuery

400
<li class="ui-state-default">Item
<li class="ui-state-default">Item
<li class="ui-state-default">Item
<li class="ui-state-default">Item
<li class="ui-state-default">Item
<li class="ui-state-default">Item
</ul>
</body>
</html>

2</li>
3</li>
4</li>
5</li>
6</li>
7</li>

, css/sunny/jquery-ui-1.8.9.custom.css . js/jquery-1.4.4.min.js js/jquery-ui-1.8.9.custom.min.js,


UI Sortable.
HTML- , 18.5.2.
18.5.2. Sortable
<script type="text/javascript">
$(function(){
$("#sortable").sortable();
});
</script>

18.5.2 ,

, , ( 18.5.3).
18.5.3. Sortable
<script type="text/javascript">
$(function(){
$("#sortable").sortable({
placeholder: "ui-state-highlight",
opacity: 0.6
});
});
</script>

18.5.3 . placeholder
CSS-, ,
, opacity
.

18. UI jQuery

401

. Sortable . 18.13.
18.13. Sortable

disabled

false. true,
Sortable ,
, , -

appendTo

'parent'.
jQuery , ,

axis

. 'x' 'y'. false. ,

cancel

jQuery.
, , . ':input,button'

connectWith

jQuery,
,
,

containment


. jQuery,
. : 'parent',
'document', 'window'. false

cursor

, . 'auto'

cursorAt

,
. 'top',
'right', 'bottom' 'left'. : {top: 10, left: 20}
{bottom: 5}. false

delay

, , . .
. 0

distance

, , ( ),
.
. 1

dropOnEmpty

true. , ,
. false,

forceHelperSize

false. true

II. jQuery

402

18.13 ()

forsePlaceholderSize

false. true ,

grid

false.
, ,
, grid: [20,20]

handle

false. jQuery .
,
,

helper

'original'. .
'clone'

items

jQuery.
'> *'. , , - , ,

opacity

0,01 1 . false

placeholder

CSS-, , . , ""

revert

false. true,
, , ,

scroll

true
. false,

scrollSensitivity

, , .
,
. 20

scrollSpeed

, ,
, scrollSensitivity. 20

tolerance

'intersect'. , , 50%, "" . 'pointer'.


18. UI jQuery

403
18.13 ()

zIndex

, CSS- z-index

,
Sortable.
18.5.4, Sortable . 18.14.
18.14. Sortable

create

sortcreate

start

sortstart

sort

sort

change

sortchange

, ,

beforeStop

sortbeforeStop

,
( )

stop

sortstop

update

sortupdate

,
,

receive

sortreceive

remove

sortremove

over

sortover

out

sortout

activate

sortactivate

deactivate

sortdeactivate

18.5.4. Sortable
<script type="text/javascript">
$(function(){
$("#sortable").sortable({
placeholder: "ui-state-highlight",

404

II. jQuery

opacity: 0.6,
stop: function(event, ui) {
alert(event.type);
}
});
});
</script>

JavaScript- 18.5.4 stop


, . . ,
ui, .
18.5.4 type
, ,
.
, ui,
18.5.5.
18.5.5. Sortable
<script type="text/javascript">
$(function(){
$("#sortable").sortable({
placeholder: "ui-state-highlight",
opacity: 0.6,
helper: "clone",
change: function(event, ui) {
ui.helper.css("color","#f00");
}
});
});
</script>

18.5.5 change,
. ui helper.
, .
css(name,value)
. ,
, . ?
, helper. clone , , .
, helper ui, :
ui.helper , , -

( ui.item);

18. UI jQuery

405

ui.position , top left -

;
ui.offset , top left

;
ui.item , ;
ui.placeholder , , -

;
ui.sender , -

, ( ).
,
Sortable. .sortable("cancel") 18.5.6, . 18.15.
18.15. Sortable

destroy


Sortable. ,

.sortable('destroy')
disable
.sortable('disable')
enable
.sortable('enable')
option
.sortable('option', optionName,
[value])

.
enable
,
disable

option
.sortable('option', optionName)

widget
.sortable('widget')

serialize

id ,
AJAX-. id. : id='name_number' id='namenumber'.
'name[]=number& name[]=number'. , , . :

.sortable('serialize', [option])

'key' 'name[]'
;

406

II. jQuery
18.15 ()

'attribute' , id;
'expression'

toArray
.sortable('toArray')
cancel
.sortable('cancel')

id

,
.
callback-, stop
receive

18.5.6. Sortable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-5-6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;
font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
$(function(){
$("#sortable").sortable({
placeholder: "ui-state-highlight",
opacity: 0.6
});
$("#cancelSort").click(function(){
$("#sortable").sortable("cancel");
});
});
</script>
</head>
<ul id="sortable">

18. UI jQuery

407

<li class="ui-state-default">Item 1</li>


<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
<button id="cancelSort">Cancel Sort</button>
</body>
</html>

.sortable("cancel"), 18.5.6, ,
.
.
button #cancelSort.
click,
.
,
cancelSort, .
, .
18.5.7
. , ,
, .
18.5.7. Sortable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-18-5-7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#sortable1, #sortable2 { list-style-type: none; margin: 0 30px; padding: 0;
width: 200px; float:left; }
#sortable1 li, #sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable1 li span, #sortable2 li span { position: absolute; margin-left: 1.3em; }
</style>
<script type="text/javascript">

408

II. jQuery

$(function(){
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
tolerance: "pointer"
});
});
</script>
</head>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1 [1]</li>
<li class="ui-state-default">Item 2 [1]</li>
<li class="ui-state-default">Item 3 [1]</li>
<li class="ui-state-default">Item 4 [1]</li>
<li class="ui-state-default">Item 5 [1]</li>
<li class="ui-state-default">Item 6 [1]</li>
<li class="ui-state-default">Item 7 [1]</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1 [2]</li>
<li class="ui-state-default">Item 2 [2]</li>
<li class="ui-state-default">Item 3 [2]</li>
<li class="ui-state-default">Item 4 [2]</li>
<li class="ui-state-default">Item 5 [2]</li>
<li class="ui-state-default">Item 6 [2]</li>
<li class="ui-state-default">Item 7 [2]</li>
</ul>
</body>
</html>

HTML- , 18.5.7,
#sortable1 #sortable2. JavaScript , jQuery
Sortable. connectWith. ,
.
, class connectedSortable , , .
" ", , , connectedSortable .

-
-, , ,
I II.
1. -

01-selectors

1 " "

02-attributes

2 " "

03-effects

3 " "

04-css

4 " CSS-"

05-data

5 " jQuery"

06-manipulation

6 " "

07-traversing

7 " "

08-events

8 " "

09-ajax

9 " jQuery AJAX"

10-additional

10 "
jQuery"

11-menu

11 " -"

12-tables

12 " "

13-charts

13 " "

14-forms

14 "AJAX-"

14-forms/jqueryForm

jQuery Form

14-forms/jqueryUploadify

jQuery Uploadify

14-forms/jqueryValidate

jQuery Validate

15-galleries

15 " "

16-plug-ins

16 " "

410

1 ()

16-plug-ins/cluetip

jQuery ClueTip

16-plug-ins/cookie

jQuery Cookie

16-plug-ins/timers

jQuery Timers

17-ui-widgets

17 "UI jQuery "

17-ui-widgets/accordion

Accordion

17-ui-widgets/autocomplete

Autocomplete

17-ui-widgets/button

Button

17-ui-widgets/datepicker

Datepicker

17-ui-widgets/dialog

Dialog

17-ui-widgets/progressbar

Progressbar

17-ui-widgets/slider

Slider

17-ui-widgets/tabs

Tabs

18-ui-interactions

18 "UI jQuery
"

18-ui-interactions/draggable

jQuery Draggable

18-ui-interactions/droppable

jQuery Droppable

18-ui-interactions/resizable

jQuery Resizable

18-ui-interactions/selectable

jQuery Selectable

18-ui-interactions/sortable

jQuery Sortable


1. . JavaScript. . .: -, 2008.
2. . JavaScript. . .:
, 2008.
3. ., . jQuery. JavaScript.
.: -, 2008.
4. ., . AJAX: . .: , 2009.
5. ., ., - ., . AJAX PHP. Web-. .: -, 2006.
6. . PHP. . .: , 2008.
7. ., - ., . AJAX . .: -, 2008.
8. . CSS . ,
2- . .: -, 2007.
9. . CSS. . .: -, 2007.
10. ., ., . PHP5. Web. .: -, 2006.
11. ., . MySQL . .: -,
2007.

A
AJAX- 178

C
camel case 77

D
DOM 56, 144

* * *

308
Accordion
308
316
311, 312
308
312
315
Autocomplete
365
Datepicker
318
328, 329
321325
318
326, 327
Dialog
329
335, 336
332, 333, 338

330
335, 339
Progressbar
337
340
337
Slider
340
345
342, 343
340
344
Tabs
346, 361
353355, 361, 366
349, 350, 360, 363, 364
347, 356, 362
351, 352, 360
$(document).ready() 145

.sortable() 407
activate 318
add(expr) 138
addClass(class) 58
after(content) 106
andSelf() 142
animate() 74, 75, 77, 79
animate(params,[duration]) 153, 160
append(content) 101
appendTo() 272
appendTo(selector) 103
attr(key, fn) 55
attr(key,value) 53

attr(name) 53
attr(properties) 54
before(content) 106
bind(type,[data],fn) 147
blur(fn) 159
change(fn) 159
children() 120, 121
click(fn) 159
clone() 115, 116
contents() 139
css() 16
css(name) 84
css(name,value) 85
css(properties) 86
data(name) 94
data(name,value) 94
dialog 328
die([type],[fn]) 152, 154
each(callback) 195, 209
effect() 82
empty() 113
end() 141
eq(position) 211, 213
everyTime() 299
fadeTo() 73
fancybox() 284
filter(expr) 128, 141
filter(fn) 129
find(expr) 127
focus(fn) 159
hasClass(class) 58
hide() 67
hover(over,out) 156
html() 59
html(val) 60, 100
index(subject) 211, 213
insertAfter(selector) 107
insertBefore(selector) 107
is(expr) 131
live(type,fn) 152, 154
load(url,[data],[callback]) 165, 167, 168
mouseout 156
mouseover 156
next() 118
nextAll() 118
not(expr) 132
offset() 90
one(type,[data],fn) 149
oneTime() 301

413

parent() 120, 121


parents() 122, 124
position() 90
prepend(content) 102
prependTo(selector) 104
prev() 118
prevAll() 118
ready(fn) 144, 146
remove() 113
removeAttr(name) 56
removeClass(class) 58
removeData(name) 94
replaceAll(selector) 112
replaceWidth(content) 111
scrollLeft() 92
scrollTop() 92
show() 67
siblings() 125
size() 208
slice(start,end) 133, 134
slideDown() 70
slideToggle() 70
slideUp() 70
stop() 75
text() 59
text(val) 60, 98
toggle() 67
toggle(fn1,fn2,[fn3,fn4]) 158
toggleClass(class) 58
trigger(event,[data]) 150
unbind(type,fn) 147
val() 61, 63
val(val) 62, 65
wrap(html) 108, 110
wrapAll(html) 108, 110
wrapInner(html) 108, 110

Accordion 315
Autocomplete 366
Datepicker 328
Dialog 335
Progressbar 339
Slider 345
Tabs 353
Draggable 377
Droppable 385
Resizable 391
Selectable 398
Sortable 405

414

event 375
options 180
ui 375, 404

Accordion 311
Datepicker 321
Dialog 332
Slider 342
Tabs 349, 360, 363
Cluetip 305
Draggable 226, 372
Droppable 381
FancyBox 286, 292
Resizable 387
Selectable 394
Sortable 401

FancyBox 282
Form 262
jqGrid 230
jqPlot 250
jQuery Cluetip 302
jQuery Cookie 297
jQuery Timers 299
Multi Level Menu 221
Uploadify 273
Validate 267
Draggable 370
377
226, 227, 372375
376
Droppable 379
385
381, 382
383
Resizable 386
391
388, 389
389
Selectable 392
398, 399
394
394, 395

Sortable 399
405, 406
401403
403

length 208
seriesDefaults 256

* 13
.class 18
ancestor descendant 20
element 17
first 24
gt(index) 27
last 25
lt(index) 28, 29
odd 26
parent > child 22
prev ~ siblings 23
prev + next 22
15

Accordion 315
Autocomplete 364
Datepicker 326
Dialog 335
Slider 344
Tabs 351
Draggable 376
Droppable 383
Resizable 389
Selectable 394
Sortable 403
AJAX- 192

comment.php 265
css/demo_table.css 232
css/hot-sneaks/jquery-ui-1.7.2.custom.css 341
css/humanity/jquery-ui-1.7.2.custom.css 338
css/le-frog/jquery-ui-1.7.2.custom.css 348,
358, 363, 371, 393
css/smoothness/jquery-ui-1.7.1.custom.css 310
css/start/jquery-ui-1.7.2.custom.css 387

css/sunny/jquery-ui-1.7.2.custom.css 400
css/trontastic/jquery-ui-1.7.2.custom.css 380
css/ui-lightness/jquery-ui-1.7.2.custom.css
320, 331
example.css 270
excanvas.js 251
jqplot.pieRenderer.min.js 256
jquery.cluetip.css 302
jquery.cluetip.js 302
jquery.cookie.js 298
jquery.dataTables.min.js 232
jquery.easing.js 283, 287
jquery.fancybox.css 283
jquery.fancybox.js 283
jquery.form.js 265
jquery.jqplot.css 251
jquery.jqplot.min.js 251
jquery.timers.js 299
jquery.uploadify.v2.1.0.min.js 274
jquery.validate.js 270
jquery-1.3.2.min.js 224, 232, 251, 265,
270, 274
jqueryslidemenu.css 224
jqueryslidemenu.js 224
jquery-ui-1.7.2.custom.js 81
js/i18n/jquery-ui-i18n.js 320
js/jquery.cookie.min.js 348
js/jquery-1.3.2.min.js 311, 320, 331, 338, 341,
348, 358, 363, 371, 380, 387, 393, 400
js/jquery-ui-1.7.1.custom.min.js 311
js/jquery-ui-1.7.2.custom.min.js 283, 320,
331, 338, 341, 348, 358, 363, 371, 380, 387,
393, 400
plugins/jqplot.barRenderer.min.js 258
plugins/jqplot.categoryAxisRenderer.min.js
258
plugins/jqplot.dragable.min.js 260
plugins/jqplot.pieRenderer.min.js 255
plugins/jqplot.pointLabels.min.js 258
plugins/jqplot.trendline.min.js 260
swfobject.js 274
testAjax.php 180
testAjaxSetup.php 187
testEvents.php 190
testGet.php 171
testGetJSON.php 175
testGetScript.js 173
testLoad.php 170

415

testPost.php 177
ui.core.js 370

[attribute!=value] 3840
[attribute$=value] 39
[attributeFilter1][attributeFilter2]...
[attributeFilterN] 40
checked 44
contains 31
disabbled 43
empty 31
enabled 43
first-child 49
has(selector) 32
hidden 34
input 40
last-child 49
nth-child(index/even/odd/equation) 47
only-child 51
parent 33
password 42
selected 45
text 42
visible 34
190

$.ajax(options) 178
$.ajaxSetup(options) 185
$.each(object,callback) 176, 195
$.extend(target,object1,[objectN]) 197
$.get(url,[data],[callback],[type]) 170
$.getJSON(url,[data],[callback]) 173
$.getScript(url,[callback]) 172
$.grep(array,callback,[invert]) 199
$.inArray(value,array) 201
$.map(array,callback) 202
$.merge(first,second) 198
$.post(url,[data],[callback],[type]) 176
$.unique(array) 200

iframe 140
23, 125
- 122, 124
bounce 81
UI jQuery, 82

Оценить