Podrobnoe rukovodstvo po_prodvinutomu_java_script

-(812) 324-5353, (495) 945-8100

www.symbol.ru

: :

, C#

:

UML. , 3-

.

. .

,

.

,

C#

. 1970 , 1990 - -. - Object Mentor, Inc. , C++ Java, - , , UML, .

Object Mentor, , - - - - . - FitNesse . , -.

. , , , - .

:

, -

, ,

, , ,

UML- -

- ,

- , , .

, , , - . , .

ISBN 978-5-93286-197-4

8619749 785932

jQuery

JavaScript

- -- Books.Ru ISBN 978-5-93286-201-8, jQuery. JavaScript, 2- -. - Books.Ru . - , - . , - - ([email protected]), .

jQueryin Action

Second edition

Bear Bibeault, Yehuda Katz

jQuery

JavaScript

,

- 2011

High tech

,

jQuery.JavaScript,2-

. .. . . . . .

,

jQuery. JavaScript, 2- . . . .: -, 2011. 624 ., .

ISBN 978-5-93286-201-8

jQuery -. , HTML, , - Ajax -, - . . jQuery .

, JavaScript - Ajax . jQuery - -, .

, jQuery 1.4: , - , . , , - jQuery UI, , - jQuery UI .

ISBN 978-5-93286-201-8 ISBN 978-1-935182-32-0 ()

-, 2011Authorized translation of the English edition 2010 Manning Publications Co. This trans lation is pub lished and sold by permission of Manning Publications Co., the owner of all rights to publish and sell the same.

, - . -, , .

-. 199034, -, 16 , 7,. (812) 380-5007, www.symbol.ru. N 000054 25.12.98.

28.02.2011. 70100 1/16. . 39 . . 1200 .

199034, -, 9 , 12.

......................................................13

...........................................................................15

................................................17

..................................................19

........................................................................22

..........................................................................25

..............................................................................31

I. jQuery ...................................................................33

1. jQuery .......................................................351.1. , ..................................361.2. JavaScript ................................................38

1.2.1. .............................391.2.2. ...............................................40

1.3. jQuery ................................................................411.3.1. jQuery ......................................................411.3.2. ......................................441.3.3. ............................451.3.4. DOM ........................................471.3.5. jQuery.................................................481.3.6. jQuery ................50

1.4. ............................................................................51

2. ..................532.1. ....................................54

2.1.1. ..........................................562.1.2. CSS ...........................................582.1.3. , ....................................................................592.1.4. ...................................642.1.5. CSS jQuery .....................67

2.2. HTML ......................................712.3. ................74

2.3.1. .....76

6

2.3.2. ................772.3.3. ..........812.3.4. ...........................................................922.3.5. ...........................................................942.3.6. jQuery .....................95

2.4. ............................................................................98

3. jQuery .......................993.1. ...... 100

3.1.1. ................ 1023.1.2. ............................. 1033.1.3. ............................... 1053.1.4. .............................................. 1073.1.5. ............................................... 1083.1.6 ........... 110

3.2. .......................... 1123.2.1. ...................... 1133.2.2. ............................... 118

3.3. ................................... 1273.3.1. HTML- ......................... 1273.3.2. .................. 1293.3.3. ......................................... 1373.3.4. ............................................. 1393.3.5. ........................................ 1403.3.6 .................................................. 142

3.4. ............................... 1443.5. .......................................................................... 147

4. , ........................ 1484.1. ............................................... 150

4.1.1. DOM 0 ............................... 1514.1.2. DOM 2 ............................... 1584.1.3. Internet Explorer........................... 164

4.2. jQuery .................................................. 1644.2.1. jQuery ......................................................... 1654.2.2. ............................ 1714.2.3. Event ............................. 1724.2.4. ...... 1754.2.5. ................................ 1794.2.6. .................. 181

4.3. ( ) .............................. 1874.3.1. .................... 188

7

4.3.2. ............................. 1904.3.3. ............................................... 1944.3.4. .................................. 1954.3.5. ...................................................... 1994.3.6. ..... 2014.3.7. - .............................. 202

4.4. .......................................................................... 204

5. .......... 2065.1. .................................. 207

5.1.1. .................... 2085.1.2. ..... 212

5.2. ......................................... 213

5.2.1. ........ 2135.2.2. .......... 2205.2.3. ................... 2245.2.4. ....................... 226

5.3. ............... 2275.3.1. ..................................... 2305.3.2. ................................................... 2315.3.3. ............................................. 232

5.4. ................................. 2345.4.1. ............................................... 2345.4.2. ......................... 2375.4.3. ............................................... 244

5.5. .......................................................................... 245

6. DOM jQuery ......................................... 247

6.1. jQuery................................................................ 2486.1.1. ..... 2496.1.2. .................................... 2496.1.3. , ........................ 254

6.2. jQuery ............. 2576.3. JavaScript ............. 261

6.3.1. .................................................... 2616.3.2. ....... 2626.3.3. ........................................... 2646.3.4. ...................................... 2666.3.5. JavaScript .................................................. 269

8

6.3.6. ........................................... 2716.3.7. ....................... 2746.3.8. ...................................... 278

6.4. ............................. 2796.4.1. .................................................. 2796.4.2. ........................................ 2806.4.3. ....................... 2806.4.4. ...... 2816.4.5. JSON ......... 2856.4.6. ........................................ 2866.4.7. ......................... 287

6.5. .......................................................................... 290

7. jQuery ........................................................... 292

7.1. ? ............................................ 2937.2. jQuery .... 294

7.2.1. .............................. 2947.2.2. $ ................................................... 2967.2.3. ................ 296

7.3. ............. 2997.3.1. ...................................... 3017.3.2. ................ 303

7.4. ................................. 3077.4.1. ......................................................... 3107.4.2. .......... 315

7.5. .......................................................................... 329

8. Ajax ........ 3308.1. Ajax ......................................................... 331

8.1.1. XHR .................................... 3328.1.2. ........................................ 3348.1.3. .................. 3368.1.4. ................................................. 336

8.2. ..................................... 3388.2.1. jQuery ................ 3408.2.2. ............................. 343

8.3. GET POST ................................... 3488.3.1. GET ............................ 3518.3.2. JSON ........................ 3538.3.3. POST ................................... 3548.3.4. ........................ 356

9

8.4. Ajax ................................. 3628.4.1. Ajax ...... 3638.4.2. , .... 3668.4.3. Ajax ....................................... 368

8.5. .................................................... 3728.5.1. ...................... 3748.5.2. Termifier ........................ 3808.5.3. .............................. 384

8.6. .......................................................................... 385

II. jQuery UI ..................................................................... 387

9. jQuery UI: ........... 3899.1. jQuery UI ..................... 391

9.1.1. ........................................... 3919.1.2. jQuery UI ...................... 392

9.2. jQuery ............................................. 3949.2.1. .................................................................. 3959.2.2. ThemeRoller ................ 399

9.3. jQuery UI ....................................................... 4019.3.1. jQuery UI ............................................... 4029.3.2. ................................... 4099.3.3. .......... 4109.3.4. ............. 4119.3.5. ............................................... 413

9.4. ...................... 4169.5. .......................................................................... 420

10. jQuery UI ....... 42110.1. ............................................. 423

10.1.1. ............ 42510.1.2. , ............................................. 43310.1.3. .......... 434

10.2. ........................ 43610.2.1. ........................................... 43710.2.2. ............................ 441

10.3. ........................................ 44610.3.1. ......... 44810.3.2. ...................... 45310.3.3. ................................. 45410.3.4. ..................................... 456

10

10.4. ..................................... 45810.4.1. ...... 46010.4.2. , ................................. 46510.4.3. ........................................... 466

10.5. .................................................. 46710.5.1. ................... 47210.5.2. , .............................................. 47610.5.3. .............................. 478

10.6. ........................................................................ 479

11. jQuery UI: HTML ........................... 481

11.1. ............................................. 48311.1.1. .............................................................. 48311.1.2. ....................... 48511.1.3. ............................................. 48811.1.4. , ........................ 48911.1.5. ............................................ 489

11.2. ................................................................... 49011.2.1. ............................................ 49111.2.2. , ..................... 49611.2.3. ......... 498

11.3. ........................ 49911.3.1. ................................................... 50111.3.2. , ............................................ 50311.3.3. ........................... 50311.3.4. ................................................... 511

11.4. ............................ 51211.4.1. ...... 51311.4.2. .... 51711.4.3. , ........................................... 52011.4.4. ... 521

11.5. .................................................. 52211.5.1. ........................... 52311.5.2. , ................................................ 535

11

11.5.3. , ...... 53711.5.4. .... 537

11.6. .................................................. 54111.6.1. ................................................................. 54111.6.2. , ..... 55111.6.3. ....................... 552

11.7. Accordion ............................ 55311.7.1. Accordion ............................... 55411.7.2. , Accordion .......... 56111.7.3. CSS, Accordion ........................................................ 56211.7.4. Accordion Ajax ........................ 563

11.8. ..................................................................... 56411.8.1. .............................................. 56511.8.2. , ........................ 57211.8.3. CSS ........................... 57311.8.4. ................. 574

11.9. ........................................................................ 57611.10. ? ..................................................................... 577

A. JavaScript: , , ! ............ 578

A.1. Object JavaScript ...... 579A.1.1. ........................................ 579A.1.2. ............................................... 579A.1.3. .............................................. 582A.1.4. window .................... 584

A.2. ..................................... 585A.2.1. ? ...................................................... 586A.2.2. ................................... 588A.2.3. ? .................................................... 589A.2.4. ......................................................... 594

A.3. ......................................................................... 597

......................................................... 598

.............................................................................. 54

................................................................................ 74

/ ..................................................... 132

............................................................................... 218

$.Param() ................................................................ 277

................................................................. 398

jQuery UI ................................................................. 403

.............. 414

................................................................ 417

................................................ 427

............................................ 438

................................................................. 453

............................................................... 461

............................................................. 470

............................................................... 487

............................................................ 493

.................................................................... 514

........................................................................... 525

............................................................................... 546

- .................................................................. 556

................................................................................. 570

, in Action, Manning. . - , -. , !

(DavidSills),JavaLobby,Dzone

jQuery, - , jQuery .

(DavidHayden),MVPC#,Codebetter.com

JavaScript.

(JoshuaHeyer),TraneInc.

, jQuery, - , - . - , .

(GrantPalin),

; .

(RichStrahl),

, (Bear Bibeault) (Yehuda Katz), , -, , , , -

14

jQuery , - .

(MatthewMcCullough),DenverOpenSourceUsersGroup

, jQuery in Action - -, - JavaScript, , jQuery.

.(MichaelJ.Ross),-,Slashdot

8 10 , ! jQuery,

(JohnWhish),AdobeColdFusionUserGroupforDevon

, JavaScript, - JavaScript , , JavaScript.

ValsBlog

jQuery in Action jQuery, JavaScript.

www.DZone.com

jQuery in Action , jQuery. .

(GunnarHillert),AtlantaJavaUserGroup

. - - , , , ? , - -.

jQuery, , , - , - - . jQuery in Action, , , - jQuery.

, - jQuery in Action , .

, - . jQuery API. -, . - , - jQuery.

, - (plugins), , jQuery. jQuery . - , - . - , , , jQuery, -. , Forms, Dimension LiveQuery, - : ,

16

. , , jQuery.

, , jQuery - . - jQuery, , .

(JohnResig),jQuery

. - ?

!

, Java, -, , - - . jQuery , - !

jQuery ( - ), , . , - , jQuery 1.2, , jQuery 1.3 jQuery 1.4, !

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

jQuery UI! - jQuery UI . jQuery UI , , .

, - , , jQuery jQuery UI .

18

? , - : . , .

! , . , , . , , .

, , , 1 8 . -.

, . -. , jQuery 1.2 1.4, , - jQuery. , - - jQuery.

- jQuery 1.4, , -. , - Bamboo Asian Grille 4, - , jQuery. , jQuery, , - . DVD Ambassador, DVD, - .

, - jQuery UI , - jQuery UI .

, , , - , , , . -, -. !

, , FORTRAN , - , - , . - ?

jQuery.

, - , .

() jQuery, Ajax in Practice1. , , , - . , , , : , .

, Ajax in Practice, - Ajax , (Prototype), (Dojo Toolkit DWR) .

( , - ), (Valentin Crettaz) : jQuery?

?, .

, , Ajax . , - jQuery?

1 , , Ajax . .: -, 2008.

20

, , jQuery . jQuery, . , , - .

, Ajax in Practice . (, jQuery Dr. Dobbs Journal.)

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

- , Manning jQuery in Action. , -. ( - , , . , !)

(Mike Stephens) : (Yehuda Katz)?

?,

; jQuery , -. Selectables, jQuery. ( -) , wiki-1 Visual jQuery (visualjquery.com).

, jQuery - , jQuery Ruby.

1 , wiki-, -, , : wiki.org/wiki.cgi?WhatIsWiki Wiki, c2.com/cgi/wiki?WikiWikiWeb , c2.com/cgi/wiki?Infor-malHistoryOfProgrammingIdeas , . ...

21

, Manning (- ) jQuery

, , , , . - ( , ) !

, . , , , , , .

.

, - ? ?

, . , - ( , ).

Manning , , . . (Marjan Bace) , : (Lianna Wlasiuk), (Karen Tegtmayer), (Andy Carroll), (Deepak Vohra), (Barbara Mirecki), (Megan Yockey), (Dottie Marsico), (Mary Piergies), (Gabriel Dobrescu) (Steven Hong).

, - , , . . , , (Tony Niemann), (Scott Sauyet), (Rich Freedman), (Philip Hallstrom), (Michael Smolyak), - (Marion Sturtevant), (Jonas Bandi), (Jay Blanchard), (Nikander Bruggeman), (Margriet Bruggeman), (Greg Donald), - (Frank Wang), (Curtis Miller), (Christopher Haupt), (Cheryl Jerozal), . (Charles E. Logston), (Andrew Siemer), (Eric Raymond), (Christian Marquardt), (Robby OConnor), (Marc Gravell), - (Andrew Grothe), (Anil Radhakrishna), (Daniel Bretoi) (Massimo Perga).

23

, -. -, - , , , , , - jQuery jQuery UI, PHP, .

(Bear Bibeault) , , -, javaranch.com, . JavaRanch , (Pol Wheaton) (Kathy Sierra), , - , - , ( ) (Eric Pascarello), (Ben Souther), (Ernest Friedman Hill), (Mark Herschberg), (Andrew Munkhouse), (Jeanne Boyarski), (Bert Bates) (Max Habbibi).

: , jQuery ( ).

(Jay) ( ), , , MacBook Pro , - .

, , - , (John Resig) jQuery jQuery UI.

(Yehuda Katz) , . - , .

, , (Leah), -

24

- , . ; , . , .

, jQuery jQuery in Action. jQuery , -, - (, , , , ). - , , , - .

jQuery - , - (Brandon Aaron) (Jrn Zaefferer), - (Rey Bango) (Rarl Swedberg), (Paul Bakaus), jQuery UI, - (Klaus Hartl) (Mike Alsup), - . jQuery - JavaScript , - ( ) - , . , , ! - , , , , .

, , , . - , . , , , , .

.

: , - . , - (evangelist) jQuery, - , , jQuery - , .

jQuery , -, . - jQuery jQuery UI. - , - . , . - jQuery - .

: http://www.manning.com/jQueryinActionSecondEdition http://www.manning.com/bibeault2.

, , - , -, ? , ? !

? !

, -, JavaScript - , - - , .

26

-, - jQuery -, -, .

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

, - jQuery . , , .

, jQuery jQuery UI . - jQuery - jQuery. - , jQuery Ajax. jQuery.

: jQuery, jQuery UI. 1 .

1 jQuery , , - JavaScript. , - jQuery, , -, , - (Document Object Model, DOM) jQuery.

2 - jQuery, . -, DOM, , - jQuery. CSS, - , - (CSS).

3 , jQuery DOM . -

27

, , - .

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

5. , jQuery - , , . , .

6 -, jQuery , , jQuery.

, , 7. , jQuery; JavaScript jQuery. jQuery.

8 - -: Ajax. , Ajax jQuery , - Ajax , - Ajax ( JSON1). , - , .

, , : jQuery UI.

1 JSON (JavaScript Object Notation) ; JavaScript, ECMA-262 3rd Edition, December 1999 (json.org/json-ru.html). ...

28

9 jQuery UI , - , , . - , , , , - . - , jQuery UI, , .

10 - , - jQuery UI. , -, .

, 11 ( - ), - jQuery UI, -, . , , , , -, .

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

, jQuery jQuery UI. -, , .

- , . , - . , - , - .

29

- http://www.bibeault.org/jqia2 http://www.manning.com/jQueryinActionSecondEdition.

, , .

- - , -, , , , , .

- , , , , . , , XML .

. , - , - - , . , - , .

, - . - .

( - , ) http://www.manning.com/jQueryinActionSecond-Edition http://www.bibeault.org/jqia2/.

30

-- , - -, Apache HTTP Server. -. , , index.html.

8 , - jQuery UI, - - . , - Ajax, , - Apache, PHP Apache, - - Java JavaServer Pages (JSP), Tom cat. Tomcat - 8 chapter8/tomcat.pdf.

, Internet Explorer 7 8, Firefox 3, Safari 3 4 Google Chrome.

Author Online jQuery in Action , Manning Pub lications, , - . , http://www.manning.com/jQueryinAction-SecondEdition Online. - , , - .

Manning , . - ( ). , !

Author Online - .

- , Tic-Tac-Toe Control Data Cyber, - 100 . - , - , , Digital Equipment Corporation, - .

Lightbridge Inc., BMC Software, Dragon Systems , - , - . - , .

, , - ( , !), JavaRanch.com sheriff ( ). , ( ), - , Yamaha V-Star - .

(Austin), , , .

32

- . jQuery, Merb, Ruby on Rails ( Ruby).

, -, , -. - - New-YorkTimes, AllureMagazine, ArchitecturalDigest, YogaJournal . , Java, Ruby, PHP JavaScript.

VisualjQuery.com jQuery - IRC jQuery.

I. jQuery

jQuery, , , , jQuery. , , - , , jQuery UI ( ), - (http://plugins.jquery.com/) , , . ( Google jQuery plugin 4 !)

iPod Apple iPod, jQuery - jQuery.

. , - jQuery -, - . , -, jQuery, , - iPod, .

, , , - , !

1.

jQuery

:

jQuery

JavaScript

jQuery

jQuery JavaScript

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

jQuery, JavaScript -, -, - , - - . jQuery , IBM, Netflix, Amazon, Dell, Best Buy, Twitter, Bank of America . Microsoft jQuery -, Visual Studio, Nokia jQuery , - Web Runtime.

36 1. jQuery

!

, - JavaScript, jQuery - - -. JavaScript, - (Cascading Style Sheets, CSS), (eXtensible Hypertext Markup Language, XHTML) JavaScript - -.

, - jQuery -. , jQuery -.

jQuery jQuery: http://jquery.com/. jQuery - - - HTML- , , :

- jQuery, - ( http://www.manning.com/bibeault2).

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

JavaScript - . jQuery , -. , , - JavaScript, , , - , value. - , , checked value .

1.1. , 37

JavaScript:

var checkedValue;var elements = document.getElementsByTagName(input);for (var n = 0; n < elements.length; n++) { if (elements[n].type == radio && elements[n].name == someRadioGroup && elements[n].checked) { checkedValue = elements[n].value; }}

, , - jQuery:

var checkedValue = $([name=someRadioGroup]:checked).val();

, . , , , jQuery, -. , .

, name - someRadioGroup (, ), checked value . ( , - .)

jQuery - , . - .

, . , http://www.manning.com/bibeault2 ( 2 ). , - - index.html, , - .

chapter1/radio.group.html. . 1.1 -, , - jQuery, , - .

, jQuery -- . , jQuery -.

38 1. jQuery

, , -, jQuery - JavaScript .

.1.1.jQuery,,!

1.2. JavaScript, CSS, HTML- . , .

CSS - - , . , - , - .

, - HTML-. :

Click Me

, -, , , CSS, -. , - JavaScript, , ( - -

1.2. JavaScript 39

(Document Object Model, DOM), id - xyz).

, .

1.2.1. , - HTML-, ( ) - .

HTML- , . 1.2, , .

HTML

.1.2.,,,

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

40 1. jQuery

HTML- (, onclick), .

: on-click? :

Click Me

! . - .

.

1.2.2. -, , :

window.onload = function() { document.getElementById(testButton).onclick = function() { document.getElementById(xyz).style.color = red; }; };

onload - onclick -.

onload ( ) , , - -, . ( 1.3.3 -, jQuery .)

, - . , - .

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

JavaScript , - -, .

1.3. jQuery 41

, , - , , JavaScript . JavaScript - , .

, - , , , . - jQuery, .

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

, jQuery .

1.3. jQuery jQuery , HTML- - . CSS, , , , - - . jQuery , -, JavaScript.

jQuery , - JavaScript, , - .

, -, , - . jQuery , - .

, CSS , .

1.3.1. jQuery CSS - , -

42 1. jQuery

. , , HTML-.

, XML, XPath, XML. CSS, , - HTML, .

,

p a

( ), . - jQuery , CSS, , , -, CSS3.

, jQuery :

$(selector)

jQuery(selector)

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

$(p a)

$() ( jQuery()) JavaScript, DOM, - . - , .

(wrapper), . jQuery, , , , jQuery.

, CSS notLongForThisWorld. jQuery - :

$(div.notLongForThisWorld).hide();

1.3. jQuery 43

, jQuery, , (-, , ) , . , , - CSS removed. :

$(div.notLongForThisWorld).hide().addClass(removed);

(chain) jQuery -. jQuery, . , -, -. !

, - JavaScript, . :

$(#someElement).html( );

$(#someElement)[0].innerHTML = ;

ID, . - jQuery html(), DOM HTML-. jQuery - , - 0 innerHTML.

, - , , (, - jQuery):

$(div.fillMeIn) .html( );

var elements = $(div.fillMeIn);for( var i=0; i < elements.length; i++) elements[i].innerHTML = ;

jQuery - -

44 1. jQuery

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

:

$(p:even)

$(tr:nth-child(1))

$(body > div) , -

$(a[href$=pdf]) PDF

$(body > div:has(a)) ,

!

CSS, - , . - 2, - http://docs.jquery.com/Selectors.

DOM , - , DOM. , jQuery - .

1.3.2. - $() jQuery, - . - (namespace) . jQuery, - $() , , - . 6, - jQuery. , .

. , . :

1.3. jQuery 45

var trimmed = $.trim(someString);

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

var trimmed = jQuery.trim(someString);

, trim() jQuery $.

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

, jQuery, 1.3.5, , jQuery , - 1.3.6. - $().

1.3.3. JavaScript , - , - . , - DOM , . , , .

onload window, , . :

window.onload = function() { // };

, - . , onload DOM, , . -

46 1. jQuery

, , , onload.

, - , , -. - JavaScript .

, , , , HTML- DOM. - -, jQuery - DOM ( - ). ( ):

jQuery(document).ready(function() { $(div.notLongForThisWorld).hide();});

document jQuery(), ready(), - , - .

, - :

jQuery(function() { $(div.notLongForThisWorld).hide();});

jQuery() $(), - , DOM ( DOM) - , . , HTML- -, . , onload - window . , - onload ( ).

$(). -, .

1.3. jQuery 47

1.3.4. DOM , jQuery - JavaScript, $() ( jQuery()) -. , , .

$() HTML- - DOM, . , -:

$(Hi there!)

DOM ( -) . - jQuery, DOM.

1.1.

1.1.HTML

Follow me! $(function(){

q , HTML

$(Hi there!).insertAfter(#followMe); });

Follow me!

w ,

HTML- followMe w. , - , q. DOM :

$(Hi there!).insertAfter(#followMe);

. 1.3.

48 1. jQuery

.1.3.,jQuery

DOM - 3, , jQuery DOM, .

, jQuery, - .

1.3.5. jQuery- jQuery -, . -. , , , - , !

, jQuery - , , -. , jQuery -.

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

: jQuery - , . , - , , :

1.3. jQuery 49

$(form#myForm input.special).disable();

, jQuery , , $(). - , :

$.fn.disable = function() { return this.each(function() { if (this.disabled == null) this.disabled = true; });}

, - - . , . .

-, $.fn.disable , - $ disable. - DOM, , - this.

-, each() - . - 3. , each(), this DOM . , - this . , -. ( , - this JavaScript.)

, - disabled, , - true. each() () - , - disable(), jQuery. :

$(form#myForm input.special).disable().addClass(moreSpecial);

, disable() ! , , - jQuery, jQuery, .

, - jQuery , -, (plugins). jQuery 7.

50 1. jQuery

, - :

if (item) { // , }else { // , }

, - false.

, , jQuery -, $.fn.disable:

if (item == null) ...

null, undefined.

, - jQuery, http://docs.jquery.com/JQuery_Core_Style_Guidelines.

jQuery, - , jQuery -, Prototype, , , $. .

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

jQuery - -, jQuery .

1.4. 51

- -, -, , , . jQuery $ , . - , 1.3.2, - jQuery .

, - - jQuery, $. JavaScript, Prototype, - $ . $ -, .

jQuery - , noConflict(). , ,

jQuery.noConflict();

$ - , jQuery.

7.

1.4. jQuery - , - - - jQuery.

jQuery , - Java-Script, - JavaScript. , CSS , .

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

52 1. jQuery

, jQuery() :

DOM,

-

DOM HTML

, , - DOM

jQuery -, - , - $ , , , -, - , Prototype, - $ . ?

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

2.

:

, jQuery,

HTML DOM

-

- $() jQuery. DOM , , DOM - .

DOM , $(): DOM - DOM.

, - -, DOM, . , . - , jQuery , .

54 2.

2.1. , jQuery ( jQuery), . , , - , : - . - , : , - CSS listElement, .

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

:

, - Selectors Lab ( chapter2/lab.selectors.html).

jQuery - ( !), DOM -. , . 2.1 ( , , ).

, , . - http://www.manning.com/bibeault2, - .

Selector (), , . - Apply (-). li Apply ().

( li) HTML-, DOM Sample (- DOM), .

2.1. 55

jQuery . Apply () , . 2.2, .

: -, - jQuery .

HTML- , DOM Sample ( DOM), DOM Sample Code ( DOM), , .

.2.1.SelectorsLab

. - , .

56 2.

2.1.1. , $() , - . HTML $() . , .

, jQuery . context, . ( HTML ), - , DOM.

.2.2.li,

jQuery

,

2.1. 57

, . - DOM. , , .

Selectors Lab - . , , - DOM , DOM Sample ( DOM).

DOM, , - jQuery, DOM. (, , $() , , .)

- , - . , - DOM.

. , - selector. , , DOM, - id, - sampleDOM.

jQuery :

$(selector)

DOM, , - . , . DOM , id sampleDOM,

$(selector,div#sampleDOM)

DOM.

, , -, , - CSS.

58 2.

2.1.2. CSS - - , . - ( id), CSS, DOM.

. 2.1 , - . -, .

jQuery, - CSS. jQuery, $(), :

$(p a.specialClass)

, jQuery - CSS3, jQuery , - , . -, jQuery CSS , - . CSS, jQuery - , World Wide Web Consortium (W3C).

, jQuery - . , - :

$(div,span)

2.1.

a - ()

specialID specialID id

.specialClass CSS specialClass

a#specialID.specialClass specialID specialClass

p a.specialClass specialClass,

2.1. 59

CSS Selectors Lab, .

, . - jQuery - .

2.1.3. ,

jQuery - (CSS), Mozilla Fire-fox, Internet Explorer 7 8, Safari, Chrome . - , , DOM , , - .

-. , , , . HTML Selectors Lab:

jQuery supports CSS1 CSS2 CSS3 Basic XPath jQuery also supports Custom selectors Form selectors

, jQuery, - CSS. - - ul.myList li a. , , .

60 2.

.2.3.ul.myListlia

Selectors Lab ul.myList li a - Apply. , . 2.3.

-, (>):

p > a

, . , -, , , .

, :

ul.myList > li > a

, - , , , - myList. , , , - myList (. 2.4).

-. , -

2.1. 61

, . Selectors Lab, :

jQuery supports CSS1 CSS2 CSS3 Basic XPath

- http:// href. -, href http://:

a[href^=http://]

, href - http://. (^ ) , -. , . - .

.2.4.ul.myList>li>a

62 2.

Selectors Lab, HTML--, a[href^=http://] Apply. : jQuery.

. -

form[method]

, method.

-

input[type=text]

text.

, , . :

div[title^=my]

title, my.

, - ? :

a[href$=.pdf]

, PDF.

, , - -:

a[href*=jquery.com]

, - , jQuery.

. 2.2 CSS, jQuery.

, -, .

2.1. 63

2.2.CSS,jQuery

*

E E

E F F, - E

E>F F, - E

E+F F, - E

E~F F, E

E.C E C. E *.C

E#I E (id) I. E *.I

E[A] E A,

E[A=V] E A, - V

E[A^=V] E A, V

E[A$=V] E A, V

E[A*=V] E A, V

, , Selectors Lab - . 2.2. , , , Hello Goodbye (: -).

64 2.

2.1.4. . , , , . jQuery - , .

:

a:first

.

, ?

p:odd

. :

p:even

ul li:last-child

. .

, - CSS, jQuery, . CSS , jQuery , - - . - , (:). , - , *.

. 2.3 ( jQuery - ).

2.3.,jQuery:DOM

:first . li a:first - , - .

2.1. 65

:last . li a:last , - .

:first-child . li:first-child .

:last-child . li:last-child .

:only-child , - .

:nth-child(n) n- . li:nth-child(2) .

:nth-child(even|odd) (even) (odd) . li:nth-child(even) .

:nth-child(Xn+Y) n- , - . Y 0, . li:nth-child(3n) , li:nth-child(5n+1) , - .

:even . li:even .

:odd . li:odd - .

:eq(n) n-

:gt(n) , n- ( ).

:lt(n) , n- ( ).

. :nth-child - 1 ( CSS), - 0 ( -). , , .

.

DOM - , :

66 2.

Language Type Invented Java Static 1995 Ruby Dynamic 1993 Smalltalk Dynamic 1972 C++ Static 1983

, , . - ,

table#languages td:first-child

:

table#languages td:nth-child(1)

.

, -, :nth-child(2), :nth-child(3) :last-child. ( - 1983), td:last. , td:eq(2) 1995, td:nth-child(2) , -

2.1. 67

. , :eq 0, :nth-child 1.

, Selectors Lab . 1972 . - :nth-child - .

CSS, , - , jQuery .

2.1.5. CSS jQuery CSS - DOM, - , - .

, (checkboxes), . - :

$(input[type=checkbox][checked])

- , HTML-, , . CSS :checked, . , input , input:checked - .

jQuery - , CSS, -. , :checkbox -. - ; :radio:checked :checkbox:checked.

, jQuery - CSS, . - . 2.4.

68 2.

2.4.CSS-jQuery

CSS?

:animated , - . . 5.

:button (input[type=submit], input[type=reset], input[type=button] button).

:checkbox - (input[type=checkbox]).

:checked .

:contains(foo) , foo.

:disabled , - ( CSS).

:enabled , - .

:file file (input[type=file]).

:has(selector) , -, .

:header , -, .

:hidden

:image (input[type=image]).

:input (input, select, text-area, button).

:not(selector) selector.

:parent , - () ( ), .

:password (input[type=password]).

:radio (input[type=radio]).

:reset (input[type=reset] button[type=reset]).

:selected , .

:submit (button[type=submit] input[type=submit]).

:text (input[type=text]).

:visible

2.1. 69

jQuery - - . - . , - :

:checkbox:checked:enabled

Selectors Lab, , .

, ?

:not , , , , :not.

, ( ) - :

input:not(:checkbox)

! - !

, , , , src dog. - :

$(:not(img[src*=dog]))

, , , - -, src - dog, DOM, -!

, , , *, , , - dog src, , -, - dog src, , - :

$(img:not([src*=dog]))

70 2.

, - , , :not.

jQuery , - , - .

, jQuery 1.2, , , :not() :has(), . , -. jQuery 1.3.

:has , CSS , - . ,

div span

, .

, , - ?

:has().

div:has(span)

, .

, - . , , , src. :

$(tr:has(img[src$=puppy.png]))

, - - .

, , jQuery - .

2.2. HTML 71

, jQuery , , , jQuery, 3. , , $() HTML .

2.2. HTML HTML -. , - , , .

jQuery , - 1. $() - HTML. :

$(Hello)

, . jQuery, . , -, , , Ajax ( -), , .

: - :

$()

$() $(), HTML - , .

HTML , - jQuery . -, , jQuery. , - css(), attr(). jQuery - .

$() , - . JavaScript, , .

72 2.

, - , - ! - 2.1.

2.1.

$(, q { src: images/little.bear.png,

w

alt: Little Bear, title:I woof in your general direction, click: function(){

e

alert($(this).attr(title)); } }) .css({ r cursor: pointer, border: 1px solid black, padding: 12px 12px 20px 12px, backgroundColor: white }) .appendTo(body);

t

jQuery, 2.1, - q, , - , - w, , r, DOM t.

, . - , ( ) e.

, ( - 4), - jQuery, - . , , , , - ( - ): val, css, html, text, data, width, height offset.

2.1 css(), - :

css: { cursor: pointer, border: 1px solid black, padding: 12px 12px 20px 12px, backgroundColor: white}

2.2. HTML 73

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

. 2.5 , , -. , (2.5a), (2.5b).

.2.5a.,,,

.2.5b.,

74 2.

HTML, , chapter2/listing-2.1.html.

, jQuery, . -, - .

2.3.

, DOM HTML- ( ), - jQuery. - . , ? , , jQuery? , , - .

:

, - jQuery Operations Lab, - chapter2/lab.operations.html. (. 2.6) Selectors Lab, .

Selectors Lab, . jQuery -. DOM Sample (- DOM), , Selectors Lab, - .

jQuery Operations Lab -, Selectors Lab. , jQuery Operations Lab -, -. jQuery , , - jQuery.

2.3. 75

, -, , . - JavaScript.

.2.6.jQueryOperationsLab,

, , , Operation ():

$(img).hide()

Execute ().

76 2.

DOM Sample, , -. - DOM Sample , Restore ().

, . , jQuery, .

2.3.1.

, jQuery . - length, JavaScript, - .

- , , - jQuery size(), .

:

$(#someDiv) .html(There are +$(a).size()+ link(s) on this page.);

jQuery - size(). , html() ( ) - (id) someDiv.

size():

size

size()

2.3. 77

, , . ?

2.3.2. , , - - jQuery. -, hide(). - , - JavaScript.

, - jQuery.

jQuery JavaScript, , - . , alt :

var imgElement = $(img[alt])[0]

- , jQuery get().

get

get(index)

. index , JavaScript. index , - .

index () . , .

DOM DOM.

var imgElement = $(img[alt]).get(0)

, - .

get() . -

78 2.

. , .get(-1) - , .get(-2) .

, get() .

JavaScript , toArray() ( - ); get() .

jQuery.

get() DOM, - , , . , -, , , :

$($(p).get(23))

jQuery eq(), - :eq.

eq

eq(index)

- , .

index () . get(), -.

, .

- , , , first().

first

first()

- , . - , .

2.3. 79

, .

, , .

last

last()

- , . - , .

, .

.

- JavaScript DOM, toArray(), jQuery:

toArray

toArray()

, , DOM.

JavaScript DOM.

80 2.

:

var allLabeledButtons = $(label+button).toArray();

, - , JavaScript, allLabeledButtons.

, index(), - . index() :

index

index(element)

- . -, -1.

element ( | ) , - , , . , .

-1, .

, - findMe . :

var n = $(img).index($(img#findMe)[0]);

:

var n = $(img).index(img#findMe);

index() - ( ). ,

var n = $(img).index();

2.3. 81

n - .

, , .

2.3.3. - , - . jQuery . .

, - . , - . - jQuery , .

, . , , alt title. jQuery :

$(img[alt],img[title])

add(), - :

$(img[alt]).add(img[title])

add() - , , - .

, , add() ( ), jQuery - , . , - , end() ( 2.3.6), , .

add() :

82 2.

add

add(expression,context)

, , - expression. expression -, HTML-, DOM - DOM.

expression ( | | ) , - . jQuery, - . HTML-, - . DOM DOM, .

context ( | | | ) , , . , jQuery(). 2.1.1.

, .

jQuery Operations Lab - :

$(img[alt]).add(img[title])

Execute (). jQuery, alt title.

HTML- - DOM Sample, , alt, title, , -. , , , - , - . . 2.7 .

2.3. 83

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

.2.7.,jQueryalttitle

- add(). , alt, alt title. - (,) CSS, -

84 2.

. - , - jQuery, , :

$(img[alt]) .addClass(thickBorder) .add(img[title]) .addClass(seeThrough)

- alt, CSS, - , title - CSS, .

jQuery Operations Lab ( ) , . 2.8.

.2.8.jQuery,

, - ( alt) , , (- , alt, title), opacity.

add() , . add() , - . , someElement ; - , alt :

$(img[alt]).add(someElement)

, add() - , ,

2.3. 85

HTML-. -:

$(p).add(Hi there!)

-, . : - , , DOM, . -, , DOM appendTo() jQuery ( , ).

add() . jQuery, - .

, jQuery -, add(). not() - . :not, , add() jQuery.

, -, title, , - puppy. , ( -, img[title]:not([title*=puppy]), , - :not. not(), , - , -. :

$(img[title]).not([title*=puppy])

jQuery Operations Lab - . , - . , - - title, not(), title puppy.

86 2.

not

not(expression)

, expression.

expression ( | | | ) , . , - . - , .

, ( this - ), true - .

, -, .

not() - , . , - , , .

, not() - , , , . :

$(img).not(function(){ return !$(this).hasClass(keepMe); })

- , keepMe.

-, .

, , - not(), , , . filter(), not(), - , , - false.

2.3. 87

, - , . jQuery . filter():

$(td).filter(function(){return this.innerHTML.match(/^\d+$/)})

jQuery , - filter(), this. , - ( ), false, . , false, .

filter

filter(expression)

, , expression.

expression ( | | | ) , . , - .

- , , .

, ( this ), - false .

, -, .

jQuery Operations Lab, - . , Invented ( ).

88 2.

filter() . - not(), , . , , - jQuery. :

$(img) .addClass(seeThrough) .filter([title*=dog]) .addClass(thickBorder)

, seeThrough, , - title dog, - thickBorder. -, .

not() filter() - , . . , .

. jQuery slice(). - .

slice

slice(begin, end)

, - .

begin () ( ) , .

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

2.3. 89

.

slice() - -, - .

, :

$(*).slice(2,3);

, .

: $(*).get(2), , , - .

, :

$(*).slice(0,4);

- .

:

$(*).slice(4);

-, .

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

has

has(test)

, , - , test.

90 2.

test ( | ) , , , . - , -, .

.

, :

$(div).has(img[alt])

, , , alt.

. , id , , , . map().

map

map(callback)

callback jQuery.

callback () , . - : ( ) . , - ( this).

.

, id JavaScript:

var allIds = $(div).map(function(){ return (this.id==undefined) ? null : this.id;}).get();

2.3. 91

- null, .

map() , - , - . each().

each

each(iterator)

- iterator .

iterator () , - . -: ( ) . , ( this).

.

, , , :

$(img).each(function(n){ this.alt=This is image[+n+] with an id of +this.id;});

, alt, , - id.

, each() - JavaScript ( - ). :

$([1,2,3]).each(function(){ alert(this); });

iterator -, $(), iterator this.

! jQuery - DOM. , .

92 2.

2.3.4.

jQuery - DOM.

, , . 2.5. , - . - .

. 2.5, contents() offsetParent(), - , , .

2.5.DOM

children([selector]) , - .

closest([selector]) , - , - .

contents() - , . ( , - .)

next([selector]) , - , DOM .

nextAll([selector]) , - , DOM -DOM - - .

nextUntil([selector]) , - , DOM - , ( ), . - , .

offsetParent() , - , - .

2.3. 93

parent([selector]) , - .

parents([selector]) , - -. , , .

parentsUntil([selector]) , - , ( ), - . , - .

prev([selector]) , - , DOM .

prevAll([selector]) , - , DOM .

prevUntil([selector]) , - , DOM - , ( ), . - , .

siblings([selector]) , - , .

, ( - 4), this. , , . - closest():

$(this).closest(div)

; , DOM? . -

94 2.

, closest(), - :

$(this).closest(div.myButtonContainer)

myButtonCon-tainer.

, . 2.5, -. , , , - title:

$(this).siblings(button[title=Close])

DOM . . , jQuery - .

2.3.5.

, , , jQuery , - .

find() , , , -, . , wrappedSet, ( ) , :

wrappedSet.find(p cite)

jQuery -, find() .

find

find(selector)

, , - , - .

selector () jQuery, .

2.3. 95

.

, jQuery , - .

, , , -, . is() - true, , false . :

var hasImage = $(*).is(img);

hasImage true, .

is

is(selector)

, , .

selector () , .

true , false .

, , .

2.3.6. jQuery jQuery , ( , - ). - , -, -

96 2.

.

, , -, . , clone() ( 3) , - . - , jQuery .

:

$(img).filter([title]).hide();

: - , , - title. (, -, -. , , filter().)

, , -, - , ? , - -, title, - .

jQuery end(). jQuery , .

:

$(img).filter([title]).hide().end().addClass(anImage);

filter() -- , end() - ( ), - addClass(). end() addClass() .

, - , jQuery . end() ( ) - , .

2.3. 97

end

end()

jQuery .

.

jQuery, -, andSelf(). .

andSelf

andSelf()

.

.

, :

$(div) .addClass(a) .find(img) .addClass(b) .andSelf() .addClass(c);

, a, - , , - , b, - , , c.

-! a c, - b c.

98 2.

, jQuery , - .

2.4. - ( -) , - jQuery HTML.

jQuery - , CSS, . CSS3, - .

jQuery - , HTML-. - , -, - .

jQuery , , - . - .

jQuery , - .

, - DOM . , , -, jQuery.

3. jQuery

:

DOM

DOM , -

( , ), - - , , , , - GIF- , , , , , ( , - , )?

. - - HTML (Dynamic HTML, DHTML) , .

, , HTML, -

100 3. jQuery

, DOM - ( -) .

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

, - jQuery DOM, - ! - . DOM , jQuery, , , -.

3.1.

DOM, , , . , - DOM - HTML-, .

.

JavaScript, . JavaScript JavaScript . ( JavaScript, .)

JavaScript - DOM. , DOM.

HTML- - :

img, id, src, alt, class title , . , -

3.1. 101

JavaScript, DOM. , attributes DOM. - , , .

attri-butes, .

. 3.1 .

HTML

img

id:'myImage'

src:'http://localhost/image.gif'

alt:'An image'

className:'someClass'

title:'This is an image'

attributes

...

NodeList

id='myImage'

src='image.gif'

alt='An image'

class='someClass'

title='This is an image'

...

.3.1.HTML-DOM,,..

attributes - . . . , - src image.gif , src URL .

102 3. jQuery

JavaScript , -. , class - className.

jQuery , - , , . - , , .

-.

3.1.1. jQuery - . - JavaScript. , .

, , . , jQuery - .

:

, : $(whatever)[n]

get(), -, toArray(),

each() map(), -

eq() :eq()

, - ( not() filter())

each(). id, - DOM, :

$(*).each(function(n){ this.id = this.tagName + n;});

(this) id.

3.1. 103

, JavaScript, jQuery . , .

3.1.2. jQuery, attr() - , . jQuery, , .

attr(), , - - - .

attr() :

attr

attr(name)

- .

name () , .

. - -, undefined.

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

, , , - data-custom1. , , :

$(#myImage).attr(data-custom)

1 Custom , , . ..

104 3. jQuery

HTML HTML 4 , data-custom, , , - . , - .

HTML 5, , , , - data-. , , - HTML 5. , -, - . ( HTML 5, - W3C: http://www.w3.org/TR/html5/dom.html#attr-data.)

HTML 5 data-.

HTML -. , title -, ( -, ) Title, TITLE, TiTlE . XHTML, , .

: , - ( )?

, attr() JavaScript getAttribute() setAttribute(). - jQuery , - - .

. 3.1.

3.1.attr()

cellspacing cellSpacing

class className

colspan colSpan

3.1. 105

cssFloat styleFloat IE, cssFloat

float styleFloat IE, cssFloat

for htmlFor

frameborder frameorder

maxlength maxLength

readonly readOnly

rowspan rowSpan

styleFloat styleFloat IE, cssFloat

tabindex tabIndex

usemap useMap

attr(), - , -. .

3.1.3. jQuery - . , - - . :

attr

attr(name,value)

value name - .

name () , -.

value ( | ) . JavaScript, - . . . , -, .

.

106 3. jQuery

attr() , - .

, - value JavaScript, - ( ), .

, value . - , . -: ( ), . , ( this) , - , .

:

$(*).attr(title,function(index,previousValue) { return previousValue + I am element + index + and my name is + (this.id || unset);});

title , , - DOM id , .

, - - .

attr() , .

attr

attr(attributes)

, -, .

attributes () , .

.

3.1. 107

- . - , -, . :

$(input).attr( { value: , title: Please enter a value });

value Please enter a value title.

, - , - value, , -, , - .

Internet Explorer name type - . name type Internet Explorer, - , . value file password.

, . , ?

3.1.4. DOM jQuery - removeAttr(), :

removeAttr

removeAttr(name)

, name, .

name () .

.

, - JavaScript- DOM, - . , readonly ,

108 3. jQuery

readOnly true false, .

- .

3.1.5. , - .

1: , , , , . - , target, :

Some External Site

, , , , ? (Content Management System, CMS) wiki, - , target=_blank ? , . , , href - http://, ( target _blank).

:

$(a[href^=http://]).attr(target,_blank);

, href - http:// ( , -). target _blank. - jQuery!

2: jQuery - -, (Dreaded Double Submit Problem). - : - , , .

( - , , - ), -

3.1. 109

submit . (-, ) , . - ( 4 ), - attr():

$(form).submit(function() { $(:submit,this).attr(disabled, disabled);});

:submit disabled disabled ( W3C ). : - this ( ). 4 , - this , .

enabled , ?

, disabled en-abled, :

$(whatever).attr(disabled,enabled);

. - . -. -. - - !

W3C disabled, . - , , disabled, .

, , , jQuery. true false ( true false), jQuery : false - , true .

- . -

110 3. jQuery

-. , - - - .

, HTML W3C, , , . , - jQuery.

3.1.6. : .

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

JavaScript , - .

, - . , - , JavaScript. . , DOM JavaScript, , - , . !

, , , , . , , . -, DOM , . -, , -.

3.1. 111

jQuery , - DOM, -, . JavaScript, -, DOM , - data(). :

data

data(name,value)

value , jQuery, .

name () , .

value ( | ) , . , , ( this). , -, .

.

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

data

data(name)

name, .

name () , .

undefined, .

112 3. jQuery

, - jQuery removeData(), , :

removeData

removeData(name)

name .

name () .

.

, DOM jQuery. jQuery .

DOM - , , - , -, , - . DOM .

, , className, -, , - jQuery. , className attr().

3.2. , . CSS, - , - DOM, .

, jQuery .

3.2. 113

3.2.1. class DOM . , .

, , , . HTML - , , - class. :

, DOM className , , - . ! , , , , , .

, .

, , , , - . -, jQuery .

addClass():

addClass

addClass(names)

( ) .

names ( | ) , -, , , , . - ,

114 3. jQuery

- , : - class. - ( ).

.

removeClass():

removeClass

removeClass(names)

( ) .

names ( | ) , -, , , , . - , , - , : - class. - ( ), .

.

-, , - , . toggleClass() jQuery.

toggleClass

toggleClass(names)

, , - , . -, , - , .

3.2. 115

names ( | ) , . - , -, . - ( ).

.

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

. chapter3/zebra.stripes.html . :

function swapThem() { $(tr).toggleClass(striped);}

toggleClass(), striped . , - :

$(function(){/ $(table tr:nth-child(even)).addClass(striped); $(table).mouseover(swapThem).mouseout(swapThem);});

striped , nth-child, . - mouseover mouseout, swapThem. , , :

$(tr).toggleClass(striped);

, - , striped

116 3. jQuery

, , , . ( ) . 3.2.

.3.2.striped,

, - - . jQuery toggleClass(), , - :

toggleClass

toggleClass(names,switch)

, switch true, , switch false.

names ( | ) , , . ,

3.2. 117

- , : - class. ( ).

switch ( ) , -, CSS (true) (false).

.

, - . , - - .

jQuery hasClass().

$(p:first).hasClass(surpriseMe)

true, - .

hasClass

hasClass(name)

, .

name () .

true, , false .

, is(), 2:

$(p:first).is(.surpriseMe)

hasClass() -, , .

, , . , :

118 3. jQuery

$(p:first).attr(className).split( );

, attr() undefined, - , - , .

, - jQuery:

$.fn.getClassNames = function() { var name = this.attr(className); if (name != null) { return name.split( ); } else { return []; }};

jQuery 7. , - getClassNames() , , . !

CSS , , . , jQuery - .

3.2.2. , , , - . , - - .

css() attr(), - CSS . - , .

css

css(name,value)

CSS- name value .

3.2. 119

name () CSS-, -.

value ( | | ) , , - . , . this, : CSS. - CSS-.

.

, - , attr(). , , , - 20 , :

$(div.expandable).css(width,function(index, currentWidth) { return currentWidth + 20;});

- : opacity, - , 0,0 1,0 - IE, -moz-opacity !

css(), attr().

css

css(properties)

CSS-, - , - .

properties () , CSS- .

.

, - 2.1, -

120 3. jQuery

. , :

$(, { src: images/little.bear.png, alt: Little Bear, title:I woof in your general direction, click: function(){ alert($(this).attr(title)); }}).css({ cursor: pointer, border: 1px solid black, padding: 12px 12px 20px 12px, backgroundColor: white})...

attr(), - CSS- , properties. , , - .

, css() , , . , , - , - CSS. , opacity, , 0,0 1,0.

css

css(name)

CSS-, name, .

name () CSS-, .

.

3.2. 121

, css() , , - , .

CSS-, , jQuery , - .

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

, ( ) - width() height(). :

width height

width(value)

height(value)

.

value ( | | ) . - ; , (, px, em %). , px.

, , this. - .

.

, css(),

$(div.myElements).width(500)

$(div.myElements).css(width,500)

122 3. jQuery

:

width height

width()

height()

.

.

, , . - style.width style.height, , - style - , . - !

, width() height() . , - , - , , , -, .

. . 3.3 - : , ( ), .

- , . , , . - .

, - width() height() ( testSubject) ( display).

3.2. 123

function displayDimensions() { $(#display).html( $(#testSubject).width()+x+$(#testSubject).height() );

, 589 60, , . 3.3.

- , - , . 3.3.

.3.3.

- .

3.1. chapter3/dimensions.html.

3.1.

124 3. jQuery

Dynamic Dimensions Example body { background-color: #eeeeee; } #testSubject { background-color: #ffffcc; border: 2px ridge maroon; padding: 8px; font-size: .85em; } $(function(){

$(window).resize(displayDimensions); displayDimensions();

});

function displayDimensions() { $(#display).html( $(#testSubject).width()+x+$(#testSubject).height() ); }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eget enim id neque aliquet porttitor. Suspendisse nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum sed neque vehicula rhoncus. Nam faucibus pharetra nisi. Integer at metus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis eros at metus pretium elementum.

width() height() jQuery , . 3.2.

, - width() height().

3.2. 125

3.2.

innerHeight() -. , .

innerWidth() . , - .

outerHeight(margin) -. -. margin true , , .

outerWidth(margin) -. . margin true , , .

. jQuery - () - .

jQuery , - . JavaScript, - : top left, , , - , -.

, . , offset(), - :

offset

offset()

( ) - .

126 3. jQuery

JavaScript left top, ( ), .

, position(), - :

position

position()

( ) - .

JavaScript left top, , - .

, , , .

, offset() position(), - , - , .

jQuery , -. . 3.3.

3.3.jQuery

scrollLeft() - .

scrollLeft(value) .

scrollTop() - .

3.3. 127

scrollTop(value) - .

, . 3.3, , .

, - , - .

3.3. , , : DOM API HTML-.

DOM API , - , . - HTML- , jQuery -, .

3.3.1. HTML- html(). HTML-, , jQuery, .

, HTML-:

html

html()

HTML-.

HTML. innerHTML .

128 3. jQuery

HTML- :

html

html(content)

HTML- - .

content ( | ) HTML-, . - , - . this, : . .

.

, - . text() - . , HTML:

One Two Three Four

var text = $(#theList).text();

text OneTwoThreeFour.

text

text()

.

3.3. 129

.

text() . :

text

text(content)

content . content (< >), HTML-.

content ( | ) . HTML-. -, -. , this, : . - .

.

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

3.3.2. DOM - -. , - jQuery DOM . DOM , .

130 3. jQuery

- append().

append

append(content)

HTML content - .

content ( | | | ) , , , , . , . this, : . , - .

.

, HTML, DOM - .

:

$(p).append(some text);

HTML, , .

: - DOM:

$(p.appendToMe).append($(a.appendMe))

appendMe appendToMe. - , - , . - .

, -

3.3. 131

. - , --.

DOM:

$(p.appendToMe).append(someElement);

- - , . - .

prepend().

prepend

prepend(content)

HTML content .

content ( | | | ) , , , , . , . this, : . - , - .

.

. jQuery DOM, -, - .

, , , - before() after(). .

132 3. jQuery

before

before(content)

HTML content DOM, , . DOM.

content ( | | | ) , , , , - DOM . , this. .

.

after

after(content)

HTML content DOM, , . DOM.

content ( | | | ) , , , , - DOM . , - this. - .

.

: /

- DOM , - Move and Copy Lab Page,

3.3. 133

, . chapter3/move.and.copy.lab.html, . 3.4.

, - . , .

.3.4.MoveandCopyLabPage,DOM

/ - . : append ( ), prepend ( -), before () after (). ( Clone () .)

134 3. jQuery

Execute () - . Execute () Restore (), , - .

.

Target 2 ( 2). append ( ), - Execute (). - . 3.5.

.3.5.appendCozmoTarget2

3.3. 135

Move and Copy Lab Page , , .

-, . , - ( ) - . , jQuery , , , , - . appendTo(), prependTo(), insertBefore() insertAfter(), - :

appendTo

appendTo(targets)

, targets.

targets ( | ) , jQuery, DOM. - .

.

prependTo

prependTo(targets)

, targets.


136 3. jQuery

.

insertBefore

insertBefore(targets)

-, targets.


.

insertAfter

insertAfter(targets)

, targets.


.

, -.

, - HTML - $()? - appendTo(), prependTo(), insertBefore() insertAfter(). :

$(Hi there!).insertAfter(p img);

-, -. 2.1, .

3.3. 137

, , . , jQuery .

3.3.3. DOM, , ( -) . , . - jQuery wrap(), :

wrap

wrap(wrapper)

HTML .

wrapper ( | ) -, - , , .

.

surprise hello :

$(a.surprise).wrap()

- , :

$(a.surprise).wrap($(div:first)[0]);

, wrap() . wrapAll():

wrapAll

wrapAll(wrapper)

- HTML .

138 3. jQuery

wrapper ( | ) -, - , , .

.

, . wrapInner():

wrapInner

wrapInner(wrapper)

, , HTML -.

wrapper ( | ) -, , , .

.

, unwrap() - :

unwrap

unwrap()

, . -, , DOM.

.

3.3. 139

, , , , .

3.3.4. , DOM , , .

re-move(). :

remove

remove(selector)

DOM .

selector () , -, .

.

: jQuery, . , DOM, - ( -) , jQuery, appendTo(), prependTo(), insertBefore(), insert-After() .

, remove() , - . detach(), - DOM, -, .

detach

detach(selector)

DOM , - , .

selector () , -, .

140 3. jQuery

.

detach() DOM , DOM , .

DOM empty(). :

empty

empty()

DOM .

.

, .

3.3.5. DOM - - DOM. jQuery clone().

clone

clone(copyHandlers)

- . , . copyHandlers .

copyHandlers ( ) true, -. false, .

3.3. 141

.

- clone() , . - jQuery, - DOM. :

$(img).clone().appendTo(fieldset.photo);

- - photo.

:

$(ul).clone().insertBefore(#here);

, - , ( , ).

:

$(ul).clone().insertBefore(#here).end().hide();

, -, end(), - ( ), - hide(). , .

, , Move and Copy Lab Page. Execute () , - - DOM. yes (), .

142 3. jQuery

, - , , -, -.

, . - , - , . ? !

3.3.6. , - , - , replaceWith().

replaceWith

replaceWith(content)

.

content ( | | ) , - HTML, -, , . , this. - -.

, .

, - , alt, , alt -. - each() replace-With(), :

$(img[alt]).each(function(){ $(this).replaceWith(+ $(this).attr(alt) +)});

3.3. 143

each() , , replaceWith() .

replaceWith() , , DOM, , . - , , - DOM.

replaceWith() , - DOM - . , , .

- , - . , append() appendTo(), , .

replaceWith() - replaceAll(), - , .

replaceAll

replaceAll(selector)

, selector, - , .

selector () , , .

, .

144 3. jQuery

replaceWith() replaceAll() . -, . . , , .

DOM, - .

3.4. , jQuery - , :

C

, Form Plugin jQuery Core Team, - . - http://jquery.malsup.com/form/.

? , - name value, - . - , , -, (unsuccessful), W3C . , - , .

, - : . val() value . :

3.4. 145

valval()

value . , - .

.

, , , - . - , , (- undefined , , ). , - (checkboxes) (radiobuttons); value - , .

jQuery val(). ( ) radioGroup :

$([name=radioGroup]:checked).val()

- ( undefined, ). - , , , ?

val() , , . :

var checkboxValues = $([name=checkboxGroup]:checked).map( function(){ return $(this).val(); }).toArray();

val() , , - , - serialize() serializeArray() (- 8), Form Plugin.

146 3. jQuery

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

, , . val(), . - :

valval(value)

value - .

value ( | ) , - value -. , - , , : - value. - .

.

val(), . - val() :

valval(values)

, , , , values.

3.5. 147

values () , .

.

:

$(input,select).val([one,two,three]);

, one, two three, - , - .

val() .

3.5. . , , , - , .

, . , , - . , - , , , .

, - , , .

4. ,

:

jQuery

jQuery - DOM

Event

-

-

, Money makes the world go around ( ). - , !

, , , - HTML, ( , HTTP, , ). , - , Java Swing, X11, .NET Framework - - HTML JavaScript, :

149

1. .

2. , - .

3. .

4. . 2.

; . -- - (HTML CSS). , .

, - (listeners), , . ( ), (, , , iPhone). - , - .

HTML - , ( ), - , .

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

, .

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

150 4. ,

. , JavaScript. - jQuery JavaScript.

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

JavaScript, Object Function , (closures), . - , -, .

4.1. Netscape Communications Netscape Navigator , -, , .

-. , Netscape (Netscape Event Model), - (Basic Event Model), (Browser Event Model). DOM0 (DOMLevel0EventModel).

DOM (DOM Level) W3C DOM Specification. DOM , DOM 1 (DOM Level 1).

W3C DOM 2 (DOM Level 2) 2000 . , - , Firefox, Camino ( , Mozilla), Safari Opera. Internet Explorer

4.1. 151

, DOM 2 (DOM Level 2 Event Model) - .

, jQuery -,

Education

Podrobnoe rukovodstvo po_prodvinutomu_java_script