jQuery Fundamentals Rebecca Murphey [http://www.rebeccamurphey.com] jQuery Fundamentals Rebecca Murphey [http://www.rebeccamurphey.com] Copyright © 2010 Licensed by Rebecca Murphey under the Creative Commons Attribution-Share Alike 3.0 United States license [http://creativecommons.org/licenses/ by-sa/3.0/us/]. You are free to copy, distribute, transmit, and remix this work, provided you attribute the work to Rebecca Murphey as the original author and reference the GitHub repository for the work [http://github.com/rmurphey/jqfundamentals]. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. Any of the above conditions can be waived if you get permission from the copyright holder. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to the license [http://creativecommons.org/licenses/by-sa/3.0/us/]. Table of Contents 1. Welcome ....................................................................................................................... 1 Getting the Code ........................................................................................................ 1 Software ................................................................................................................... 1 Adding JavaScript to Your Page ................................................................................... 1 JavaScript Debugging .................................................................................................. 2 Exercises ................................................................................................................... 2 Conventions used in this book ...................................................................................... 2 Reference Material ...................................................................................................... 3 I. JavaScript 101 ................................................................................................................ 4 2. JavaScript Basics .................................................................................................... 5 Overview .......................................................................................................... 5 Syntax Basics .................................................................................................... 5 Operators .......................................................................................................... 5 Basic Operators .......................................................................................... 5 Operations on Numbers & Strings ................................................................. 6 Logical Operators ....................................................................................... 6 Comparison Operators ................................................................................. 7 Conditional Code ................................................................................................ 7 Truthy and Falsy Things .............................................................................. 8 Conditional Variable Assignment with The Ternary Operator .............................. 9 Switch Statements ...................................................................................... 9 Loops ............................................................................................................. 10 The for loop ............................................................................................ 10 The while loop ......................................................................................... 11 The do-while loop ..................................................................................... 11 Breaking and continuing ............................................................................ 12 Reserved Words ............................................................................................... 12 Arrays ............................................................................................................. 14 Objects ............................................................................................................ 15 Functions ......................................................................................................... 16 Using Functions ........................................................................................ 16 Self-Executing Anonymous Functions ........................................................... 17 Functions as Arguments ............................................................................. 17 Testing Type .................................................................................................... 17 Scope .............................................................................................................. 18 Closures .......................................................................................................... 20 II. jQuery: Basic Concepts ................................................................................................. 21 3. jQuery Basics ....................................................................................................... 22 $(document).ready() .......................................................................................... 22 Selecting Elements ............................................................................................ 22 Does My Selection Contain Any Elements? ................................................... 23 Saving Selections ...................................................................................... 24 Refining & Filtering Selections ................................................................... 24 Form-Related Selectors .............................................................................. 24 Working with Selections .................................................................................... 25 Chaining .................................................................................................. 25 Getters & Setters ...................................................................................... 26 CSS, Styling, & Dimensions ............................................................................... 26 Using CSS Classes for Styling .................................................................... 27 Dimensions .............................................................................................. 27 Attributes ........................................................................................................ 27 iii jQuery Fundamentals Traversing ....................................................................................................... 28 Manipulating Elements ...................................................................................... 29 Getting and Setting Information about Elements ............................................. 29 Moving, Copying, and Removing Elements ................................................... 29 Creating New Elements ............................................................................. 31 Manipulating Attributes ............................................................................. 32 Exercises ......................................................................................................... 32 Selecting ................................................................................................. 32 Traversing ............................................................................................... 33 Manipulating ............................................................................................ 33 4. jQuery Core ......................................................................................................... 34 $ vs $() ........................................................................................................ 34 Utility Methods ................................................................................................ 34 Checking types ................................................................................................. 35 Data Methods ................................................................................................... 36 Feature & Browser Detection .............................................................................. 37 Avoiding Conflicts with Other Libraries ............................................................... 37 5. Events ................................................................................................................. 38 Overview ......................................................................................................... 38 Connecting Events to Elements ........................................................................... 38 Connecting Events to Run Only Once .......................................................... 38 Disconnecting Events ................................................................................ 39 Namespacing Events .................................................................................. 39 Inside the Event Handling Function ..................................................................... 39 Triggering Event Handlers .................................................................................. 40 Increasing Performance