|
|
1 | (16) |
|
1.1 What Is This Book About? |
|
|
2 | (3) |
|
1.1.1 What You Can Learn from This Book |
|
|
4 | (1) |
|
|
5 | (1) |
|
1.3 Who Is the Target Audience for This Book? |
|
|
6 | (1) |
|
|
6 | (10) |
|
1.4.1 Hardware and Operating System |
|
|
6 | (1) |
|
1.4.2 jQuery and jQuery UI |
|
|
7 | (2) |
|
|
9 | (1) |
|
1.4.4 Different Operating Systems and Virtual Machines for Testing |
|
|
10 | (1) |
|
1.4.5 The Web Server for Realistic Testing |
|
|
11 | (2) |
|
1.4.6 The Development Tools |
|
|
13 | (3) |
|
|
16 | (1) |
|
2 First Examples with jQuery |
|
|
17 | (14) |
|
2.1 Accessing Elements and Protecting the DOM |
|
|
17 | (5) |
|
2.2 Editing the Web Page with DHTML a la jQuery |
|
|
22 | (3) |
|
2.3 Animatedly Reducing and Enlarging of an Element |
|
|
25 | (3) |
|
2.4 Changing Attributes Dynamically |
|
|
28 | (3) |
|
|
31 | (20) |
|
3.1 The Web, Web 2.0, and the Client/Server Principle on the Internet |
|
|
32 | (1) |
|
3.1.1 Programming on the Web |
|
|
32 | (1) |
|
|
33 | (1) |
|
3.2 JavaScript and Its Relationship to jQuery |
|
|
33 | (4) |
|
3.2.1 The General Integration of JavaScript in Websites |
|
|
34 | (3) |
|
3.3 AJAX and XMLHttpRequest (XHR) |
|
|
37 | (1) |
|
|
38 | (3) |
|
|
41 | (2) |
|
More Details on Processing JSON for JavaScript Pros |
|
|
43 | (3) |
|
|
46 | (2) |
|
3.5 Style Sheets and DHTML |
|
|
48 | (3) |
|
3.5.1 CSS: The Web's Standard Language |
|
|
48 | (2) |
|
3.5.2 The Specific Syntax of CSS Declarations |
|
|
50 | (1) |
|
|
50 | (1) |
|
|
51 | (32) |
|
4.1 Accessing Elements of the Web Page |
|
|
52 | (2) |
|
4.2 The jQuery Namespace and the jQuery Object |
|
|
54 | (1) |
|
4.3 Special Data Types and Structures in jQuery |
|
|
55 | (2) |
|
|
55 | (1) |
|
|
56 | (1) |
|
4.3.3 The Array<Type> Notation |
|
|
56 | (1) |
|
|
57 | (1) |
|
4.4 The Function jQuery() and the Alias $() |
|
|
57 | (3) |
|
|
59 | (1) |
|
4.5 Executing Functions After DOM Has Been Built |
|
|
60 | (6) |
|
4.5.1 Callback or Anonymous Function as a Parameter of jQuery() |
|
|
60 | (3) |
|
4.5.2 Placing document.ready() into an External JavaScript File |
|
|
63 | (1) |
|
4.5.3 Example of Creating a Basic Structure for a Modularized jQuery Web Application |
|
|
63 | (3) |
|
4.6 Creating an Element with jQuery() and Inserting It into the Web Page |
|
|
66 | (4) |
|
4.6.1 Options for Initializing Attributes |
|
|
68 | (2) |
|
4.7 Wrapping Existing Elements with jQuery() |
|
|
70 | (2) |
|
4.7.1 Direct Access to DOM elements via get() |
|
|
71 | (1) |
|
4.8 Using jQuery in Combination with Other Frameworks |
|
|
72 | (2) |
|
4.8.1 The Function noConflict() |
|
|
73 | (1) |
|
|
74 | (3) |
|
4.9.1 context, selector, and nodeName |
|
|
75 | (2) |
|
4.10 Chaining jQuery Objects |
|
|
77 | (1) |
|
4.10.1 Executing Function Calls Sequentially: The jQuery Queue |
|
|
78 | (1) |
|
4.11 New Core Techniques Since Version 1.5 |
|
|
78 | (2) |
|
|
78 | (1) |
|
|
79 | (1) |
|
4.11.3 Version 1.6: What's New? |
|
|
79 | (1) |
|
attr(), prop(), and removeProp() |
|
|
80 | (1) |
|
|
81 | (2) |
|
|
83 | (48) |
|
|
84 | (2) |
|
5.1.1 What Is a Selector? |
|
|
84 | (1) |
|
|
84 | (1) |
|
|
85 | (1) |
|
5.2 The Basic Selectors and the Hierarchical Selectors |
|
|
86 | (13) |
|
|
88 | (9) |
|
|
97 | (2) |
|
|
99 | (24) |
|
|
99 | (7) |
|
|
106 | (3) |
|
|
109 | (3) |
|
|
112 | (2) |
|
|
114 | (4) |
|
5.3.6 Filters for Form Elements and Form Filters |
|
|
118 | (5) |
|
|
123 | (8) |
|
|
123 | (1) |
|
|
123 | (1) |
|
|
124 | (1) |
|
|
124 | (1) |
|
|
125 | (1) |
|
|
126 | (1) |
|
|
127 | (4) |
|
6 Accessing the Elements of a Web Page |
|
|
131 | (74) |
|
6.1 General Info on Checking, Changing, Adding, and Removing Nodes |
|
|
131 | (1) |
|
6.2 Checking and Changing Node Contents: html() and text() |
|
|
132 | (3) |
|
6.3 Content of Form Fields: val() |
|
|
135 | (2) |
|
6.4 Accessing Attributes via attr() |
|
|
137 | (1) |
|
6.5 Inserting Nodes into a Web Page |
|
|
137 | (11) |
|
6.5.1 append() and prepend() |
|
|
138 | (5) |
|
6.5.2 appendTo() and prependTo() |
|
|
143 | (5) |
|
6.6 Inserting Nodes Before or After |
|
|
148 | (6) |
|
6.6.1 after() and before() |
|
|
149 | (3) |
|
6.6.2 insertAfter() and insertBefore() |
|
|
152 | (2) |
|
|
154 | (5) |
|
6.7.1 Wrapping Individually with wrap() |
|
|
154 | (2) |
|
6.7.2 Wrapping All with wrapAll() |
|
|
156 | (2) |
|
6.7.3 Wrapping Inner Areas with wrapInner() |
|
|
158 | (1) |
|
6.7.4 Unwrapping with unwrap() |
|
|
159 | (1) |
|
6.8 Replacing with replaceWith() and replaceAll() |
|
|
159 | (7) |
|
6.8.1 Replacing with replaceWith() |
|
|
160 | (4) |
|
6.8.2 Replacing All with replaceAll() |
|
|
164 | (2) |
|
6.9 Removing with empty() and remove()/detach() plus removeAttr() |
|
|
166 | (6) |
|
6.9.1 The Alternative of remove(): detach() |
|
|
171 | (1) |
|
6.9.2 Deleting Attributes |
|
|
171 | (1) |
|
6.10 Cloning with clone() |
|
|
172 | (4) |
|
|
176 | (8) |
|
6.11.1 Of Children and Parents: children() and parent() plus parents()/parentsUntil() |
|
|
176 | (4) |
|
6.11.2 offsetParent() and closest() |
|
|
180 | (2) |
|
|
182 | (2) |
|
6.11.4 Searching Descendants with has() |
|
|
184 | (1) |
|
6.12 Finding with find() and contents() |
|
|
184 | (2) |
|
6.13 The jQuery Method each() for Iterating over Arrays and Objects |
|
|
186 | (7) |
|
|
188 | (4) |
|
|
192 | (1) |
|
|
193 | (3) |
|
6.14.1 The end() and and Self() Methods |
|
|
195 | (1) |
|
6.15 A More Comprehensive Example at the End: A Date Component |
|
|
196 | (9) |
|
7 Formatting with Style Sheets Under jQuery |
|
|
205 | (42) |
|
|
206 | (3) |
|
7.1.1 Getting Style Properties |
|
|
206 | (1) |
|
|
207 | (2) |
|
7.2 Changing Classes of Elements |
|
|
209 | (14) |
|
7.2.1 Adding Classes: addClass() |
|
|
210 | (8) |
|
7.2.2 Removing Classes: removeClass() |
|
|
218 | (1) |
|
7.2.3 Toggling Classes with toggleClass() |
|
|
219 | (2) |
|
7.2.4 Testing for a Class: hasClass() |
|
|
221 | (2) |
|
|
223 | (13) |
|
7.3.1 Determining the Position with position() |
|
|
224 | (4) |
|
7.3.2 Position in Relation to the Document: offset() |
|
|
228 | (8) |
|
|
236 | (3) |
|
|
239 | (3) |
|
7.5.1 height() and width() |
|
|
239 | (3) |
|
7.6 Inner and Outer Dimensions |
|
|
242 | (5) |
|
8 Event Handling Under jQuery |
|
|
247 | (32) |
|
8.1 Basic Information on Events, Event Handlers, Triggers, and Data Binding |
|
|
247 | (5) |
|
|
247 | (1) |
|
8.1.2 General Information on Event Handlers |
|
|
248 | (1) |
|
8.1.3 HTML Event Handlers |
|
|
248 | (1) |
|
8.1.4 JavaScript Event Handler |
|
|
249 | (1) |
|
|
250 | (1) |
|
|
251 | (1) |
|
|
251 | (1) |
|
|
252 | (1) |
|
8.2 The Event Object in jQuery |
|
|
252 | (6) |
|
8.2.1 The Constructor of jQuery.Event |
|
|
252 | (1) |
|
8.2.2 The Properties of the Event Object jQuery.Event |
|
|
253 | (3) |
|
8.2.3 The Methods of an Object of the Type jQuery.Event |
|
|
256 | (2) |
|
8.3 Ready, Steady, Go: $ (document).ready() |
|
|
258 | (1) |
|
|
258 | (4) |
|
8.5 Expanded Methods for Event Handling |
|
|
262 | (17) |
|
8.5.1 The bind() and unbind() Methods |
|
|
262 | (4) |
|
8.5.2 The One and Only: one() |
|
|
266 | (1) |
|
8.5.3 The Method trigger() |
|
|
267 | (2) |
|
|
269 | (1) |
|
8.5.5 Live Events: The live() and die() Methods plus delegate() and undelegate() |
|
|
270 | (4) |
|
8.5.6 Auxiliary Functions for Interaction |
|
|
274 | (5) |
|
|
279 | (18) |
|
|
279 | (4) |
|
9.1.1 Speed Is All You Need |
|
|
279 | (1) |
|
9.1.2 Specifying a Callback |
|
|
280 | (1) |
|
|
281 | (1) |
|
|
281 | (1) |
|
9.1.5 Stopping via stop() and jQuery.fx.off |
|
|
282 | (1) |
|
|
282 | (1) |
|
|
282 | (1) |
|
9.2 Showing and Hiding: The show() and hide() Methods |
|
|
283 | (1) |
|
9.3 Sliding Effects: slideDown(), slideUp(), and slideToggle() |
|
|
284 | (3) |
|
9.4 Opacity Effects: fadeIn(), fadeOut(), and fadeTo() (Plus toggle()) |
|
|
287 | (2) |
|
9.5 Individual Animations with animate() |
|
|
289 | (8) |
|
|
297 | (48) |
|
10.1 AJAX and XMLHttpRequest (XHR) Basics |
|
|
297 | (7) |
|
10.1.1 Creating an XMLHttpRequest Object Manually |
|
|
298 | (1) |
|
10.1.2 The Methods of an XHR Object |
|
|
299 | (1) |
|
10.1.3 The Properties of an XHR Object |
|
|
300 | (1) |
|
10.1.4 A Practical Example of Data Request Without Special jQuery Methods |
|
|
300 | (2) |
|
10.1.5 The Data Format in an AJAX Communication |
|
|
302 | (1) |
|
10.1.6 AJAX Request Process |
|
|
303 | (1) |
|
10.2 Special AJAX Support in jQuery |
|
|
304 | (3) |
|
10.2.1 JSONP and Remote Requests |
|
|
304 | (1) |
|
|
305 | (1) |
|
10.2.3 Methods in jQuery for AJAX Requests |
|
|
305 | (1) |
|
10.2.4 Specifying the Data Type |
|
|
305 | (2) |
|
|
307 | (1) |
|
10.3 $.get() and $.post() |
|
|
307 | (9) |
|
10.3.1 Just Requesting Plain Text from the Web Server |
|
|
307 | (2) |
|
10.3.2 Sending Data to the Web Server via $.get() and $.post() |
|
|
309 | (3) |
|
10.3.3 Getting and Parsing XML Data |
|
|
312 | (4) |
|
10.4 Getting and Parsing JSON Data: get JSON() and parseJSON() |
|
|
316 | (4) |
|
10.4.1 A Simple Application with JSON |
|
|
316 | (1) |
|
10.4.2 Requesting Twitter Tweets via JSONP |
|
|
317 | (3) |
|
10.5 Loading a Script Later via AJAX: jQuery.getScript() |
|
|
320 | (2) |
|
10.6 The General Variation for Loading Data: load() |
|
|
322 | (5) |
|
10.6.1 Specifying Filters |
|
|
323 | (4) |
|
|
327 | (3) |
|
10.7.1 The serialize() Method |
|
|
327 | (2) |
|
10.7.2 The serializeArray() Method |
|
|
329 | (1) |
|
10.7.3 The General Version: param() |
|
|
329 | (1) |
|
10.8 Default Values for AJAX |
|
|
330 | (1) |
|
10.9 AJAX Events and AJAX Event Handlers |
|
|
330 | (3) |
|
|
330 | (2) |
|
|
332 | (1) |
|
|
333 | (12) |
|
|
333 | (6) |
|
|
339 | (1) |
|
10.10.3 Loading and Executing a JavaScript File |
|
|
340 | (1) |
|
10.10.4 Sending Data Plus Evaluating the Success |
|
|
340 | (1) |
|
10.10.5 Extended Techniques for $.ajax() |
|
|
341 | (4) |
|
|
345 | (48) |
|
|
345 | (3) |
|
11.1.1 Components for Supporting Interaction |
|
|
346 | (1) |
|
|
346 | (1) |
|
|
347 | (1) |
|
11.1.4 The Theme Framework and ThemeRoller |
|
|
347 | (1) |
|
|
348 | (1) |
|
11.3 How Is jQuery UI Used? |
|
|
349 | (6) |
|
11.3.1 Downloading and ThemeRoller |
|
|
349 | (4) |
|
11.3.2 Using jQuery UI on a Web Page |
|
|
353 | (2) |
|
11.3.3 A Sample Web Page for jQuery UI |
|
|
355 | (1) |
|
11.4 Using the Components in jQuery UI |
|
|
355 | (15) |
|
11.4.1 The Default Setting |
|
|
356 | (2) |
|
11.4.2 Some Basic Rules on Components and Widgets |
|
|
358 | (1) |
|
11.4.3 Properties/Options of Components |
|
|
359 | (4) |
|
11.4.4 Methods of Components |
|
|
363 | (3) |
|
11.4.5 Events in Components and Widgets |
|
|
366 | (4) |
|
11.5 An Overview of the Components and Widgets |
|
|
370 | (15) |
|
11.5.1 The Interaction Components |
|
|
370 | (2) |
|
|
372 | (13) |
|
|
385 | (1) |
|
|
385 | (2) |
|
11.6.1 The effect() Method |
|
|
385 | (1) |
|
11.6.2 Color Animations with animate() |
|
|
386 | (1) |
|
11.7 A Complete Website Based on jQuery UI |
|
|
387 | (6) |
|
|
393 | (24) |
|
12.1 The jQuery Plug-In Page |
|
|
393 | (12) |
|
12.1.1 Searching For and Using an Existing Plug-In |
|
|
394 | (3) |
|
12.1.2 Validation Plug-Ins |
|
|
397 | (8) |
|
12.2 Creating Custom Plug-Ins |
|
|
405 | (10) |
|
12.2.1 Why Create Custom Plug-Ins? |
|
|
405 | (1) |
|
12.2.2 Creating Your First Plug-In |
|
|
405 | (4) |
|
12.2.3 The Main Rules for Creating a Simple Plug-In |
|
|
409 | (1) |
|
12.2.4 Rules for Creating More Complex Plug-Ins |
|
|
409 | (2) |
|
12.2.5 An Example for a Plug-In with Options |
|
|
411 | (2) |
|
12.2.6 Another Example for a Plug-In with Options |
|
|
413 | (2) |
|
12.3 Publishing a Plug-In |
|
|
415 | (2) |
|
|
417 | (40) |
|
|
417 | (5) |
|
|
419 | (1) |
|
13.1.2 Downloading and Integrating the Framework |
|
|
420 | (1) |
|
|
421 | (1) |
|
13.2 The Role System and data-role |
|
|
422 | (1) |
|
13.3 The Basic Structure of a Mobile Web Page |
|
|
422 | (2) |
|
|
424 | (4) |
|
13.4.1 External Links via Hijax |
|
|
424 | (1) |
|
13.4.2 Internal Links and the Special Interpretation of a Page |
|
|
425 | (3) |
|
|
428 | (1) |
|
|
428 | (1) |
|
|
429 | (6) |
|
13.7.1 Buttons with Icons |
|
|
430 | (1) |
|
13.7.2 Block Element or Inline Element |
|
|
431 | (1) |
|
|
431 | (1) |
|
13.7.4 A Practical Example |
|
|
432 | (3) |
|
13.8 Toolbars and Navigation Bars |
|
|
435 | (4) |
|
|
439 | (4) |
|
|
443 | (5) |
|
|
444 | (1) |
|
13.10.2 The Various Form Elements |
|
|
444 | (3) |
|
13.10.3 Plug-In Methods for Form Elements |
|
|
447 | (1) |
|
13.10.4 Sending the Form Data |
|
|
448 | (1) |
|
|
448 | (4) |
|
|
448 | (1) |
|
13.11.2 Orientation Change |
|
|
448 | (1) |
|
|
449 | (1) |
|
|
449 | (3) |
|
13.12 The Theme Framework and General Content Design |
|
|
452 | (2) |
|
13.13 Collapsed and Expanded Content |
|
|
454 | (3) |
|
|
457 | (10) |
|
A.1 Overview of Basic Information on JavaScript |
|
|
457 | (8) |
|
|
457 | (1) |
|
A.1.2 Variables, Literals, and Data Types |
|
|
457 | (2) |
|
A.1.3 Functions and Methods |
|
|
459 | (2) |
|
A.1.4 Objects in JavaScript |
|
|
461 | (2) |
|
|
463 | (2) |
|
A.2 Available DOM Objects |
|
|
465 | (2) |
Index |
|
467 | |