Г. А. Самков - JQuery. Cборник Рецептов - 2011

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. *
<head>
$(function(){
alert($("*",document.body).length);
});
</script>
</head>
1.
15
<body>
<ul>
<li></li>
<li></li>
</ul>
<p></p>
</body>
</html>
. ? 6 13 1.1.1.
, body. body .
id.
id ( 1.1.3).
1.1.3. #id
<head>
$(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 id="otherDiv"></div>
</body>
</html>
, myId,
css(), 1 px,
, .

id .
id, , .
, CSS.
, ( 1.1.4).
1.1.4. #id
<head>
$(function(){
$("#my\\.Div").css("border","1px solid #f00");
$("#my\\[Div\\]").css("border","1px solid #0f0");
});
1.
17
</script>
div {
float:left;
width:150px;
height:150px;
border:1px solid #00f;
margin:2px;
}
</style>
</head>
<body>
<div></div>
<div id="my.Div"></div>
<div id="my[Div]"></div>
</body>
</html>
, , css()
. my.Div ,
my[Div] .
- ,
div .
element ( 1.1.5).
1.1.5. element
<head>
18
I. jQuery
$(function(){
$("div").css("border","2px dotted #f00");
});
</script>
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
<head>
$(function(){
$(".test").css("border","1px solid #f00");
});
</script>
1.
19
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.
<head>
$(function(){
$("#item2, p.test, div").css("background-color","#ccc");
});
</script>
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
<head>
1.
21
form {
border:2px green solid;
padding:2px;
margin:0;
background:#efe;
}
div {
color:red;
}
fieldset {
margin:1px;
padding:3px;
}
</style>
$(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
$(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
$(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
<head>
form {
border:2px green solid;
padding:2px;
margin:0;
background:#efe;
}
div {
color:red;
}
fieldset {
margin:1px;
padding:3px;
}
</style>
$(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
<head>
table {
width:400px;
}
</style>
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>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
HTML-, 1.3.1, . JavaScript-. tr:first,

.
:last ( 1.3.2).
1.3.2. :last
$(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
$(function(){
$("tr:even").css("background-color","#ccc");
});
</script>
tr:even , 1.3.3, ( ) .
:odd ( 1.3.4).
1.3.4. :odd
$(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)
$(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)
$(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)
$(function(){
$("td:lt(5)").css("background-color","#ccc");
});
</script>
. td:lt(5),
.
, , .
:not()( 1.3.8).
1.3.8. :not()
$(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
<head>
table {
width:400px;
}
</style>
$(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()
<head>
div { background-color:#ff0; border:1px solid #aaa; width:80px; height:80px;
margin:0 5px; float:left; }
div.colored { background:#008000; }
</style>
$(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
<head>
$(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
<head>
$(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>
</table>
</body>
</html>
1.4.2 :empty td,

, . . , -,
. , CSS background-color. :empty .
- div, p.
:has()( 1.4.3).
1.4.3. :has()
1.
33
<head>
.test{ border: 3px inset #f00; }
</style>
$(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
<head>
td { background-color:#393; }
</style>
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>
</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
<head>
div { width:50px; height:50px; margin:5px; border:4px outset #00f; float:left; }
1.
35
.starthidden { display:none; }
</style>
$(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]
<head>
div { width:100px; height:100px; margin:5px; padding:5px; border:1px solid
#00f; float:left; }
</style>
$(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"]
$(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"]
$(function(){
$("div[id!='somevalue']").css({
});
});
</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"]
$(function(){
$("div[id^='test']").css({
});
});
</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"]
$(function(){
$("div[id$='test']").css({
});
});
</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"]
$(function(){
$("div[id*='test']").css({
});
});
</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"]
$(function(){
$("div[id*='test'][class='example']").css({
});
});
</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
<head>
form { width:450px; }
input { margin-left:75px; }
label { float:right; }
</style>
$(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
$(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
$(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
<head>
input { float:right; margin-bottom:2px; }
br { clear:right; }
</style>
$(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
<head>
input { float:right; margin-bottom:2px; }
br { clear:right; }
</style>
$(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"
</form>
</body>
</html>
45
/><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
46
I. jQuery
<head>
$(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)
<head>
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>
$(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
<head>
I. jQuery
50
span { color:#008; }
</style>
$(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
<head>
div {
width:100px;
height:100px;
margin:5px;
padding:5px;
float:left;
background-color:#b9e;
}
</style>
$(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()
<head>
$(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)
<head>
$(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))
<head>
56
I. jQuery
$(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)
<head>
$(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()
<head>
p { border:1px dotted #ccc; }
.test { background-color:#369; color:#fff; }
</style>
$(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()
<head>
$(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)
<head>
#test { border:1px dotted #369; padding:5px; }
</style>
$(function(){
var txt = $("div:first").text();
2.
61
$("#test").text(txt);
});
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()
62
I. jQuery
<head>
p { border:1px dotted #369; padding:5px; color:#00f; }
</style>
$(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)
<head>
2.
63
$(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()
64
I. jQuery
<head>
p { border:1px dotted #369; padding:5px; color:#00f; }
</style>
$(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>
</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>
</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>
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)
66
I. jQuery
<head>
$(function(){
$("#single").val("Single3");
$("#multiple").val(["Multiple2", "Multiple4", "Multiple5"]);
$("input").val(["check", "radio3"]);
});
</script>
</head>
<body>
<select id="single">
<option>Single1</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple1</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br />
<input type="checkbox" name="c" value="check" /><label>check</label><br />
</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()
<head>
div { border:1px dotted #369; padding:5px; color:#00f; }
</style>
68
I. jQuery
$(function(){
$("button:eq(0)").click(function(){
$("#test").hide();
});
$("#test").show();
});
$("#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()

<head>
.result { border-bottom:1px dotted #369; }
</style>
$(function(){
$("#test").hide(1000,function(){ $("p:first").text("hide"); });
});
$("#test").show(2000,function(){ $("p:first").text("show"); });
});
$("#test").toggle(800,function(){ $("p:first").text("toggle"); });
});
});
</script>
</head>
<body>
<p class="result"> </p>
<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()
<head>
</style>
$(function(){
$("#test").slideUp(1000,function(){ $("p:first").text("slideUp"); });
});
3.
71
$("#test").slideDown(2000,function(){ $("p:first").text("slideDown"); });
});
$("#test").slideToggle(800,function(){ $("p:first").text("slideToggle");
});
});
});
</script>
</head>
<body>
<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()
<head>
</style>
$(function(){
$("#test").fadeOut(2500,function(){ $("p:first").text("fadeOut"); });
});
$("#test").fadeIn(2500,function(){ $("p:first").text("fadeIn"); });
});
$("#test").fadeToggle(800,function(){
$("p:first").text("fadeToggle");
});
});
});
</script>
</head>
<body>
<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()
<head>
</style>
$(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()
<head>
div {
position:absolute;
background-color:#369;
left:100px;
width:90px;
height:90px;
margin:5px;
}
</style>
3.
75
$(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()

<head>
div {
width:100px;
border:1px solid #369;
padding:5px;
}
</style>
$(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()
<head>
div {
position:absolute;
background-color:#69c;
left:100px;
width:90px;
I. jQuery
78
height:90px;
margin:5px;
}
</style>
$(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()
<head>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
$(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()
<head>
<script src="js/jquery-ui-1.8.10.custom.min.js"
type="text/javascript"></script>
div {
position:absolute;
top:200px; left:200px;
width:200px; height:200px;
border:1px solid #369; background-color:#69c;
}
</style>
$(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
<head>
<script src="jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
div {
position:absolute;
border:1px solid #369; background-color:#69c;
}
</style>
I. jQuery
82
$(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()
<head>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
$(function(){
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").text(" background-color = " + color);
});
});
4. CSS-
85
</script>
</head>
<body>
<span id="result"> </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()
<head>
86
I. jQuery
div { width:150px; height:150px; margin:5px; float:left; border:1px solid #369; }

</style>
$(function(){
var color = $("input").val();
$("div").css("background-color", color);
});
});
</script>
</head>
<body>
<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)
4. CSS-
87
<head>
a { color:#000; background-color:#eee; }
</style>
$(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() .
<head>
div {
margin:15px; padding:10px;
border:1px dotted #f00;
overflow:hidden;
}
</style>
$(function(){
$("input").val($("div").width());
});
4. CSS-
89
$("input").val($("div").height());
});
$("input").val($("div").innerWidth());
});
$("input").val($("div").innerHeight());
});
$("input").val($("div").outerWidth(true));
});
$("input").val($("div").outerHeight());
});
$("div").width($("input").val()*1);
});
$("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 />
<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()
<head>
#main {
position:relative;
4. CSS-
91
border:1px solid #f00;
padding:10px;
}
.inner {
margin:5px; float:left;
}
br { clear:left; }
p { margin-left:40px; }
</style>
$(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>
<br />
</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()
<head>
#demo {
overflow:auto;
}
p {
width:1000px;
background-color:#ddd;
border-bottom:1px dotted #69c;
}
</style>
4. CSS-
93
$(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()
<head>
$(function(){
$("div:first").data("employee", {
name: "",
age: 27,
phone: "+7(903)217-77-77"
});
$("p span:eq(0)").text($("div:first")
.data("employee").name);
5. jQuery
95
.data("employee").age);
.data("employee").phone);
});
$("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>
5. jQuery
97
$(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>
</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()
<head>
p {
margin:5px;
padding:5px;
border-bottom:1px dotted #369;
}
</style>
$(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()
<head>
$(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()
<head>
p {
margin:5px;
padding:5px;
}
</style>
$(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()
<head>
p {
margin:10px;
}
em {
color:#00f;
font-weight:bold;
}
</style>
$(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()
<head>
p {
margin:10px;
}
em {
color:#00f;
font-weight:bold;
}
</style>
$(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()
<head>
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>
$(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()
6.
105
<head>
div {
margin:5px;
padding:5px;
}
span {
color:#fff;
font-weight:bold;
background-color:#e4ae00;
margin:0 5px;
padding:0 5px;
}
</style>
$(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()
<head>
input { margin-bottom:2px; }
label { margin-right:10px; }
em { color:#f00; }
</style>
$(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()
<head>
input { margin-bottom:2px; }
label { margin-right:10px; }
em { color:#f00; }
</style>
$(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()
<head>
ul {
width:200px;
padding:20px;
}
6.
109
li {
padding-left:5px;
}
</style>
$(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()
<head>
div { border: 2px solid #00f; }
p { background-color:#ff0; margin:4px; }
</style>
$(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()
<head>
button { display:block; width:200px; }
div {
color:#369;
width:200px;
margin:3px;
text-align:center;
}
</style>
$(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()
<head>
6.
113
button { display:block; width:200px; }
p {
color:#369;
}
div {
border-bottom:1px dotted #00f;
color:#00f;
}
</style>
$(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()

<head>
p, div {
padding-left:5px;
margin:1px;
color:#369;
}
</style>
$(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()
<head>
</style>
$(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()
<head>
p, div {
width:250px; height:25px; border:1px dotted #369;
padding-left:5px; margin:1px; color:#369;
}
.off { background-color:#369; }
</style>
$(function(){
$("p").click(function(){
$(this).toggleClass("off");
});
6.
117
var p;
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()
<head>
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
$(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()
<head>
$(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()
<head>
div {
}
p {
border:2px solid #ccc; padding:0 5px;
background-color:#ddd;
}
</style>
$(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()
7.
123
<head>
body { width:400px; }
body, h1, div, p, ul, li, a {
padding:10px; margin:10px;
}
a { display:block; }
</style>
$(function(){
$("a:first").click(function(){
$("*").css("border-color","#ccc");
$(this).parents("ul").css("border-color","#f0f");
});
$("a:last").click(function(){
$(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()
<head>
7.
125
ul.level-1 { width:300px; }
</style>
$(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
<li class="item-a">A</li>
<li class="item-b">B
<li class="item-1">1</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()
<head>
body, div, p {
}
</style>
$(function(){
$("p").click(function(){
$(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()
<head>
p, div {
}
</style>
$(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()
<head>
div {
border:3px double #369;
}
</style>
7.
129
$(function(){
$("div").css("background","#c8ebcc")
.filter(".test")
.css("border-color", "#f00");
});
</script>
</head>
<body>
<div></div>
<div class="test"></div>
<div></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()
130
I. jQuery
<head>
div {
}
</style>
$(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()
<head>
div {
}
</style>
$(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="second" class="test"></div>
<div id="fifth" class="test"></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()
<head>
div {
}
</style>
$(function(){
$("div").not(".test, #third").css("border-color","#f00");
});
7.
133
</script>
</head>
<body>
</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()
<head>
134
I. jQuery
div {
}
</style>
$(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()

<head>
$(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()
<head>
ul { width: 400px; }
</style>
$(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()
<head>
</style>
$(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()
<head>
body, div, p {
}
</style>
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()
140
I. jQuery
<head>
iframe {
border:1px dotted #00f;
}
</style>
$(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()
<head>
div {
}
</style>
$(function(){
$("div").filter(".test, #sixth")
.css("background-color","#00f")
.end()
.filter(".test:first, #first")
.css("border-color","#f00");
});
</script>
</head>
<body>
</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()
<head>
div, p { margin:10px; padding:5px; }
.border { border:3px double #f00; }
.background { background-color:#ddd; }
</style>
$(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)
<head>
$(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)
<head>
$(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()
<head>
$(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()
<head>
div {
width:400px; height:300px; padding:10px;
}
p {
margin:10px; border-bottom:1px dotted #369;
}
</style>
$(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);
});
$("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()
<head>
div {
float:left;
border:3px double #ccc;
}
</style>
$(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()
<head>
div {
float:left;
}
</style>
$(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()
<head>
div {
float:left;
}
</style>
$(function(){
$("<div></div>").insertAfter("div:last");
});
/*
$(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);
});
$("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()
8.
155
<head>
th, td { text-align:center; }
td { border-bottom:1px dotted #ccc; }
.hover { background-color:#333; color:#fff; }
</style>
$(function(){
$("tbody").append("<tr><td>-1</td><td>-2</td><td>-3</td></tr>");
});
$("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>
</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()
<head>
8.
157

div {
float:left;
}
.hover {
border:3px double #f00;
}
</style>
$(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()
<head>
div {
background-color:#fff;
}
</style>
$(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()
<head>
input,select { width:120px; margin:1px; }
span { padding:4px; }
.focus { color:#f00; }
.blur { color:#00f; }
.change { color:#0f0; }
</style>
$(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);
});
$("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>
</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()

<head>
div {
[data],
I. jQuery
166
overflow:auto;
}
</style>
$(function () {
$("#target").load("testLoad.htm");
});
$("#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()
<head>
div {
overflow:auto;
}
</style>
$(function () {
$("#target").load("testLoad.htm h2,p:last", function(){
alert("!");
});
});
});
});
</script>
</head>
<body>
<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()
<head>
div {
9. jQuery AJAX
169
overflow:auto;
}
</style>
$(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);
});
});
});
});
</script>
</head>
<body>
<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()
<head>
div {
overflow:auto;
}
</style>
9. jQuery AJAX
171
$(function () {
$.get("testGet.php",
{ name: "John", age: "35" },
function(data){
$("div").text(data);
});
});
$("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
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()
<head>
div {
overflow:auto;
}
</style>
$(function () {
$.getScript("testGetScript.js");
});
$.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()
<head>
div {
overflow:auto;
}
</style>
$(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 />'));
});
});
$.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;
});
});
});
$("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
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()
<head>
div {
overflow:auto;
}
9. jQuery AJAX
177
</style>
$(function () {
$.post("testPost.php",
{ name: "Debora", age: "45" },
function(data){
$("div").text(data);
});
});
$("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
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()
<head>
9. jQuery AJAX
179
div {
overflow:auto;
}
span { color:#f00; }
</style>
$(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);
}
});
});
$("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
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()
<head>
div {
overflow:auto;
}
#result {
border:1px dotted #f00;
}
span { color:#f00; }
</style>
$(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
$.ajax({ data: "q=1&er=none" });
});
$.ajax({ data: "q=2&er=none" });
});
$.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
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-
<head>
#result {
}
button {
width:200px;
margin:5px;
}
</style>
$(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
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()
<head>
</style>
$(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()
<head>
div {
float:left;
}
196
I. jQuery
p { color:#f00; }
</style>
$(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()
<head>
$(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()
<head>
$(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()
<head>
$(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);
});
arr = $.grep(arr, function (a) { return a != 9; },true);
});
</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()
<head>
$(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></div>
<div></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()
<head>
$(function () {
var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight",
"nine", "ten" ];
I. jQuery
202
$("p").text(arr.join(", "));
alert($.inArray($("input").val(), arr));
});
});
</script>
</head>
<body>
<p></p>
<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()
<head>
$(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()
<head>
204
I. jQuery

div {
color:#fff; background-color:#00f;
}
</style>
$(function () {
$.isArray($("div")) ? alert(" !") : alert(" !");
});
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()
<head>
div {
color:#fff; background-color:#00f;
}
</style>
$(function () {
var test = { "one": "", "two": "" }
var empty = new Object;
$.isPlainObject($("div")) ? alert(" !") : alert(" !");
});
$.isPlainObject(test) ? alert(" !") : alert(" !");
});
206
I. jQuery
$.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()
<head>
$(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>
</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
<head>
div {
}
.test {
}
br { clear:left; }
</style>
$(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></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()
<head>
div {
}
.test {
}
br { clear:left; }
</style>
$(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> </p>
<div></div>
<div></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()

<head>
div {
}
br { clear:left; }
</style>
$(function(){
$("div").eq(2).css("background-color", "#f00");
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()
<head>
$(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()
<head>
$(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()
<head>
$(function () {
var row = '{"name":"John","phone":"555-66-77","age":"45"}';
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()
<head>
$(function () {
var row = '<rss version="2.0"><channel><title>RSS
Title</title></channel></rss>';
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()
<head>
$(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>
</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
<head>
<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>
$(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>
</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
, .
<head>
11. -
225

$(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).
<head>
<link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" />
$(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).
<head>
<link rel="stylesheet" type="text/css" href="css/superfish-navbar.css" />
11. -
229
$(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
<head>
<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/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
12.
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
$(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",
{id:"4287", country_code:"BE", region_code:"08", city:"Aalter",
{id:"7405", country_code:"CH", region_code:"01", city:"Aarau",
{id:"7936", country_code:"CH", region_code:"14", city:"Aarberg",
{id:"7406", country_code:"CH", region_code:"01", city:"Aarburg",
{id:"3564", country_code:"BE", region_code:"02", city:"Aarschot",
{id:"4437", country_code:"BE", region_code:"09", city:"Aartrijke",
{id:"3443", country_code:"BE", region_code:"01", city:"Aartselaar",
{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
<head>
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
p { font-size: 2em; }
p a { margin:0 5px; }
</style>
$(function(){
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(" !"); }
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(" !");
}
if(id) {
var del = $("#example").delRowData(id);
if(del) { alert(" " + id + " !"); }
} else {
alert(" !");
}
});
});
</script>
</head>
<body>
<p><a href="#"> </a> <a href="#"> </a>
<a href="#"> </a> <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
12.
237
<head>
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
$(function(){
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
<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
<head>
12.
241
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
$(function(){
url:"datafromserver.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{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},
sorttype:"float", editable:true},
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>
</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
12.
<head>
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
$(function(){
var lastsel;
url:"datafromserver.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
editable:true},
{name:'region_code', index:'region_code', width:75, sorttype:false,
editable:true},
editable:true},
sorttype:"float", editable:true},
sorttype:"float", editable:true}
],
rowNum:10,
rowList:[10,20,30],
pager: "#pager",
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>
</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
<head>
12.
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
$(function(){
url:"datafromserver2.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
search:false},
{name:'region_code', index:'region_code', width:75, sorttype:false},
search:false},
sorttype:"float"},
sorttype:"float"}
],
rowNum:10,
rowList:[10,20,30],
pager: "#pager",
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>
245
II. jQuery
246
</body>
</html>
.
JavaScript-
, searchGrid.
, . sopt ,
,
. eq , lt gt .
. 12.4 .
. 12.4. jqGrid.
, jqGrid ,
.
datafromserver2.php, -,
.
.
, ( 12.1.7).
12.1.7. jqGrid
12.
247
<head>
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
</style>
$(function(){
url:"datafromserver2.php",
datatype: "json",
height: 250,
colNames:['Id',' ',' ','','',''],
colModel:[
{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",
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>
</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
13.
251
<head>

<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
$(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
<head>
$(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
<head>
<script type="text/javascript"
src="js/plugins/jqplot.pieRenderer.min.js"></script>
$(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
<head>
<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>
$(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

</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
<head>
<script type="text/javascript" src="js/plugins/jqplot.dragable.min.js"
/></script>
<script type="text/javascript" src="js/plugins/jqplot.trendline.min.js"
/></script>
$(function(){
$.jqplot.config.enablePlugins = true;
line1=[4, 25, 13, 22, 14, 17, 15];
$.jqplot("example", [line1],
{ title: " " }
);
});
</script>
260
II. jQuery
</head>
<body>
</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
<head>
<link type="text/css" href="css/form.css" rel="stylesheet" />
<script src="js/jquery.form.js" type="text/javascript"></script>
$(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"> </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>
<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">
<option value="A" selected="selected"> A</option>
<option value="B"> B</option>
<option value="C"> C</option>
</optgroup>
<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="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
$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
<head>
<link type="text/css" href="css/form.css" rel="stylesheet" />
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
$(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="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

$.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 , , .
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
<head>
<link type="text/css" href="css/uploadify.css" rel="stylesheet" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
$(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).
<head>
$(function(){
"folder": "uploads",
"multi": true,
"buttonImg": "img/browse.jpg",
"width": 130,
"height": 32,
"queueSizeLimit": 3
});
$("a:first").click(function(){
});
$("#fileInput").uploadifyClearQueue();
});
});
</script>
</head>
<body>
<div>
276
II. jQuery

<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.
<head>
$(function(){
"auto": true,
"sizeLimit": 2097152,
"fileDesc": "*.gif, *.jpg *.png",
"fileExt": "*.gif;*.jpg;*.png"
});
});
14. AJAX-
277
</script>
</head>
<body>
<div>
</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 , .
<head>
278
II. jQuery

#fileQueue {
border:1px solid #E5E5E5;
padding:0; margin-bottom:10px;
overflow:auto;
}
</style>
$(function(){
"multi": true,
"buttonImg": "img/browse.jpg",
"width": 130,
"height": 32,
"queueID": "fileQueue",
"simUploadLimit": 2
});
});
$("#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.
<head>
$(function(){
"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");
}
});
});
});
</script>
</head>
<body>
<div>
<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
<head>
<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" />

img { padding:2px; border:1px solid #ccc; margin:4px; }
a { outline:none; }
</style>
$(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
<head>
15.
285

a { outline:none; }
</style>
$(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
<head>
a { outline:none; }
</style>
$(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
<head>
$(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
<head>
$(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
<head>
a { outline:none; }
</style>
15.
293
$(function(){
$("a:first").fancybox({
"width": "75%",
"height": "75%",
"autoScale": false,
"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
<head>
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>
$(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
<head>
<script src=" js/jquery-1.5.2.min.js" type="text/javascript"></script>
a { outline:none; }
#information {
overflow:auto;
}
#outer {
display:none;
}
</style>
$(function(){
$("#show").fancybox({
"titlePosition": "inside",
"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
<head>
a { outline:none; }
</style>
$(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
<head>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
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
<head>
<script src="js/jquery.timers.js" type="text/javascript"></script>
$(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).
<head>
$(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.
<head>
$(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
<head>
<script src="js/jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.cluetip.css" />
$(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).
<head>
<link rel="stylesheet" type="text/css" href="jquery.cluetip.css" />
$(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).
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.cluetip.css" />
body { position:relative; }
</style>
$(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
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
$(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>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus.</p>
</div>
<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>
<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
$(function(){
$("#accordion").accordion();
});
</script>
17.1.2 . , , ,
.
, , .
, 17.1.3 , , HTML- .
17.1.3. Accordion
$(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
<head>
$(function(){
header: '.head',
event: 'mouseover',
fillSpace: true,
navigation: true
});
});
</script>
#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>
</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>
</ul>
</li>
</ul>
</body>
</html>
HTML-, . ,
, . navigation: true, ,
, ,
, .
. ,
.
17.1.5.
17.1.5. Accordion
$(function(){
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
$(function(){
autoHeight: false,
active: 2,
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
$(function(){
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
$(function(){
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
$(function(){
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
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>
$(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
$(function(){
});
</script>
17.2.2 ,
. ,
, - ( -). 17.2.3
.
17.2.3. Datepicker
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional['ru']));
});
</script>
17.2.3 ,
ru uk, .
, , , , - Datepicker. ( 17.2.4).
17. UI jQuery
321
17.2.4. Datepicker
$(function(){
$("#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
$(function(){
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
$(function(){
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
<head>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
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
. ,
.
Dialog , (draggable) (resizable).
HTML- . Dialog div,
title , . , div, .
Dialog HTML- ,
17.3.2.
17.3.2. Dialog
$(function(){
$("#dialog").dialog();
});
</script>
17.3.2
Dialog. ,
( 17.3.3).
17.3.3. Dialog
$(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
$(function(){
position: ['right','center'],
open: function(event, ui) {
},
dragStop: function(event, ui) {
}
});
});
</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
$(function(){
// body 15px ( )
$("body").css("border","15px dotted #F00");
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
<head>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
$(function(){
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
<head>
<link type="text/css" href="css/humanity/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
$(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 .
, .
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
$(function(){
$("#progressbar").progressbar({
value: 15,
},
complete: function(event, ui) {
}
});
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
<head>
<link type="text/css" href="css/hot-sneaks/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
$(function(){
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
<button id="getter">Get 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
$(function(){
$("#slider").slider();
});
</script>
17.5.2 , Slider. , ,
, .
,
. 17.5.3 ,
, HTML- .
17.5.3. Slider
$(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
$(function(){
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
$(function(){
min: 10,
max: 200,
values: [20,60],
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
$(function(){
min: 10,
max: 200,
values: [20,60]
});
alert(': ' + $("#slider").slider('option', 'values'));
});
$("#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
<head>
<link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script src="js/jquery.cookie.min.js" type="text/javascript"></script>
$(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">
</div>
<div id="tabs-3">
</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
.
UI Tabs. js/jquery.cookie.min.js
cookie. HTML , 17.6.2.
17.6.2. Tabs
$(function(){
$("#tabs").tabs();
});
</script>
Tabs , 17.6.2 ,
.
17.6.3 .
,
, HTML- .
17.6.3. Tabs
$(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
$(function(){
$("#tabs").tabs({
fx: { opacity: "toggle", duration: "slow" }
});
});
</script>
17.6.4 fx
.
17.6.5 cookie ,
.
17.6.5. Tabs
$(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
$(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
$(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
$(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
<head>
rel="stylesheet" />
$(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="#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
<head>
<link type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
div, button, input, a { margin:10px; }
</style>
$(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>
</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
$(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
<head>
17. UI jQuery
359

rel="stylesheet" />
button { margin:5px; }
</style>
$(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
<head>
rel="stylesheet" />
$(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. ,
. .
$(function(){
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).
$(function(){
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
<head>
rel="stylesheet" />
$(function(){
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>
<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.
<head>
rel="stylesheet" />
.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>
$(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>
<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
<head>
rel="stylesheet" />
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
$(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
$(function(){
});
</script>
II. jQuery
372
, ,
draggable, . 18.1.2 Draggable .
20 , .
18.1.3 .
18.1.3. Draggable
$(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
$(function(){
cursor: "move",
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
;
.
. 18.2 Draggable , callback-.
18.2. Draggable
create
dragcreate
start
dragstart
drag
drag
stop
dragstop
Draggable ,
. , 18.1.5. ,
.
18.1.5. Draggable
$(function(){
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
<head>
rel="stylesheet" />
378
II. jQuery

.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>
$(function(){
$("#sortable").sortable();
$(".draggable").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
</script>
</head>
<body>
<ul>
<li class="draggable">List 1, item 1</li>
</ul>
<br />
<ul id="sortable">
<li>List 2, item 1</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
<head>
<link type="text/css" href="css/trontastic/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
#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>
$(function(){
$("#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>
</body>
</html>
, css/trontastic/jquery-ui-1.8.9.custom.css
.
UI Droppable Draggable (
, "" , ).
HTML- , 18.2.2.
18.2.2. Droppable
$(function(){
$("#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
$(function(){
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
$(function(){
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){
" -> 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){
" -> 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
;
.
, 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
$(function(){
activate: function(event, ui){
$("#result").empty().append(event.type + "<br />");
},
deactivate: function(event, ui){
$("#result").append(event.type + "<br />");
},
over: function(event, ui){
},
out: function(event, ui){
},
18. UI jQuery
385
drop: function(event, ui){

}
});
$("#droppable").droppable("disable");
});
$("#droppable").droppable("enable");
});
$("#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
<head>
<link type="text/css" href="css/start/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted #999; }
</style>
$(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>
-->
</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
$(function(){
$("#resizable").resizable();
});
</script>
18.3.2 jQuery
, , . .
, ,
( 18.3.3).
18.3.3. Resizable
$(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
$(function(){
ghost: true,
alert(" " + event.type);
}
});
});
</script>
390
II. jQuery
18.3.4 stop callback-, . . ,

type .
, , .
, ,
. 18.3.5 ,
.
18.3.5. Resizable
$(function(){
ghost: true,
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.originalPosition , top left -
.
, ,
.
.resizable('option', optionName, [value]) 18.3.6.
18. UI jQuery
391
18.3.6. Resizable
$(function(){
animate: true,
ghost: true,
animateDuration: 500
});
alert($("#resizable").resizable("option", "animateDuration"));
});
$("#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
<head>
rel="stylesheet" />
#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>
$(function(){
$("#selectable").selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
18. UI jQuery
393

</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
$(function(){
});
</script>
18.4.2 #selectable . .

. , 18.4.3.
18.4.3. Selectable
$(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
$(function(){
alert(event.type);
}
});
});
</script>
Callback-, stop, . . ,
type, , .
18.4.5 start, selected stop.
start stop callback-,
. selected callback-,
.
18.4.5. Selectable
<head>
rel="stylesheet" />
396
II. jQuery
#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>
$(function(){
start: function(event) {
$("#result").empty().append(": " +
event.type + "<br />");
},
selected: function(event, ui) {
" " + ui.selected.innerHTML + "<br />");
},
stop: function(event) {
$("#result").append(": " +
event.type + "<br />");
}
});
});
</script>
</head>
<body>
</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
<head>
rel="stylesheet" />
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;
}
</style>
$(function(){
$("#selectable").selectable("disable");
});
$("#selectable").selectable("enable");
});
$("#selectable").selectable("destroy");
});
});
398
II. jQuery
</script>
</head>
<body>
</ol>
</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
<head>
rel="stylesheet" />
#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>
$(function(){
});
</script>
</head>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
II. jQuery
400
<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
$(function(){
});
</script>
18.5.2 ,

, , ( 18.5.3).
18.5.3. Sortable
$(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
$(function(){
404
II. jQuery
opacity: 0.6,
alert(event.type);
}
});
});
</script>
JavaScript- 18.5.4 stop

, . . ,
ui, .
18.5.4 type
, ,
.
, ui,
18.5.5.
18.5.5. Sortable
$(function(){
opacity: 0.6,
helper: "clone",
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.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
<head>
rel="stylesheet" />
#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>
$(function(){
opacity: 0.6
});
$("#cancelSort").click(function(){
$("#sortable").sortable("cancel");
});
});
</script>
</head>
<ul id="sortable">
18. UI jQuery
407

</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
<head>
rel="stylesheet" />
#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>
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>
</ul>
<ul id="sortable2" class="connectedSortable">
</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

Г. А. Самков - JQuery. Cборник Рецептов - 2011

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Г. А. Самков - JQuery. Cборник Рецептов - 2011

Загружено:

Авторское право:

Доступные форматы

2-

02429 24.07.00. 30.06.11.

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

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

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

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

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

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

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

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

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

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

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

jQuery Validate ( AJAX-) FileUpload (

cookie), jQuery ClueTip ( ), jQuery Timers

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

), Droppable ("" ), Resizable (

jQury Validation ();

jQuery Cookie (.);

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

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

ancestor descendant ( 1.2.1).

HTML-, 1.2.1, input.

parent > child ( 1.2.2).

prev + next ( 1.2.3).

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

prev ~ siblings ( 1.2.4).

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

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

JavaScript- 1.3.2, HTML-

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

1.4.2 :empty td,

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

1.4.4 :parent td,

:visible :hidden ( 1.5.1).

1.5.1 . div, CSS- display, form input,

1.6.1 HTML- div.

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

div, id test class example, 1.6.7

1.7.2 JavaScript-, HTML- . , input

- input, type password.

:enabled :disabled ( 1.8.1).

HTML- 1.8.2. checkbox, . div

1.8.3 HTML- select

. :even :odd , . . span ,

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

1.9.2 HTML- div,

HTML- 1.9.3 div.

a alt, title href, HTML-.

HTML- 2.1.2 href,

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

2.1.3 HTML- p - . JavaScript-,

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

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

"" 2.3.1 div test, HTML-.

2.3.2 div HTML- HTML. click,

HTML- 2.4.1 input, value . p

value input text.

2.4.2 input, value .

value radio, checkbox

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

HTML- 2.4.4 select, checkbox radio.

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

hide(), show() toggle().