Marakana jQuery Training i Marakana jQuery Training Marakana jQuery Training ii Copyright © 2011 Marakana, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of Marakana Inc. We took every precaution in preparation of this material. However, the we assumes no responsibility for errors or omis- sions, or for damages that may result from the use of information, including software code, contained herein. JavaScript is trademark of Oracle. All other names are used for identification purposes only and are trademarks of their respective owners. Marakana offers a whole range of training courses, both on public and private. For list of upcoming courses, visit http://marakana.com Marakana jQuery Training iii REVISION HISTORY NUMBER DATE DESCRIPTION NAME 1.1 April 2011 Some typos have been corrected. LT Marakana jQuery Training iv Contents 1 Introduction To JQuery 1 1.1 Useful Learning Resources..........................................1 1.2 History Of JQuery...............................................1 1.3 What is JQuery?................................................2 1.4 JQuery vs Custom JavaScript.........................................3 1.5 JQuery vs Other JavaScript Libraries.....................................3 1.6 Where Do I Start?...............................................4 1.7 Download the Library.............................................4 1.8 Using Google Content Deliver Network (CDN)...............................5 1.9 The jQuery Function Object........................................6 1.10 Is The Document Ready?...........................................6 1.11 Where to Run Your Code?..........................................7 1.12 Execute Some JQuery Code.........................................7 1.13 Introduction To JQuery: Exercises......................................8 1.13.1 Questions...............................................8 1.13.2 Labs..................................................8 2 Selection and DOM Traversal 10 2.1 Selection................................................... 10 2.2 Basic Selectors................................................ 11 2.3 Hierarchy Selectors.............................................. 11 2.4 Selection By Attribute............................................ 11 2.5 Form Selectors................................................ 12 2.6 Position Filters................................................ 14 2.7 Other Filters.................................................. 14 2.8 jQuery Method Chaining........................................... 15 2.9 DOM Traversal................................................ 15 2.10 Filter Methods................................................. 16 2.11 Advanced Method Chaining......................................... 16 2.12 Selection and DOM Traversal: Exercises................................... 17 Marakana jQuery Training v 3 DOM And Attributes Manipulation 18 3.1 DOM Manipulation.............................................. 18 3.2 Creating Elements............................................... 18 3.3 Inserting Elements.............................................. 19 3.4 Inserting an Element Before or After Another Element........................... 19 3.4.1 Before an Existing Element..................................... 19 3.4.2 After an Existing Element...................................... 20 3.5 Inserting an Element as the First or Last Child of a Parent.......................... 20 3.5.1 As the First Child........................................... 20 3.5.2 As the Last Child........................................... 20 3.6 Mass Insertion................................................. 21 3.7 Moving Elements............................................... 21 3.8 Cloning (Copying) Elements......................................... 21 3.9 Removing Elements.............................................. 22 3.10 Replacing Elements.............................................. 22 3.11 Element Content: HTML vs Text....................................... 22 3.12 Other Element Attributes........................................... 23 3.13 DOM And Attributes Manipulation: Labs.................................. 23 4 CSS Styling and JQuery 24 4.1 Reading And Modifying CSS Properties................................... 24 4.2 Reading And Modifying CSS Properties................................... 24 4.3 Removing CSS Properties.......................................... 25 4.4 CSS Classes.................................................. 26 4.5 Element Dimensions............................................. 26 4.6 Element Position............................................... 27 4.7 CSS Styling and JQuery: Labs........................................ 27 5 Events 29 5.1 Events Overview............................................... 29 5.2 Binding An Event Handler.......................................... 29 5.3 Binding Shortcut Methods.......................................... 30 5.4 Unbinding Handlers and “One-Shot” Handlers................................ 30 5.5 The Event Object............................................... 31 5.6 Event Delegation............................................... 31 5.7 Event Delegation And JQuery........................................ 32 5.8 .live() vs .delegate() ........................................ 32 5.9 Events: Labs................................................. 33 Marakana jQuery Training vi 6 Effects and Custom Animations 34 6.1 JQuery Built-in Effects............................................ 34 6.2 Showing or Hiding Elements......................................... 34 6.3 Fading Effects................................................. 35 6.4 Sliding Effects................................................. 35 6.5 Creating Your Own Animations....................................... 36 6.6 Animation Notes............................................... 36 6.7 Animation Queues.............................................. 37 6.8 Stopping Animations............................................. 37 6.9 Additional Animation controls........................................ 37 6.10 Effects and Custom Animations: Labs.................................... 38 7 Ajax 39 7.1 What Is Ajax?................................................. 39 7.2 Limitations Of Ajax.............................................. 40 7.3 Load HTML Content: The .load() Method................................ 40 7.4 Hijax With JQuery.............................................. 41 7.5 Select In Detail What To Load........................................ 41 7.6 Advanced Loading Using The .load() Method.............................. 42 7.7 JSON and JSONP............................................... 42 7.8 Load JSON Data: The .getJSON() Method................................ 43 7.9 The Main Ajax Method: .ajax() ..................................... 44 7.10 Ajax Global Settings............................................. 45 7.11 Error Handling................................................ 45 7.12 Ajax: Labs.................................................. 46 8 Plugins 47 8.1 Popular Plugins................................................ 47 8.2 Easing Plugin................................................. 47 8.3 Slideshow Plugins............................................... 49 8.4 The ColorBox Plugin............................................. 49 8.5 The Cycle Plugin............................................... 50 8.6 Jcrop Plugin.................................................. 52 8.7 The Validation Plugin............................................. 54 8.8 DataTable Plugin............................................... 55 8.9 Creating Your Own Plugin: Why?...................................... 56 8.10 Creating Your Own Plugin: How?...................................... 56 8.11 Creating Your Own Plugin: Best Practices.................................. 57 8.12 Plugins: Labs................................................. 58 Marakana jQuery Training vii 9 jQuery UI 59 9.1 What Is JQuery UI?.............................................. 59 9.2 Getting Started................................................ 59 9.3 JQuery Widgets................................................ 60 9.4 The Accordion Widget............................................ 60 9.5 The Tabs Widget............................................... 61 9.6 Dialogs.................................................... 63 9.7 JQuery UI Controls.............................................. 64 9.8 The Datepicker................................................ 65 9.9 The Slider................................................... 66 9.10 The Progress Bar............................................... 66 9.11 Jquery UI Interactions............................................. 67 9.12 Drag & Drop................................................. 67 9.13 Drag & Drop: Example............................................ 68 9.14 Sortable elements............................................... 69 9.15 Selectable Elements.............................................. 69 9.16 Resizable Elements.............................................. 70 9.17 jQuery UI animation............................................. 70 9.18 jQuery UI: Labs................................................ 71 10 Advanced Concepts 72 10.1 Best Practices: Loops............................................. 72